Question 1

What colour is this? How do I find a colour's name from its code?

Accepted Answer

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.

Question 2

How do I convert a HEX code to a colour name?

Accepted Answer

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.

Question 3

Can I convert RGB, HSL or OKLCH to a colour name?

Accepted Answer

Yes — all three. 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.

Question 4

What if my colour has no CSS name?

Accepted Answer

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 a dash rather than pointing you at a name that looks wrong next to your colour.

Question 5

Can I link straight to a colour?

Accepted Answer

Yes. The converter reads URL parameters and keeps the address bar in sync, so you 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.

Question 6

How many CSS named colours are there — 140, 147 or 148?

Accepted Answer

All three numbers circulate, and they count different things. CSS Color Module Level 4 defines 148 colour keywords. Seven are British spellings of American ones (grey for gray and friends), which is where 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 set.

Question 7

Why is darkgray lighter than gray?

Accepted Answer

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 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.

Question 8

Which CSS colour names are duplicates of each other?

Accepted Answer

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 different words for the same colour: aqua = cyan (#00ffff) and fuchsia = magenta (#ff00ff). Both spellings of each pair are valid CSS.

Question 9

Where do the CSS colour names come from?

Accepted Answer

Almost all of them are inherited from the X11 window system colour list of the 1980s, which is why the set is so uneven: 26 greens but few 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. It is the only named colour in the spec added as a tribute.

Question 10

Watch out: green is not the green you think it is

Accepted Answer

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, named for a 16-colour VGA palette rather than for how they look on a modern screen.

Question 11

Are CSS colour names case-sensitive?

Accepted Answer

No. RebeccaPurple, rebeccapurple and REBECCAPURPLE are all the same keyword to a browser. This tool displays 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().

Question 12

Should I use colour names in production CSS?

Accepted Answer

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, 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.

Question 13

What is OKLCH, and why does this tool show it?

Accepted Answer

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) and H (hue angle) — and unlike HSL, its lightness matches what your eye sees. In HSL, yellow and blue both claim 50% lightness while looking nothing alike; in OKLCH the same L means the same apparent brightness across every hue. That makes it possible to build a colour ramp, or darken a colour by 10%, and get a predictable result.

Question 14

What is the difference between HEX, RGB, HSL and OKLCH?

Accepted Answer

HEX and RGB are the same thing written differently: how much red, green and blue a screen mixes, with hex 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. This tool shows all four for every colour.

Question 15

Can I paste an oklch() value in?

Accepted Answer

Yes. 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.

Question 16

Why does my OKLCH colour say "outside the sRGB gamut"?

Accepted Answer

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 holds roughly 30% 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 says so and shows the nearest sRGB colour instead of quietly clipping it.

Question 17

Is OKLCH safe to use in production?

Accepted Answer

It is supported in current versions of every major browser, so for most projects the answer is yes. If you need to support older browsers, supply a hex fallback declaration before the oklch() one — older browsers ignore what they cannot parse — or generate hex at build time.

Question 18

What does the contrast readout tell me?

Accepted Answer

For every colour you select, it shows what black text and white text would 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. It answers the question you actually have: can I put words on this colour, and in which colour?

Question 19

Which CSS named colours are safe for text?

Accepted Answer

Of the 148 keywords, 116 carry black body text at WCAG AA and 32 carry white — and 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. Every named colour has exactly one correct text colour, and the wrong choice is an accessibility failure rather than a matter of taste.

Question 20

What is the difference between perceptual lightness and contrast ratio?

Accepted Answer

They measure different things. 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, weighted heavily towards green — which is why a saturated yellow and a mid grey can feel similarly bright yet behave differently under a text colour. This tool shows both.

Question 21

Can I sort the colours by how light they are?

Accepted Answer

Yes — the reference table has a sort by perceptual lightness mode that ranks all 141 named entries from white (100%) down to black (0%), using the OKLCH L value rather than the name. It is the fastest way to pick named colours that step evenly, and it makes the naming quirks impossible to miss: darkgray lands well above gray, and navy (27.1%) is the darkest colour in the set apart from black.

Question 22

Can I copy values for CSS or Tailwind?

Accepted Answer

Yes. 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.

Question 23

Does it work on mobile, and is anything uploaded?

Accepted Answer

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 beyond loading the page is an anonymous, cookie-free page-view count.

Question 24

How is this different from other colour-name tools?

Accepted Answer

Most named-colour references are static tables of hex, RGB and HSL — accurate, but they stop at the numbers and were largely written before modern CSS colour existed. Most OKLCH tools are pickers and converters that ignore named colours entirely. This one sits in between: every named colour carries its OKLCH value and a WCAG contrast verdict, the table sorts by perceptual lightness, and the converter reads oklch() as happily as hex. No ads, no signup, nothing uploaded.

Question 25

Is this tool free?

Accepted Answer

Yes, completely free. No account, no subscription, no ads, no usage limit. It is one of the free browser tools at jasperbernaers.com.

color name finder — HTML colours_

Frequently Asked Questions — CSS Colour Names, OKLCH & Contrast

🌐 Language

color name finder — HTML colours_

Frequently Asked Questions — CSS Colour Names, OKLCH & Contrast