Find the CSS name for any HEX
Drop in any HEX color and we'll find the closest CSS named color. Useful when matching brand assets to standard CSS keywords.
How to find the closest CSS named color
Paste a HEX and we'll search all 148 CSS keywords for the visually nearest match.
- 01
Pick or paste HEX
Use the swatch or type a HEX value.
Colors round-trip through a normalised OKLCH representation, so manipulations (lighten, mix, contrast) preserve perceptual uniformity per CSS Color 4.
inputOKLCHCSS Color 4perceptuallivein · colorhex · sRGB#3b82f6
loaded · normalisedOKLCH · ready - 02
See nearest match
RGB-Euclidean distance against the 148 CSS named colors.
Format conversion handles
hex,rgb(),hsl(),oklch(),color(display-p3 …)with proper gamut mapping when crossing colour spaces.matchhex · rgb · hslP3gamut-mappedliveout · optionsname · liveroyalblue #4169E1
options applied · livelive - 03
Inspect the swatch
Compare your color and the named color side-by-side.
Contrast and accessibility checks evaluate against WCAG 2.2 AA (4.5:1) and AAA (7:1) thresholds; APCA is offered when contrast is the goal.
compareWCAG 2.2APCAAA · AAAcontrastswatch · convertedboth · readyyours · royalblue
converted · liveWCAG-aware - 04
Copy the name
Use the name directly in CSS or design tokens.
Copy formats any swatch in the chosen syntax (
#aabbcc,rgb(170 187 204), etc.); downloads emit CSS variable blocks or palette JSON.shipclipboardCSS varspalette JSONblobok · copiedready · done✓ Copied royalblue
shipped · ready to shipsuccess
Colour work that survives accessibility audits
Use OKLCH for manipulation
OKLCH is perceptually uniform — lightness changes look uniform. hsl() isn’t, and produces muddy mid-tones.
Test against WCAG 2.2
4.5:1 for normal text (AA), 7:1 for AAA. Use Contrast Checker before shipping.
Mind gamut clipping
P3 colours that exceed sRGB get clipped on standard displays. Choose relative colorimetric in CSS Color 4.
Colour blindness affects 8%
Use the Color Blindness simulator to check critical UI before launch.
Don’t hardcode hex
Use CSS variables. Light/dark themes become trivial when colours are tokenised.
Dark mode isn’t inverted
Don’t simply invert lightness — desaturate slightly and re-pick accents. Pure-inverted UIs look harsh.
When to find a CSS named color
Prototypes, design discussion, learning.
Readable prototypes
Use names instead of hex codes to communicate intent. Conversions go through OKLCH so perceptual lightness stays uniform across hues — a 50% L blue looks as bright as a 50% L yellow. HSL fakes this and produces muddy mid-tones, OKLCH solves it per CSS Color 4.
WCAG 2.2 AABrand audit
Find which CSS keyword is closest to your brand color. WCAG 2.2 contrast is sampled live for AA (4.5:1) and AAA (7:1) — flip foreground/background to test both directions. APCA is offered when contrast itself is the goal (e.g., dataviz).
P3-awareDesign discussion
Use English names to describe colors in standups. Output covers hex, rgb(), hsl(), oklch(), and color(display-p3 …) for CSS Color 4. Drop straight into Tailwind config, CSS custom properties, or Figma without re-typing values.
perceptually-uniformDemos & tutorials
Show CSS examples that don't rely on hex literacy. Pair with the Contrast Checker before shipping any new theme. Catches accessibility regressions before they become bugs filed against you by users with low vision.
gamut-safeQuick comparison
See whether a HEX is materially different from a keyword. Tokens drop straight into Figma variables, Tailwind config, or CSS custom properties. Theme switching becomes a single variable swap rather than a search-replace across stylesheets.
a11y-readyCross-tool
Translate hex from Figma/Sketch into descriptive labels. Gamut-aware: tools warn before you ship a P3 colour that clips on sRGB displays. Choose the appropriate fallback strategy (relative colorimetric vs perceptual) per CSS Color 4 spec.
design-tokenFrequently asked questions
Something missing?
Tell us what you need. We ship the top requests every two weeks.