Color name find — match HEX / RGB to a CSS or Tailwind name
Type a HEX value (`#3b82f6`) or a CSS color name (`tomato`) to find the closest matches across CSS named colors (148) and the Tailwind palette (22 hues × 11 shades). Results are sorted by RGB distance with a swatch, name, HEX, and distance score. Perfect for naming design tokens, communicating colors verbally, or finding the nearest Tailwind class. Everything runs in your browser.
How to use
Type a HEX value (`#3b82f6`, `3b82f6`, `#abc`) or a CSS color name (`tomato`, `steelblue`, etc.). Pick the palette: All / CSS only / Tailwind only. The table lists the nearest colors by RGB distance. Click a name or HEX to copy. Tailwind names are displayed as `family-shade` (e.g. `red-500`) so you can use them directly as utility class names.
FAQ
- What does the distance score mean?
- Euclidean distance in RGB space. 0 = exact match, ~441 = max (black ↔ white). Below 100 is the same family; below 50 is practically identical. It's RGB-only, so it doesn't fully match perceptual difference.
- Which CSS color names work as input?
- All 148 CSS Color Module Level 4 named colors (`tomato`, `rebeccapurple`, `darkslategray`, etc.). Case-insensitive.
- Which Tailwind palette is built in?
- Tailwind CSS v4 default palette (22 families × 11 shades = 242 colors). Custom themes and shadcn's OKLCH-based tokens are not included.
- Can the distance metric be more accurate?
- Currently RGB distance only. A CIE ΔE (Lab) implementation is on the list. For design naming, RGB usually returns sensible suggestions anyway.
- Is anything uploaded?
- No. Color data is bundled and the lookup runs entirely in your browser.
Related tools
Color converter — HEX / RGB / HSL / HSV
Convert colors between HEX, RGB, HSL, and HSV in real time with a built-in color picker. Edit any field and the other three update instantly. Runs entirely in your browser — your color values never leave the page.
Contrast ratio checker — WCAG AA / AAA
Pick a foreground (text) and background color to compute the WCAG 2.x contrast ratio and instantly see whether it passes AA / AAA for normal text, large text, and UI components. Accepts HEX and rgb(), with a color picker and live preview. Everything runs in your browser — your colors never leave the page.
CSS Formatter — pretty / minify CSS in one click
Format CSS with two modes: pretty (indent 2/4/tabs, line breaks, one declaration per line) and minify (strip whitespace and line breaks). Built on css-tree (MIT) which parses any CSS into an AST and re-serializes it. Preserves @media / @supports / @keyframes / @font-face / @import at-rules, calc() / var() / custom properties (--var), vendor prefixes, and shorthands. Comments (`/* ... */`) are dropped by the css-tree parser. CSS-in-JS placeholders (`${expr}`) cannot be parsed — pass plain CSS only.
Image Color Palette Extractor
Drop an image to extract its dominant colors via median-cut quantization, with each color's HEX / RGB value and share. Choose how many colors (4–16) and see the balance in a proportional bar. Click a color to copy its HEX, or copy the whole palette as a HEX list, CSS variables, or JSON. Images are analyzed entirely in your browser and never uploaded.