CSS Named Colors: Complete List of 148 Colors
The full list of CSS named colors with hex and RGB equivalents. Searchable, copyable, and mobile-friendly.
What are CSS named colors?
CSS includes 148 named colors that you can use in place of hex codes or RGB values. Words like "tomato", "rebeccapurple", and "lightseagreen" are valid CSS color values, defined by the W3C and supported in every modern browser. Named colors make your stylesheets easier to read and remember.
They cover the full color wheel: primary, secondary, tertiary, gray, and a few special tones. Each name maps to a precise sRGB value. Some names are obvious ("red", "blue", "green"), while others are delightfully specific ("papayawhip", "lemonchiffon", "mediumvioletred").
Common use cases
- Quick prototyping: Type a color name to set a placeholder
- Readable CSS: Replace `#ff6347` with `tomato` for clarity
- Theming: Use semantic names (--brand-primary: rebeccapurple) in CSS variables
- Email templates: Some clients restrict hex codes; named colors are widely supported
- Teaching: Named colors are great for introducing CSS to beginners
Method 1: Use UtilBoxx's CSS named colors list (Recommended)
Our CSS named colors list shows every named color with its hex and RGB equivalent, supports search, and lets you copy any name or value with one click. Here is how to use it:
- Go to utilboxx.com/en/tools/color/named
- Browse or search the list (try "purple" or "gray")
- Click any swatch to copy its name
- Click the hex value to copy the precise code
- Use the favorites button to bookmark the colors you use most
Why this method works:
- Searchable, color-grouped list
- One-click copy for name, hex, and RGB
- Shows a visual swatch for every color
- Mobile-friendly layout
- Free, no signup, no ads
Method 2: Memorize the basics
A small set of named colors covers 80% of everyday CSS work:
- Red, green, blue (primary)
- Yellow, cyan, magenta (secondary)
- Black, white, gray
- Orange, pink, purple, brown
- Light/dark variants: lightgray, darkblue, etc.
For more exotic choices, keep a reference list handy.
Method 3: Use CSS variables in your stylesheet
Define your palette as CSS custom properties and use the names in your code:
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
This combines the readability of named colors with the power of a centralized design system.
Frequently asked questions
How many named colors are there in CSS?
There are 148 named colors in the CSS Color Module Level 4 specification. The list includes all the historical colors plus newer additions like rebeccapurple (added in 2014 in memory of Eric Meyer's daughter).
Are named colors case-insensitive?
Yes. CSS color names are case-insensitive, so "Tomato", "tomato", and "TOMATO" all refer to the same color. Lowercase is the conventional style.
What is rebeccapurple?
It is `#663399`, added to the CSS spec in 2014 to honor Rebecca Alison Meyer, the daughter of CSS pioneer Eric Meyer. It is the only named color added to CSS for a non-technical reason.
Can I use named colors in SVG and canvas?
Yes. SVG and the HTML5 canvas API both accept CSS named colors, making them universally compatible with the same names and values.
Conclusion
CSS named colors are an underused gem. For a fast, searchable reference, the UtilBoxx CSS named colors list is the easiest way to find, compare, and copy them.