Every CSS named color in one place — with Hex codes, RGB values, and HSL. Filter by color family, search by name, switch between grid and list views, and copy any value with a single click. No login, no download, works on any device.
The 140 CSS named colors aren't random — they fall into recognizable families. Knowing where each family lives helps you pick the right starting point before you ever open a color picker.
From bright red and crimson to deep darkred and firebrick. Use for warnings, urgency, CTAs on light backgrounds.
Warm tones like darkorange, coral, tomato, and orangered. Great for energy and appetite in food or lifestyle brands.
Bright yellow, classic gold, soft khaki, and warm goldenrod. Optimistic, friendly, and attention-grabbing.
The largest family — from lime to darkgreen, with midtones like forestgreen, seagreen, and mediumspringgreen.
Classic blue, dodgerblue, steelblue, royalblue, and dark options like navy and darkblue. Trust, stability, tech.
From vivid violet and darkorchid to softer mediumpurple and slateblue. Royalty, creativity, spirituality.
Soft pink and lightpink alongside vivid hotpink, deeppink, and rosy palevioletred. Feminine, playful, romantic.
Earthy tones like saddlebrown, sienna, chocolate, and peru. Natural, grounded, and timeless in outdoor and food design.
Beyond plain white — ivory, snow, linen, seashell, and floral white. Subtle warmth for backgrounds and cards.
A full range from lightgray and gainsboro through gray, dimgray, darkslategray, and solid black.
Aqua, cyan, turquoise, cadetblue, and teal. Fresh, modern, and popular in tech and health branding.
Soft lavender, plum, thistle, and orchid. Delicate, calming, and popular in wellness and beauty design.
It's not just a static list. This chart is built to be useful in the middle of actual design and development work, not just something you screenshot and forget.
Type any color name, partial name, or hex code into the search box and the chart filters in real time. Looking for "cornflower"? You'll see cornflowerblue and cornsilk immediately without scrolling through the full list.
Click any family button — Reds, Greens, Blues, Purples — to see only colors in that range. Useful when you know you need "a blue" but haven't decided which shade, and want to compare all 19 CSS blues at once.
Switch between Grid view (color cards with swatches), List view (all values in a scannable table), and Strip view (color families as horizontal swatches). Each is useful for a different workflow.
Every color card has quick-copy buttons for Hex and RGB. Click any card to open a detail panel with all formats — including HSL and ready-to-paste CSS — each with its own copy button.
The default sort is alphabetical, but you can sort by hue (color wheel order), lightness (dark to light), or saturation (vibrant to muted). Sorting by hue makes it easy to see the color spectrum in order.
Click any color to open its full detail panel. You get the large swatch, all color values (Hex, RGB, HSL, OKLCH, CSS), five monochromatic shades, and a note about whether to use light or dark text on that background.
The story of web colors is older than most people expect. When Netscape Navigator introduced the bgcolor attribute in 1994, they included support for 16 named colors borrowed from the Windows VGA palette. Those 16 colors — black, white, red, green, blue, yellow, cyan, magenta, silver, gray, maroon, olive, navy, teal, purple, and lime — became the foundation of web color for the next decade.
The jump to 140 colors came from an unexpected direction: the X Window System, a graphical environment used on Unix workstations since the 1980s. X11 had its own named color file that included colors like cornflowerblue, goldenrod, and papayawhip. When browsers started extending their color support in the late 1990s, many adopted the X11 list, which eventually got formalized into the CSS specification.
Papayawhip is probably the most famous CSS color name, and there's a good reason for that: nobody knows where it came from. It's not in the original X11 color list. When the CSS specification was being written, it simply appeared — attributed to "community input" — and has been part of the spec ever since. The name has become a bit of a symbol for the quirky, human side of web standards.
The CSS Color Level 4 specification (which became a W3C Recommendation in 2022) added two new named colors: rebeccapurple and transparent. Rebeccapurple has its own remarkable story — it was added in 2014 in honor of Rebecca Meyer, the six-year-old daughter of CSS developer Eric Meyer, who died of brain cancer. Her favorite color was purple, and the web community named the color after her as a gesture of support. It's now permanently part of the CSS specification at hex code #663399.
This is a genuinely useful thing to have an opinion on. The three formats coexist in most codebases, but using them thoughtfully rather than randomly makes your CSS more maintainable.
Color names are perfect when you're sketching UI quickly and want readable code. background: lightyellow communicates intent better than background: #FFFFE0 in a component you haven't designed properly yet. They're also useful in documentation, educational examples, and anywhere human readability matters more than precision.
When you're working from a proper brand palette — specific values that came from a designer's file — hex codes are the right choice. They're compact, universally accepted by design tools, and immediately recognizable to anyone who works with colors. #1A6EFC is precise in a way that no named color can be.
HSL shines in CSS custom properties and anywhere you're generating color variations systematically. If you define your primary color as hsl(220, 90%, 56%), you can create a hover state with hsl(220, 90%, 48%) (slightly darker) or a disabled state with hsl(220, 30%, 70%) (desaturated and lighter) just by changing obvious values. With hex, you'd need a preprocessor or JavaScript to do the same thing.
green is not the pure green you'd expect — it's #008000, a darker medium green. The pure bright green (#00FF00) is called lime. This trips up beginners constantly. If you want a vivid green, use lime or #00FF00, not green.
Real-world codebases almost always mix formats, and that's okay. A common pattern: define your design tokens as HSL custom properties (--color-primary: hsl(220, 90%, 56%)), use hex for any fixed one-off values, and occasionally use named colors for things like transparent, white, black, or currentColor — which are clearer as words than as codes.
These 16 colors have been part of web standards since HTML 4.01. They're supported everywhere and make a good baseline reference for understanding the full CSS color system.
| Name | Swatch | Hex Code | RGB | Notes |
|---|
Small things that make a real difference once you know them.
Named colors are great as semantic variable names but not ideal as final values in a production design system. Instead of --color-bg: white, consider --color-bg: #FFFFFF — the hex version works better across preprocessors, design tools, and color manipulation utilities.
Of all the CSS color keywords, transparent and currentColor are arguably the most useful in real development. transparent creates invisible backgrounds and clean gradient transitions. currentColor inherits the text color of an element — perfect for SVG icons that should match their surrounding text.
Named colors are defined by the spec but not designed for accessibility. green on white fails WCAG AA contrast for normal body text. Always run your color pair through a contrast checker before shipping, even with "safe-looking" named colors.
If you're learning color theory, try sorting this chart by "Hue" and reading through the colors in order. You'll see the spectrum unfold — reds into oranges into yellows into greens into blues into purples and back to reds. It's a fast way to build intuition for how color wheel positions relate to the CSS names you use every day.
CSS accepts both American and British spellings: gray and grey are the same color, as are darkgray / darkgrey, lightgray / lightgrey, darkslategray / darkslategrey, and so on. Pick one spelling and stick with it consistently across your codebase — both are fully valid in every browser.
When multiple people work on the same codebase, color communication can get loose — "that medium blue", "the slightly darker gray", "the orange-ish red". Agreeing to reference CSS color names as approximate anchors ("closer to steelblue than dodgerblue") gives teams a shared vocabulary without requiring a formal design system.
The questions people actually search for when learning about web colors — answered without padding.
aqua and cyan are the same color (#00FFFF), and fuchsia and magenta are the same (#FF00FF). If you count unique colors rather than unique names, you get 138. But the official, canonical list recognized by all browsers is 140 named values.green is actually a medium-dark green (#008000), not the pure vivid green most people expect. This is because it was defined as one of the original 16 HTML colors to match the VGA palette, where "green" was already defined as half-brightness. The pure bright green (#00FF00) is called lime in CSS. This is one of the most common CSS color surprises for beginners — if you want vivid green, always use lime or #00FF00.<div style="color:tomato">. In CSS, they work anywhere a color value is accepted: color: steelblue;, background: lightyellow;, border: 1px solid coral;. In JavaScript, you can set them via the style API: element.style.color = 'rebeccapurple', and browsers will recognize and convert them. All 140 names are supported in every modern browser without any flags or prefixes.transparent is equivalent to rgba(0, 0, 0, 0) — fully transparent black. It doesn't have a traditional 6-digit hex code because standard hex doesn't include an alpha channel, but it can be represented as #00000000 in 8-digit hex format (the last two digits are the alpha: 00 = fully transparent). The most useful application of transparent in CSS is creating gradient transitions: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent) creates a fade from a semi-transparent overlay to nothing.Red, red, RED, and ReD all refer to exactly the same color. The CSS specification explicitly states this. The convention in modern CSS is to write color names in all lowercase — cornflowerblue, not CornflowerBlue — but any capitalization is technically valid. This is different from some other parts of CSS (like class names in selectors) which are case-sensitive.rebeccapurple is a CSS named color added in 2014 with the hex value #663399. It was named in memory of Rebecca Alison Meyer, the daughter of well-known web developer Eric Meyer, who passed away on her sixth birthday from brain cancer. The web standards community proposed adding her name to the CSS color specification as a tribute, and the W3C CSS Working Group approved it. It's now a permanent part of the CSS specification — one of the few technical standards with such a personal and human story behind it.white and black (by far the most frequent), transparent, gray and lightgray, red (often for error states), green (for success states), blue, and orange. Named colors like tomato, cornflowerblue, and steelblue appear often in tutorials and prototypes. For production code, most professional projects define custom hex or HSL values rather than relying heavily on named colors.