Every CSS named color in one place. Search by name, browse by letter, filter by family, and copy Hex, RGB, or HSL with a single click. Whether you're looking up tomato or hunting for the right shade of blue, this is the fastest way to find it.
This isn't just a static list. It's built for actual use during design and development work — when you need a specific color fast and don't want to leave your workflow to Google it.
Type any part of a color name — like "blue" or "coral" — and the list filters in real time. You can also search by hex code. Start typing #FF and see every color that matches. Results update on every keystroke so you never have to wait.
The alphabet strip at the top lets you jump straight to any letter section. Handy when you know the name starts with "L" and want to scroll through all the lightblue, limegreen, lawngreen options without going back to the top every time.
Use the filter pills to show only Reds, Greens, Blues, Purples, or any other family. Great for when you're exploring options — maybe you need "a warm neutral brown" and want to see all 13 CSS browns side by side before choosing.
Every color card has quick Hex, RGB, and HSL copy buttons. No clicking into a detail view, no fiddling with selection — just tap the format you need and it's in your clipboard. A toast confirms the copy so you know it worked.
Click any color to open its full detail modal. You see the large swatch, all values (Hex, RGB, HSL, CSS name, OKLCH), a live contrast preview showing how light and dark text looks on that background, and five auto-generated monochromatic shades.
Grid view gives you visual swatch cards. List view is a compact row layout with all values visible without clicking. Table view is a dense spreadsheet-style layout, ideal for comparing many colors quickly or for accessibility reference work.
Default sort is alphabetical, but you can sort by hue (color wheel order), lightness (dark to light), or saturation (vivid to muted). Sorting by hue turns the list into a visual rainbow — useful for understanding how CSS names map to the color wheel.
Inside the detail modal, you'll see a live preview showing how black text and white text look on the selected color background. This helps you make quick accessibility decisions — no need to open a separate contrast checker for a basic sanity check.
Behind a few of these 140 names, there's a story worth knowing. These are the ones I find most interesting — either because of how they got their name, or because they behave in a way that surprises people.
If you've been writing CSS for any length of time, you've typed color: red or background: white without thinking much about it. These words just work. But there are 140 of them — and the gap between "red" and whatever "papayawhip" is supposed to be is a bit of a journey.
The history of CSS named colors is more interesting than you'd expect, and understanding where they came from helps explain why some of them seem so arbitrary.
The original 16 HTML colors — black, white, red, green, blue, yellow, cyan, magenta, and eight more — came from the VGA color palette used in early personal computers. These were the colors you could reliably display on a standard screen in the early 1990s. They were practical, not poetic.
The rest of the 140 came mostly from the X Window System, a graphical environment for Unix computers that had its own named color file called rgb.txt. This file was maintained by programmers who apparently had quite a bit of creative latitude when naming colors. That's how we ended up with lemonchiffon, burlywood, cornsilk, and moccasin. When browsers started adopting extended color support in the late 1990s, many grabbed the X11 color list wholesale.
Papayawhip is a warm, creamy color (#FFEFD5) that's perfectly nice and useful. The mystery isn't the color itself — it's the name. Unlike most CSS colors, papayawhip doesn't appear in the original X11 color list. It shows up in browser implementations and then the CSS spec without any clear paper trail explaining who added it or why. Various web history investigators have looked into this over the years. The answer, as far as anyone can tell, is genuinely unknown. It just appeared.
A surprising number of CSS color names come from the physical world — and specifically from things the X Window System programmers apparently had strong feelings about. Food: lemonchiffon, honeydew, cornsilk, wheat, bisque, peachpuff. Fabrics and textiles: linen, moccasin, burlywood. Flowers and plants: orchid, thistle, lavender, seagreen. Precious metals: gold, silver. Gemstones: coral (the ocean variety), turquoise, jade (no — there's no jade, I keep forgetting).
What's interesting is that many of these names capture something real about the color's character. Linen really does look like the natural beige of undyed linen fabric. Coral really does look like the pinkish-orange of coral. The naming wasn't arbitrary in the sense of random — it was associative, drawing on the visual memory of physical things.
green is not the bright green you probably want — it's a dark, medium green (#008000). The bright pure green is called lime (#00FF00). Similarly, gray is a specific mid-tone (#808080) rather than a generic descriptor. When in doubt, check the hex code before committing to a named color.
In June 2014, Eric Meyer — a web developer whose books and articles have taught CSS to a generation of developers — lost his six-year-old daughter Rebecca to a brain tumor. On the day of her passing, the web community gathered online and proposed adding a color named after her to the CSS specification. Within days, the W3C CSS Working Group formally agreed.
Rebeccapurple is now hex #663399 — a rich, medium purple that was apparently Rebecca's favorite color. It's been part of the official CSS specification since 2014. For a lot of developers, it's the color they think of when they want to remember that behind every technical standard, there are human beings with real lives. It's also just a very useful purple if you need one.
There's no single right answer here, but there are useful guidelines based on what you're actually doing.
The places where named colors make real sense are when the name is more informative than the code. background: white is clearer than background: #FFFFFF. color: transparent is instantly readable. border: 1px solid black reads like English. For these common, obvious colors, names reduce cognitive load with no tradeoff.
Where named colors fall apart is when they give false confidence. A developer who writes color: green thinking they'll get a nice bright green is going to be surprised. The name-to-value mapping only works if you actually know what value the name refers to — and with 140 options, not all of them are intuitive.
When your designer hands you a specific value — #1B4F8A or #F2ECD8 — use hex. It's the lingua franca of design tools, it's compact, and it's unambiguous. The downside is that hex values don't communicate anything about the color's character just by looking at the code. But for a design system where the values are defined externally, that doesn't matter.
If you're generating variations programmatically — hover states, disabled states, tint and shade scales — HSL is dramatically more maintainable. hsl(210, 80%, 50%) tells you the hue (blue-ish), saturation (quite vivid), and lightness (middle brightness). You can adjust any one of those values intuitively without breaking the overall feeling of the color. This is why design system libraries increasingly use HSL under the hood even if they expose hex values to consumers.
Small pieces of knowledge that save real time once you know them.
Three confusions that come up constantly:
green is dark (#008000). lime is bright pure green (#00FF00)aqua and cyan are exactly the same color (#00FFFF)fuchsia and magenta are exactly the same color (#FF00FF)gray and grey are always identical — both spellings work everywhereCSS color names don't care about capitalization at all. TOMATO, Tomato, tomato, and tOmAtO all produce the exact same color. Convention is lowercase but there's no technical reason you have to stick to it. This is different from hex values — browsers accept uppercase and lowercase hex too, but the case-insensitivity of names is absolute and spec-defined.
When you're building a rough prototype and don't want to think about color yet, named colors are perfect fillers. steelblue for a primary button, lightgray for cards, tomato for errors, seagreen for success states. They're readable, they communicate rough intent, and you can swap them for proper brand colors later without hunting through hex codes.
Many people assume named colors that sound dark will have sufficient contrast on white backgrounds. This isn't always true.
green on white: 5.1:1 — barely passes AAblue on white: 8.6:1 — passes AAAred on white: 4.0:1 — fails AA for normal textorange on white: 2.3:1 — fails AA badlyAlways check contrast ratio before shipping, regardless of how dark a color name sounds.
currentColor is technically a CSS color value (not a named color, but part of the same family). It inherits the element's text color for any property. This makes it incredibly useful for SVG icons — set fill: currentColor and the icon automatically matches the surrounding text color. Great for dark mode support, interactive state changes, and anywhere you want an SVG to behave like text.
If you're learning color theory, use the sort-by-hue option in this tool and read through the full list. You'll watch the colors cycle through the entire spectrum in order — warm reds blending into oranges, shifting through yellows and greens, cooling into blues and purples. It's genuinely one of the best visual demonstrations of how the color wheel maps to real color values.
The questions that come up most often — answered clearly and completely.
color: tomato in your CSS, the browser knows that "tomato" means #FF6347 and renders that color. There are 140 of these keywords defined in the CSS Color Level 4 specification. They work in any CSS property that accepts a color value — text color, background, border, box-shadow, gradients, and more — and they're supported in every browser without needing any vendor prefixes or fallbacks.style attributes, SVG fill and stroke attributes, and the deprecated bgcolor and color HTML attributes. They also work in JavaScript when setting style properties: element.style.backgroundColor = 'cornflowerblue' works perfectly in all modern browsers. The names are case-insensitive in all contexts.gray/grey, darkgray/darkgrey, lightgray/lightgrey, darkslategray/darkslategrey, slategray/slategrey, and lightslategray/lightslategrey. Each pair produces identical output. Pick one spelling and use it consistently across your codebase.green is #008000 — a medium-dark green that comes from the original 16-color HTML palette, which in turn came from the VGA video card standard from the early 1990s. In that palette, "green" was defined at half brightness to leave room for a brighter "lime green." When the CSS spec formalized the 16 HTML colors, they kept the VGA definitions. So green in CSS is dark, and lime is the bright pure green (#00FF00). This still trips up new CSS learners decades later.black, darkblue, darkgreen, darkred, darkslategray, firebrick, indigo, maroon, midnightblue, navy, purple, rebeccapurple, saddlebrown, seagreen, sienna, and teal. Colors like red, orange, yellow, lime, and cyan typically fail on white. Always verify with a contrast checker before production use.Papayawhip (#FFEFD5) is a warm, creamy off-white that appeared in browser color implementations and eventually got formalized into the CSS specification. Unlike most CSS named colors, which trace back to the X11 Unix color system, papayawhip doesn't appear in the original X11 rgb.txt file. Various people have researched its origin over the years without finding a definitive answer. It's become something of a minor legend in web standards — the color that just appeared from nowhere and stayed.rebeccapurple, which was added in 2014 — it's not supported in IE, but IE is no longer relevant for production development. On mobile, all 140 names work in iOS Safari, Chrome for Android, and Samsung Internet.