Color Name Finder
Color
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.
- 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 Blindness Simulator
See how your image looks to people with each of 8 types of color vision deficiency (CVD).
CSS Box Shadow Generator
Visually design CSS box-shadows with multiple layers, live preview, and copy-ready CSS / Tailwind output.
Color Format Converter
Convert any color between HEX, RGB, HSL, HSV, OKLCH, and a CSS custom property.
CSS Gradient Generator
Build linear or radial CSS gradients with multi-stop colors and copy the code.
Color Palette Generator
Build harmonious color palettes from a base color in six schemes.
Color Contrast Checker
Check text/background contrast against WCAG AA and AAA levels.