CSS Named Colours — All 148
Every named CSS colour with its hex, RGB and HSL values and a rendered swatch.
Copy:
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 gray —gray is #808080; darkgray is #A9A9A9. The X11 and HTML palettes disagreed and both names were kept.
- Both spellings work —gray/grey, darkgray/darkgrey and their compounds are all valid aliases.
- Green is not #00FF00 —green is #008000. The full-brightness colour is named lime.
- Several names are near-duplicates —fuchsia and magenta are both #FF00FF; aqua and cyan are both #00FFFF.
- There are four "white" variants —white, whitesmoke, ghostwhite, snow — plus floralwhite, antiquewhite and navajowhite.
- transparent is a keyword, not a colour —It 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 Browse the color grid or search by name (e.g. "salmon").
- 2 Click any color card to see HEX, RGB, and HSL values.
- 3 Select the format to copy (Name / HEX / RGB / HSL) and click Copy.
- 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.
More in Reference & Data
HTTP Status Codes Every status code with its meaning, the RFC that defines it, and notes on when to use each rather than a near neighbour.MIME Types Media types mapped to file extensions in both directions, covering the full IANA registry.HTML Entities Named and numeric character references with a live preview of each rendered glyph.Port Numbers Well-known and registered TCP/UDP ports with the service on each and its transport protocol.Unicode Explorer Search by code point, name or character, with the UTF-8, UTF-16 and HTML encodings of each shown.ASCII Table All 128 ASCII characters in decimal, hex, octal and binary, including the control characters.
See all reference & data.