CSS Named Colors Browser

What This Tool Does

This tool is a searchable, sortable, and filterable reference for all 148 CSS named colors recognized by every modern browser. Every entry includes its keyword (the CSS-valid name), its hexadecimal triplet (e.g. #FF6347), its rgb() functional notation (e.g. rgb(255, 99, 71)), its hsl() equivalent (e.g. hsl(9, 100%, 64%)), and its HSV reading for designers who think in saturation-value terms rather than lightness. Clicking any swatch copies the hex code to your clipboard and opens a detail panel where you can copy the RGB or HSL string instead, useful when a chart library or design token system expects one format and not another.

The browser is purely a reference — no color picker, no palette generator, no gradient builder. That single-purpose scope is intentional. When you need to know whether papayawhip is a real name or remember which exact yellow palegoldenrod resolves to, the answer should be one search away rather than buried inside a multi-pane design app. Every calculation runs client-side from a static lookup table; nothing you type is sent anywhere.

Sorting controls let you re-order the grid by alphabetical name, by hue angle (red → orange → yellow → green → cyan → blue → purple), by perceived lightness, or by saturation. Family filters narrow the grid to a single hue group at a time — reds, pinks, oranges, yellows, greens, cyans, blues, purples, browns, whites, or grays/blacks — which is the fastest way to compare visually similar names like tomato, coral, and salmon side by side. The grid renders the entire palette without pagination because 148 swatches fit comfortably on a single scroll on any modern device.

How to Use It

Start by typing into the search box at the top. The matcher checks the keyword name, the hex code, and the RGB string, so red, #ff0000, and 255,0,0 all find the same swatch. Partial matches work too: typing dark lists every name beginning with that prefix, typing green lists every name containing it (darkgreen, lightgreen, seagreen, limegreen, etc.). The search debounces input by 150 milliseconds so the grid never flickers between keystrokes.

Click a swatch to copy its hex code to your clipboard immediately and open the detail panel beneath the search bar. The detail panel shows the name, hex, RGB, and HSL values each on their own row with an individual Copy button, so you can grab rgb(255, 99, 71) for a Chart.js dataset without first stripping the # off a hex code. A small toast notification confirms the copy. Clicking another swatch replaces the detail; clicking the same swatch a second time keeps it open.

Use the sort chips to re-order the grid. By Name is alphabetical and is the default — useful when you remember a name and want to confirm its hex code. By Hue sorts by HSL hue angle, which groups colors into rainbow order and is the right choice when you're picking a palette by warmth or coolness. By Lightness runs from black to white and surfaces the lightest and darkest variants of each hue at opposite ends. By Saturation puts the most vivid colors first and pushes desaturated grays and beiges to the bottom — helpful when you need a punchy accent color and don't want to be distracted by muted candidates.

The family filter chips below the sort row narrow the visible set to a single hue family. Combining filter + sort is powerful: filter to Greens and sort By Lightness to see the full green ramp from darkgreen at the bottom to honeydew at the top. Every swatch tile shows the name and hex code at a glance, and the swatch block above renders the color against your current theme background so you can immediately see how each name reads in light or dark mode.

Common Use Cases

Rapid Prototyping

The most common legitimate use for named colors is throwaway styling. When you're sketching a layout and want a distinct color on every section to keep them mentally separate, typing background: tomato; is faster than opening a color picker, copying a hex code, and remembering which hex went where. Names are mnemonics. papayawhip, peachpuff, and mistyrose evoke their colors clearly enough that you can read your own prototype CSS without referring to a swatch.

Chart and Data-Viz Libraries

Charting libraries including D3, Chart.js, ECharts, and Plotly accept named colors interchangeably with hex codes in any color-accepting property. Setting borderColor: "steelblue" on a Chart.js dataset is shorter and more readable than "#4682B4" — and when you're prototyping a dashboard, the small readability win compounds across dozens of series. Production dashboards eventually migrate to design tokens or custom palettes, but the prototyping phase benefits from name-as-color shorthand.

Default Placeholder Styling

Form placeholders, disabled-state backgrounds, "no data" empty states, and other low-priority decorative surfaces are perfect targets for named colors. lightgray for a divider, whitesmoke for an alternating row background, silver for a disabled button border — these are values that will never be brand-critical and will never need to scale. Naming them by keyword makes the CSS self-documenting in a way hex codes can't match.

Fallback Colors When a Theme Fails

A robust CSS theme uses custom properties: color: var(--text-primary, black);. The fallback after the comma fires if the variable is undefined. Named colors make excellent fallbacks because they are guaranteed to be valid in every browser since the late 1990s and they communicate intent (black, white, red) more clearly than arbitrary hex values would. When a custom theme bundle fails to load and the fallback fires, an obvious named color is a clearer "something broke" signal than a near-match hex.

Educational and Tutorial Material

CSS tutorials — both online courses and printed books — have always leaned on named colors because they're memorable and demonstrate property behavior without distracting students with hex syntax. The MDN documentation pages for color, background-color, and border consistently use names like red, blue, and green in their examples for exactly this reason. When you're learning, the cognitive load of also parsing hex codes adds nothing to comprehension.

Edge Cases and Quirks

Named colors carry several well-known traps that catch even experienced developers off guard.

Color aliases: aqua and cyan are identical. Both resolve to #00FFFF. The same is true for fuchsia and magenta (both #FF00FF) — one name was specified by HTML 4 and the other was added later from the X11 palette. The browser accepts either interchangeably, so a stylesheet mixing both for the same intent is technically valid but stylistically chaotic.

gray and grey are both valid. CSS recognizes both spellings as the same color. So does darkgray/darkgrey, lightgray/lightgrey, dimgray/dimgrey, slategray/slategrey, and so on. Pick one spelling and stick with it inside a single codebase — the linter won't flag the inconsistency, but human reviewers will.

darkgray is lighter than gray. This is one of CSS's most-cited bugs. gray is #808080 (50% gray). darkgray is #A9A9A9 (66% gray, noticeably lighter). The reason is historical: the X11 color palette from the 1980s defined them this way, and when CSS 2.1 adopted the X11 names in 1998 the inversion came along. The CSS spec authors could have fixed it, but doing so would break every stylesheet that visually expects the existing values. So the bug is now a permanent feature.

transparent is a named color. It resolves to rgba(0, 0, 0, 0) — black with zero alpha — and is treated as a color value in every property that accepts a color. This matters in transitions: animating from red to transparent passes through translucent red rather than fading to white, because the underlying RGB stays at red until alpha hits zero. For a fade-to-white transition you need rgba(255,255,255,0) as the endpoint.

currentColor is a keyword, not a color. It refers to the computed value of the color property on the element at the time it is read, and resolves dynamically. border-color: currentColor; means "the border is always the same color as the text," even when the text color changes via inheritance or a class swap. currentColor is accepted anywhere a color value is allowed, but it isn't itself a color — you can't use it in a gradient stop and expect a fixed swatch.

System colors are deprecated. CSS 2.1 defined a set of system color keywords like MenuText, ButtonFace, WindowText, and InfoBackground, intended to match the user's operating system theme. They were deprecated in CSS Color 3 because the values varied unpredictably between operating systems and browser versions and could not be relied on for consistent styling. Modern browsers still accept them but resolve them to fixed fallbacks. Avoid them in new code.

Browser quirks for rebeccapurple. Safari shipped support within days of the name being announced in June 2014. Chrome and Firefox followed by October 2014. Internet Explorer 11 never recognized the keyword — sites that needed IE 11 support had to fall back to the literal hex #663399. Now that IE 11 is end-of-life, rebeccapurple is safe everywhere.

Case insensitivity. Named colors are case-insensitive in CSS. Tomato, TOMATO, tomato, and ToMaTo all resolve identically. By convention, write them lowercase.

Behind the Scenes: History of CSS Named Colors

X11 Roots (1980s)

The named color palette in CSS is not original to CSS. It was inherited from the X11 color database, which was developed at MIT in the mid-1980s as part of the X Window System — the original Unix graphical environment. Engineers needed an easy way to refer to common colors from configuration files and shell scripts, and the X11 team built a text file called rgb.txt mapping plain-English names like tomato, cornflowerblue, and papayawhip to their RGB triplets. Many of the names were chosen for their evocative quality rather than any standardization process — papayawhip, for example, came from one developer's pantone-style approach to naming. The file shipped on every X11 system and quickly became a de facto standard.

HTML 4 (1997)

Web standards arrived next. HTML 4, finalized in 1997, defined exactly 16 named colors: black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, and aqua. These were chosen to match the VGA palette common at the time and were the only named colors guaranteed across all HTML 4 browsers. Everything else had to be a hex code.

SVG 1.0 and CSS 2.1 (1998–2001)

When the W3C published SVG 1.0 in 2001, it adopted the X11 color palette wholesale — all 140-odd names — for use inside SVG documents. CSS 2.1 (1998 working draft, finalized in 2011) imported the same X11 palette as recognized values for the color property, expanding the 16-color HTML 4 set into the much richer palette we have today. This is where the historical bugs, like darkgray being lighter than gray, became permanent fixtures — the X11 quirks came along with the colors.

CSS Color Module Level 3 (2018)

CSS Color 3, which formally became a W3C Recommendation in 2018, locked the X11-plus-HTML-4 set at 147 named colors. It also added the rgba() and hsla() functional notations for the first time, recognizing that named colors alone were not sufficient for modern design.

CSS Color Module Level 4 and rebeccapurple (2014)

The 148th named color was added under unusual circumstances. In June 2014, Eric Meyer — one of the founding voices of modern CSS and the author of CSS: The Definitive Guide — lost his six-year-old daughter Rebecca to brain cancer. Rebecca had recently declared, on her birthday, that she preferred to be called "Becca" instead. Her favorite color was purple. In the days after her death, the CSS Working Group voted unanimously to add a new named color, rebeccapurple, with the hex value #663399 — chosen because Eric had been using #663399 as a personal-site accent color for over a decade. It is the only named color in the CSS specification added for purely personal, non-technical reasons, and it stands as a permanent memorial.

Comparison: Named Colors vs Hex vs rgb() vs hsl() vs oklch()

CSS gives you at least five distinct ways to specify the same color. Each has a sweet spot. Picking the right notation matters more than novice CSS users realize, because the wrong choice makes maintenance painful months or years later.

Named colors are the most readable and the least precise. They are excellent for prototypes, fallbacks, tutorials, and any context where the exact shade does not matter. They are unreliable for branding because similar-sounding names (tomato vs coral vs salmon) produce visibly different colors. There are only 148 of them — nothing in between.

Hex codes (#FF6347) are the workhorses of brand and design-system color. They are precise, universally supported, easy to copy from a Sketch or Figma file, and unambiguous in code review. Their weakness is that they're opaque — you cannot tell from #A1B2C3 alone whether it's bluish or grayish without looking at it. Use hex when you have a brand palette to enforce and a designer providing exact values.

rgb() and rgba() functional notations expose the same color values that hex encodes, but in decimal and with optional alpha. rgb(255, 99, 71) reads more clearly than #FF6347 if you're going to manipulate components programmatically in JavaScript, and rgba(255, 99, 71, 0.5) handles transparency without dragging in a separate opacity property. Use RGB when you need alpha or when you're computing values dynamically.

hsl() and hsla() express colors in hue/saturation/lightness terms, which maps far better to how humans actually think about color. hsl(9, 100%, 64%) tells you immediately that this is a warm hue (red end of the spectrum), fully saturated, and slightly above middle brightness. Adjusting "make it 10% lighter" or "make it less saturated" becomes a one-number change. Use HSL for design tokens, theme systems, and any context where colors will be programmatically shifted along one axis at a time.

oklch() is the modern replacement for HSL in CSS Color Module Level 4. It uses the OKLab perceptual color space, which means equal numeric changes in lightness or chroma produce equal perceptual changes — unlike HSL, where a 10% lightness shift can look much more dramatic in some hues than others. oklch(70% 0.18 30) is the right notation when accessibility and perceptual uniformity matter: WCAG contrast calculations, color-blind-safe palettes, and dark-mode generation all benefit from oklch's predictable behavior. As of 2026, oklch has full support in all evergreen browsers (Chrome 111+, Firefox 113+, Safari 15.4+) and should be the default for new design systems.

The decision tree: named colors for prototypes; hex for brand palettes; rgb for JavaScript-computed colors; hsl for human-tunable design tokens; oklch for accessibility-driven systems and new code. There is no single right answer — pick the notation that matches the constraint you care most about.