Color Name Describer
Describe any color in plain English — 'dark muted blue', 'pale red'.
Overview
The Color Name Describer turns any hex code into a plain-English description such as "dark muted blue", "pale red" or "vivid yellow-green". The result combines three adjectives — lightness, saturation and hue family — into a short phrase you can paste into a design ticket, a Slack thread, or an alt-text attribute.
It is built for designers writing token names, product managers describing colour bugs without screenshots, and accessibility reviewers documenting where a brand colour falls on the lightness scale. Because the description uses everyday vocabulary, it is far easier for non-technical stakeholders to follow than raw HSL values.
How it works
The input hex is converted to HSL. The hue angle is bucketed into twelve named families (red, orange, yellow, yellow-green, green, teal, cyan, blue, violet, magenta, pink, plus brown for low-saturation oranges). Saturation maps to four bands — vivid, bright, muted and dull — and lightness to five — very dark, dark, medium, light and very light, with near-white and near-black overrides for the extremes.
Achromatic colours bypass the hue family entirely and become "black", "white", "light grey", "medium grey" or "dark grey" based on lightness alone. The phrasing is deterministic, so the same hex always yields the same description.
Examples
#ff6600 → vivid orange
#a8b3c1 → light muted blue
#4d0000 → very dark red
#ededed → very light grey
FAQ
Why does the describer call my purple "violet"?
The hue families use perceptual labels rather than the CSS named-colour list. Anything in roughly the 270–290° hue range is labelled violet; magenta covers the pink-purple region above 290°.
Will the same hex always produce the same wording?
Yes. The thresholds between bands are fixed, so the description is reproducible. If you want fuzzier wording, sample multiple nearby colours and combine the results.
Can I use the description as a CSS variable name?
It is a reasonable starting point — replace spaces with hyphens — but for design tokens you usually want a semantic name (--accent-bg) rather than a perceptual one.
How is this different from the named-color finder?
The named-colour finder picks the closest CSS keyword (lightblue, crimson), which is great for naming but constrained to 147 entries. The describer instead generates a free-form phrase that scales to any colour.