Skip to tool
ecech.
🎨 Design & Color

darkgray Is Lighter Than gray, and Both Spellings Work

148 names with a century of accumulated history. Finding the closest one needs a perceptual distance, because RGB distance picks a different answer.

Nearest name

Perceptual distance

ΔE, under 2.3 is imperceptible

Nearest by RGB

Names available

Closest matches

Oddities in the list

Advertisement

How the calculation works

Four greys, in the order the names suggest darkgray #a9a9a9 169 gray #808080 128 dimgray #696969 105 lightgray #d3d3d3 211 darkgray is lighter than gray. The names came from two different lists that were merged. Nothing can be fixed now, because pages depend on the current values.

How to Use This Tool

Type a hex value or a colour name. The nearest names are ranked by perceived difference, with the straight RGB answer alongside for comparison.

Nearest needs a definition

The obvious approach treats a colour as a point in RGB space and takes the straight-line distance. It is fast and it does not match perception, because equal steps in R, G and B are not equally visible — the eye is far more sensitive to changes in green than in blue.

Measuring in CIE Lab instead gives a space designed so that equal distances look about equally different. The resulting figure is ΔE, and the conventional reading is:

  • Under 1 — not perceptible.
  • 1 to 2.3 — perceptible only in a direct side-by-side comparison. The 2.3 threshold is the classic "just noticeable difference".
  • 2 to 10 — noticeable.
  • Above 50 — different colours by any reasonable account.

The two methods often pick different names, and the Lab answer is the one that looks right when you see the swatches together. Where they disagree, this page says so.

Where the values come from

Rather than shipping a table of 148 hex values, every name here is resolved by the browser's own CSS parser and read back as a normalised value. That makes the table authoritative by construction, and a name the browser does not recognise is simply dropped.

It is a small thing with a real benefit: a hand-typed colour table can contain one wrong digit that nobody notices for years, because the wrong colour still looks like a colour.

Two ways to measure “closest” RGB distance √(ΔR² + ΔG² + ΔB²) — treats every channel alike ΔE in Lab distance in a space built so equal steps look equal The eye resolves green far better than blue, so a large jump in blue can score worse in RGB than a small one in green while looking closer. Where they disagree, trust the swatches, not the arithmetic.
Both are shown, so you can see how often they part company.

The list is a museum

The 148 names accumulated rather than being designed, and it shows:

  • darkgray is lighter than gray — 169 against 128. The X11 and HTML colour lists disagreed when they were merged, and the inconsistency is permanent because pages depend on the current values.
  • Both spellings work for grey, in every compound: darkgrey, slategrey and the rest are all valid.
  • rebeccapurple was added in 2014 in memory of the daughter of a web standards contributor. It is #663399.
  • Several names are near-duplicatesaqua and cyan are the same colour, as are fuchsia and magenta.

When to use a name

Names are convenient in a prototype, a diagram, or a quick test, and they are the wrong tool in a design system. There are only 148 of them, they cluster oddly, and they carry no relationship to each other — darkblue is not blue darkened by any consistent amount.

A design system wants a scale defined deliberately, most easily in a perceptual space such as OKLCH where "the same colour, two steps lighter" is a calculation rather than a search through a century-old list.

Advertisement

Frequently Asked Questions

How many named colours does CSS have?
148 in the current specification, including both the gray and grey spellings as separate entries. They accumulated from earlier lists rather than being designed as a set.
Why is darkgray lighter than gray?
Because the two names came from different colour lists — X11 and HTML — that were merged, and they disagreed. darkgray is #a9a9a9 at 169 while gray is #808080 at 128. It cannot be corrected now, since existing pages depend on the current values.
Can I write grey instead of gray in CSS?
Yes, in every compound. grey, darkgrey, dimgrey, lightgrey, slategrey and the rest are all valid and identical to their gray spellings.
What is the best way to find the nearest named colour?
Measure in CIE Lab rather than RGB. Lab is built so that equal distances look about equally different, whereas RGB treats a step in blue as equivalent to a step in green — and the eye does not. The two methods often pick different names.
What does a ΔE value mean?
Perceived difference. Under 1 is imperceptible, up to about 2.3 is visible only side by side — the classic just-noticeable-difference threshold — and above 50 the colours are unrelated by any account.
Should I use named colours in a design system?
No. There are only 148, they cluster unevenly, and they have no consistent relationship to each other — darkblue is not blue darkened by any fixed amount. A deliberate scale in a perceptual space such as OKLCH is a calculation rather than a search through a historical list.

Related tools in Design & Color

Browse all Design & Color tools
A handwritten note reading ecech.com resting on the keyboard used to build the site.

Made by one person

ecech. is not a content farm. Every tool here is written and checked by hand, one at a time, by someone who wanted the tool to exist and could not find a version that showed its working.

No accounts and no sign-in, and nothing you type reaches a server — every calculation on this page runs inside your browser. The ads are served by Google and do set their own cookies, which is set out in full on the privacy page. More about the site.