CSS colour names, explained
CSS defines 148 colour keywords — from aliceblue to yellowgreen — that you can use anywhere a colour value is allowed. They cover 139 distinct colours, because nine colours have two names. Here is how the list came to be, where it misleads, and how it relates to HEX, RGB, HSL and OKLCH.
How many CSS named colours are there: 140, 147 or 148?
All three numbers circulate, and they are counting different things. CSS Color Module Level 4 defines 148 colour keywords. Seven of those are just British spellings of American ones (grey for gray and friends), which is where the familiar 141 comes from — and older lists that predate rebeccapurple say 140. Two more pairs are different names for the same value (aqua/cyan, fuchsia/magenta), so there are only 139 visually distinct colours in the whole set. This tool covers all 148 keywords: 141 named entries, with the seven -grey spellings searchable and shown alongside their -gray twin.
Where the CSS colour names come from
Almost all of them are inherited from the X11 window system colour list of the 1980s, which is why the set is so uneven: a long run of greens but only a handful of oranges, four kinds of goldenrod, and a brown (#a52a2a) that is really a dark red. One name has a different origin — rebeccapurple (#663399) was added to CSS in 2014 in memory of Rebecca Alison Meyer, the daughter of web standards author Eric Meyer, who died at six years old. It is the only named colour in the spec added as a tribute.
Which named colours are duplicates
Nine hex values answer to two names each. Seven are spelling pairs — gray/grey, darkgray/darkgrey, dimgray/dimgrey, lightgray/lightgrey, slategray/slategrey, lightslategray/lightslategrey, darkslategray/darkslategrey — and two are genuinely different words for the same colour: aqua = cyan (#00ffff) and fuchsia = magenta (#ff00ff). Both spellings of each pair are valid CSS and always have been; searching this tool for grey finds the -gray entries.
Why darkgray is lighter than gray
Because the names were never designed as a system. gray is #808080, with a perceptual lightness of 60.0%; darkgray is #a9a9a9 at 73.5% — genuinely, visibly lighter. lightslategray (61.9%) also sits between them. The reason is historical: the greys came from the X11 window system, where darkgray was named relative to a different reference than plain gray, and CSS inherited both without reconciling them. Switch the reference table to sort by perceptual lightness and you can see the whole grey family fall into an order that has almost nothing to do with their names.
green is not the green you think
green is #008000 — a dark, muted green at 52% perceptual lightness. The bright green most people picture is lime (#00ff00). The same trap catches purple (#800080, much darker than magenta) and gray versus silver. These come from the original 16 CSS Level 1 keywords, which were named for a 16-colour VGA palette rather than for how they look on a modern screen.
Are CSS colour names case-sensitive?
No. RebeccaPurple, rebeccapurple and REBECCAPURPLE are all the same keyword to a browser. This tool displays them in CamelCase because it reads more clearly in a list, but the value you copy is the lowercase form conventionally used in stylesheets. Colour names work anywhere a <color> value is allowed — color, background, border, gradients, SVG fill, and inside color-mix().
Should you use colour names in production CSS?
For quick prototypes, debugging and throwaway demos they are excellent — tomato is faster to type and easier to remember than #ff6347. For a real design system they are a poor fit: there are only 139 of them, they cluster unevenly, the names lie about lightness (see darkgray), and you cannot derive a scale from them. The usual path is to prototype with names, then pin down the real palette in OKLCH, where a lightness ramp is something you can actually compute.
How to find a colour’s name from its code
Paste a HEX, RGB, HSL or OKLCH value into the converter and it returns the closest CSS colour name, along with every other format. It works as a colour identifier and colour namer in one: give it a value, get the name.
Converting HEX to a colour name
Type or paste the hex (for example #1a2b3c) into the converter. The tool finds the nearest named colour and shows it alongside RGB, HSL and OKLCH. The hex-to-colour-name lookup also works from a shareable link — open ?hex=1a2b3c to jump straight to the result.
Converting RGB, HSL or OKLCH to a colour name
All three work. Paste an rgb(…), hsl(…) or oklch(…) string and the converter returns the closest colour name plus every other format. RGB-to-colour-name, HSL-to-colour-name and OKLCH-to-colour-name all use the same nearest-match logic as the hex lookup.
When a colour has no CSS name
Most colours don't have one — there are 16.7 million possible hex values and only 139 distinct named colours, so the odds of an exact match are tiny. This tool only claims a name when the colour is genuinely close to it; when nothing is near enough it shows — rather than pointing you at a name that looks wrong next to your colour. That is deliberate: a vaguely nearest name is more misleading than no name at all.
HEX vs RGB vs HSL vs OKLCH
HEX and RGB are the same thing written differently: how much red, green and blue a screen mixes, with hex writing them in base 16. HSL reorganises that into hue, saturation and lightness, which is friendlier to reason about but perceptually dishonest — its "lightness" is a mathematical midpoint, not a perceived one. OKLCH fixes exactly that, at the cost of being newer and less familiar. This tool shows all four for every colour, so you never have to convert by hand or trust an approximation.
What OKLCH is, and why it matters
OKLCH is the colour format from CSS Color Level 4 that has become the default for design systems. It describes a colour as L (perceptual lightness), C (chroma/saturation) and H (hue angle) — and unlike HSL, its lightness matches what your eye actually sees. In HSL, hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) claim the same 50% lightness while looking nothing alike; in OKLCH the same L really does mean the same apparent brightness across every hue. That is what makes it possible to build a colour ramp, or darken a colour by 10%, and get a predictable result. Every named colour here shows its OKLCH value so you can move a legacy palette into modern CSS without converting by hand.
Pasting an oklch() value
The converter accepts oklch(62.8% 0.25768 29.23) and gives you back the hex, RGB, HSL and closest colour name. It takes lightness as a percentage or as a 0–1 number, tolerates commas, and accepts deg on the hue. The OKLCH values this tool prints are precise enough to paste straight back in and land on the identical colour — rounded-off chroma silently shifts saturated colours by several steps, so the extra digits are there on purpose.
“Outside the sRGB gamut”
That message appears because OKLCH can describe colours your screen may not be able to show. It covers wide-gamut spaces like Display P3, which modern Apple and OLED screens support and which covers roughly a quarter more colours than sRGB. If you ask for a chroma higher than sRGB can reach at that lightness and hue, there is no matching hex — so the tool tells you plainly and shows the nearest sRGB colour instead of quietly clipping it and pretending the numbers matched.
Is OKLCH safe to use in production?
It is supported in current versions of every major browser, so for most projects the answer is yes. The usual caution applies to older browsers: if you need to support them, either supply a hex fallback declaration before the oklch() one — older browsers ignore what they cannot parse — or generate hex at build time. Copying both values from this tool takes one extra click.
Which CSS named colours are safe for text?
Of the 148 keywords, 116 carry black body text at WCAG AA and 32 carry white — and, as it happens, not one of them works with both. There is a narrow band of lightness where black and white would each pass, and no named colour falls inside it. In practice that means every named colour has exactly one correct text colour, and the wrong choice is always an accessibility failure rather than a matter of taste. The reference table shows the verdict for all of them at a glance.
Reading the contrast readout
For every colour you select, it shows what black text and white text would actually look like on it, each with its WCAG contrast ratio and grade — AAA (7:1), AA (4.5:1 for body text), AA large (3:1 for 18pt and above) or fail. Rather than making you copy a hex into a separate contrast checker, it answers the question you actually have: can I put words on this colour, and in which colour?
Perceptual lightness vs contrast ratio
They measure different things and disagree more often than you would expect. Perceptual lightness (the L in OKLCH) is how bright a colour looks to a human eye. WCAG contrast ratio is a formula comparing two colours' relative luminance, and it is weighted heavily towards green — which is why a saturated yellow and a mid grey can feel similarly bright yet behave completely differently under a text colour. This tool shows both, because the first tells you how a colour sits in a palette and the second tells you whether you are allowed to put text on it.
Sorting colours by lightness
The reference table has a sort by perceptual lightness mode that ranks every named entry from white (100%) down to black (0%), using the OKLCH L value rather than the name. It is the fastest way to pick a set of named colours that step evenly, and it makes the naming quirks impossible to miss: darkgray lands well above gray, and navy (27.1%) turns out to be the darkest colour in the whole set apart from black itself.
Copying values for CSS or Tailwind
Click any value to copy it in a CSS-ready form — #ffd700, rgb(255,215,0), hsl(51,100%,50%), oklch(88.68% 0.18219 95.33) or the bare name gold. All of them paste directly into a stylesheet, a Tailwind config, or a design tool.
Linking straight to a colour
The converter reads URL parameters and keeps the address bar in sync, so you (or an AI assistant) can build a deep link by hand. Open ?hex=1a2b3c to load the converter showing HEX, RGB, HSL, OKLCH and the closest CSS name. The value works with or without the # and also accepts rgb() and hsl() strings (aliases color, colour, c). Use ?search=blue to filter the named-colour grid instead.
Privacy
It runs entirely in your browser on phone, tablet or desktop. Nothing is uploaded — every conversion, contrast calculation and search happens on your own device, and no colours are sent to or stored on a server. The only network request the page makes beyond loading itself is an anonymous, cookie-free page-view count.
More tools
Build a full palette with the colour palette generator, make a favicon in your brand colour with the favicon generator, or browse all free tools.