Why OKLab instead of RGB distance?

Pure RGB distance gives misleading rankings — a 10% brightness change in dark colors counts the same as in bright colors, but our eyes are much more sensitive to mid-tones. OKLab (released by Björn Ottosson in 2020) is calibrated for perceptual uniformity, so 'closest' really means 'looks most similar'.

What's the XKCD color survey?

In 2010, Randall Munroe ran a survey asking 222,500 people to name 5 random colors each. The most-agreed-upon names became a useful palette — sometimes used in data visualization libraries like matplotlib. Includes folksy names like 'puke green' and 'baby poop brown' (not in our top-60 subset).

Beyond rank 8, distances grow large enough that 'closest' becomes meaningless. If you need a full sorted list, the algorithm is just OKLab Euclidean distance — easy to reproduce.

Color Name Finder

Given any color (hex, RGB, or color picker), find the top 8 closest named colors from three databases: CSS 4 named colors (148 entries, what you can write directly in CSS like `cornflowerblue`), the default Tailwind v3 palette (110+ entries from `slate-50` to `rose-700`), and the XKCD color survey (the most common color names from a famous 222k-respondent study). Distance is measured in OKLab — a perceptually uniform color space — so the rankings actually match how a human eye sees similarity, unlike RGB Euclidean distance which over-weights luminance changes.

—

Color

Name source

Closest matches

dodgerblue
#1e90ff · ΔE 0.0363
royalblue
#4169e1 · ΔE 0.0668
cornflowerblue
#6495ed · ΔE 0.0697
mediumslateblue
#7b68ee · ΔE 0.0871
steelblue
#4682b4 · ΔE 0.1011
mediumpurple
#9370db · ΔE 0.1131
slateblue
#6a5acd · ΔE 0.1140
lightslategray
#778899 · ΔE 0.1564

Distance is OKLab Euclidean — perceptually uniform. Smaller is closer.

How to use

Enter a hex (`#3b82f6`, `3b82f6`, `#36e`), `rgb(59, 130, 246)`, or use the color picker.
Switch between CSS, Tailwind, and XKCD databases.
Copy a name to use directly in your CSS or Tailwind config.

Frequently asked questions

Why OKLab instead of RGB distance?: Pure RGB distance gives misleading rankings — a 10% brightness change in dark colors counts the same as in bright colors, but our eyes are much more sensitive to mid-tones. OKLab (released by Björn Ottosson in 2020) is calibrated for perceptual uniformity, so 'closest' really means 'looks most similar'.
What's the XKCD color survey?: In 2010, Randall Munroe ran a survey asking 222,500 people to name 5 random colors each. The most-agreed-upon names became a useful palette — sometimes used in data visualization libraries like matplotlib. Includes folksy names like 'puke green' and 'baby poop brown' (not in our top-60 subset).
Why only 8 results?: Beyond rank 8, distances grow large enough that 'closest' becomes meaningless. If you need a full sorted list, the algorithm is just OKLab Euclidean distance — easy to reproduce.

Related tools

Color Token Exporter

Define a color palette once, export to CSS custom properties, Tailwind config, SCSS, LESS, design-token JSON, SwiftUI Color, or Android `colors.xml`. Live preview swatches.

Color 0 0

Tailwind Color Palette

The full Tailwind CSS default palette — 22 hues × 11 shades, 50 through 950 — with click-to-copy as Tailwind class, HEX, or rgb().

Color 0 0

OKLCH Color Picker

Pick colours in the perceptually uniform OKLCH space (lightness · chroma · hue) — and see whether each pick fits inside the sRGB display gamut.

Color 0 0

CSS Gradient Generator

Build linear or radial CSS gradients with multi-stop colors and copy the code.

Color 0 0

CSS Named Colors

All 147 CSS / X11 named colors with HEX, RGB, and a live swatch — searchable and grouped by hue.

Color 0 0

Color Lerp / Gradient Steps

Pick two hex colors, get N discrete intermediate steps — in sRGB, linear RGB, OKLab or HSL — with optional easing.

Color 0 0