Copy:
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.