Skip to main content
CodeLint.Dev Dev Tools

CSS Named Colours — All 148

Every named CSS colour with its hex, RGB and HSL values and a rendered swatch.

Copy:
148 colors

The names are historical, not systematic

CSS colour names came from the X11 colour list of the 1980s, which was assembled informally. The inconsistencies are permanent:

  • darkgray is lighter than graygray is #808080; darkgray is #A9A9A9. The X11 and HTML palettes disagreed and both names were kept.
  • Both spellings workgray/grey, darkgray/darkgrey and their compounds are all valid aliases.
  • Green is not #00FF00green is #008000. The full-brightness colour is named lime.
  • Several names are near-duplicatesfuchsia and magenta are both #FF00FF; aqua and cyan are both #00FFFF.
  • There are four "white" variantswhite, whitesmoke, ghostwhite, snow — plus floralwhite, antiquewhite and navajowhite.
  • transparent is a keyword, not a colourIt is equivalent to rgb(0 0 0 / 0). Worth knowing when animating: transitioning to transparent from a light colour can produce a grey halo in older engines.
  • rebeccapurple is a memorial#663399, added to CSS Color 4 in 2014 in memory of Rebecca Meyer, the daughter of Eric Meyer.

About

The CSS Color Names reference lists all 148 colors that can be used by name in CSS (such as "rebeccapurple", "cornflowerblue", or "tomato"). For each color you can copy the CSS name, HEX code, RGB value, or HSL value in one click. Toggle between grid view and table view depending on your preference.

How to use

  1. 1 Browse the color grid or search by name (e.g. "salmon").
  2. 2 Click any color card to see HEX, RGB, and HSL values.
  3. 3 Select the format to copy (Name / HEX / RGB / HSL) and click Copy.
  4. 4 Toggle between Grid and Table view using the view buttons.
How many named colors are there in CSS?
CSS defines 148 named colors, ranging from the basic 16 (black, white, red, green, blue, etc.) introduced in CSS1 to extended color names added in CSS3 like "rebeccapurple", "cornflowerblue", and "mediumaquamarine". The name "rebeccapurple" was added to CSS as a tribute to Rebecca Meyer, daughter of a CSS specification author.
Can I use CSS color names in SVG, Canvas, or React Native?
CSS named colors work in SVG (which uses the same color specification), HTML5 Canvas (via the fillStyle and strokeStyle properties), and React Native (which recognises most CSS color names in StyleSheet). They are universally supported in any modern browser-based rendering context.
Should I use color names or HEX/RGB values in my CSS?
For production code, HEX or HSL values are generally preferred because they are precise and unambiguous. Color names are fine for quick prototyping or learning, but names like "darkgray" (which is lighter than "gray") can be counterintuitive. HEX values like #6b7280 are more predictable and easier to adjust systematically.