search

Found

info Overview

Maps the 148 CSS named colors to hex, RGB, HSL, and OKLCH, and finds the nearest CSS name for any hex via OKLab ΔE distance with a swatch grid.

📘 How to Use

  1. Switch between "By name" and "By hex" mode
  2. Type a CSS color name (e.g. steelblue) or a hex code (e.g.
  3. Read the swatch, hex / RGB / HSL / OKLCH values, and ΔE for nearest matches
  4. Open the 148-color grid to browse the full named-color set visually

CSS Named Color Lookup

Pick from the 148 CSS named colors (autocomplete from the input)

grid_view Related

Article

CSS Named Color Lookup | A two-way dictionary for the 148 CSS color keywords

A developer-facing dictionary for the 148 named colors defined in CSS Color Module Level 4. Look up a color name and get its hex / RGB / HSL / OKLCH values, or drop in any hex and get back the closest CSS keyword ranked by OKLab perceptual ΔE distance — so you can decide on the spot whether to ship a design-system color as a CSS keyword or keep it as a custom hex.

💡 About this tool

The 148 CSS named colors (steelblue, cornflowerblue, lightgoldenrodyellow and friends) are a frozen vocabulary inherited from the X Window System rgb.txt file via SVG 1.0 and standardized in the CSS Color Module. Most developers rely on editor autocompletion to spell them, which falls apart on long names like lightgoldenrodyellow or mediumspringgreen. Opening MDN every time interrupts the design flow.

This tool gives you autocomplete in the input field — typing light surfaces lightcoral, lightskyblue, and the rest as you type, and picking one fills hex, RGB, HSL, and oklch() notations side by side. Going the other way, paste any hex and the tool finds the perceptually closest CSS keyword using Björn Ottosson's OKLab coefficients. OKLab ΔE tracks human color perception much more closely than naive sRGB Euclidean distance, so the "nearest named color" suggestion actually matches what your eye sees — useful when you're deciding whether #5e8aaf is close enough to steelblue to ship as the keyword.

🧐 Frequently Asked Questions

Q. How many CSS named colors exist? A. 148, formally defined in CSS Color Module Level 4 (Section 6.1). If you count the gray/grey spelling variants separately, the surface count is 157, but the underlying palette is 148 distinct sRGB values.

Q. Why does rebeccapurple (#663399) exist? A. The CSS Working Group added it in 2014 in memory of Rebecca Meyer, daughter of CSS author Eric Meyer. It is one of the few CSS specs with an explicitly documented human story behind a color keyword.

Q. Are gray and grey the same color? A. Yes. Nine grey-family keywords (gray, darkgray, lightgray, dimgray, slategray, lightslategray, darkslategray, plus combined forms) have identical grey-spelled aliases that share the same hex value, preserved for historical reasons.

Q. Why use OKLab ΔE for nearest-name search? A. Euclidean distance in sRGB diverges sharply from human perception, especially in dark and saturated regions — two colors equally far in RGB can look identical or wildly different. OKLab, published by Björn Ottosson in 2020, is a perceptually uniform color space where straight-line distance approximates perceived color difference, giving more intuitive nearest-name matches.

Q. Can I input RGB, HSL, or OKLCH directly? A. Not currently. Inputs accept CSS color names and hex codes only. RGB, HSL, and OKLCH are output-only. Convert your RGB/HSL to hex first if you need to look them up.

Q. Is the oklch() notation actually usable in CSS? A. Yes. oklch(L% C H) is part of CSS Color Module Level 4 and ships in current Chrome, Safari, and Firefox. It is gaining adoption in wide-gamut design systems targeting Display P3 or Rec.2020.

📚 Fun Facts

The CSS named-color list traces back to the rgb.txt file shipped with X Window System in the mid-1980s, where researchers and graphics programmers named colors by hand. Whimsical names like mediumaquamarine, papayawhip, and peachpuff are fossils from that era — sensibilities of some long-gone X11 theme author baked permanently into the web platform because the CSS Working Group has chosen to preserve, not prune, the historical set.

Sitting alongside the 1980s textiles vocabulary (burlywood = the color of stripped tree bark, gainsboro = the surname of an 18th-century English painter) in the same spec as the cutting-edge oklch() notation makes the CSS color section one of the rare web platform docs that spans 40 years of computing history in 200 lines.