Color Picker

Write a colour once, in whatever notation you have, and read it back in all of them.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

Color Picker parses what you type as a CSS colour and then writes that same colour out in every notation it knows. Hex of 3, 4, 6 or 8 digits goes in, as do the 148 CSS colour keywords, transparent, and rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch() and color(srgb …) in both the legacy comma syntax and the modern space-separated one. A single colour comes back as thirteen conversions: hex with and without its alpha byte, three flavours of rgb(), HSL, HSV/HSB, HWB, CMYK, CIE Lab and LCH at the D50 white point CSS Color 4 specifies, and OKLab and OKLCH.

Five further rows are derived rather than converted, and they are usually the reason to open the page. Nearest CSS name compares your colour against all 148 keywords by CIE ΔE*ab and names the closest, appending the distance when the match is not tight. Relative luminance and the contrast ratios against white and against black are the WCAG 2 numbers, which answer whether the shade can carry text before you take it into a design. The final row emits a custom property — set the name in the settings and it arrives as --brand: #3B82F6; ready to paste. Uppercase hex is on by default and can be switched off.

Give it more than one line and it changes shape. Instead of the long breakdown you get a grid of swatches, one tile per colour, captioned with the hex and the text you typed, and beneath it a table with a row per colour carrying the input, HEX, RGB, HSL, OKLCH and the nearest CSS colour name; Copy output returns HEX, RGB, HSL and OKLCH for each line. That mode is deliberately narrower — the full thirteen-notation listing and the contrast figures appear only when you submit a single colour — and it stops at 24 colours in a run, refusing a longer paste with the count it found rather than quietly cutting it short.

There is no colour wheel on this page and no eyedropper. The input is a plain text box, so if what you wanted was a hex picker with a draggable saturation square, or a way to lift a shade off something already on screen, this is the wrong tool; Image Color Picker reads a colour out of an image file instead. Everything is handled as sRGB with no colour management, so a lab() or oklch() value outside the sRGB gamut is clipped to the nearest sRGB colour rather than gamut-mapped; with one colour a line under the listing says so, but in the multi-colour grid that clipping passes without a word. CMYK uses the plain device-independent formula with no ICC profile and no ink model, making it a rough indication and not a press-ready separation, and the cmyk() and hsv() rows are written for reading — neither is a real CSS function. The arithmetic runs in this browser tab, so nothing is uploaded and the page still works with the network off.

How to use it

  1. Type or paste a colour. Any notation the parser accepts, with or without the leading hash. Press Load sample for #3B82F6 if you want to see the shape of the output first.
  2. Decide how hex should be cased. Uppercase hex is on by default. Turn it off when your codebase writes #3b82f6 and a diff would otherwise light up over letter case alone.
  3. Name the custom property. The last row is written as a CSS variable using this name. Anything outside letters, digits, hyphen and underscore is replaced, and an empty name falls back to brand.
  4. Read the table, or copy the text. Each row is a label and a value. The plain-text output is the same list aligned in two columns, and a swatch above shows what you actually typed.
  5. Add more lines to compare. A second colour switches the output to the swatch grid, with a six-column table under it and the four main notations waiting behind Copy output. Blank lines are skipped, as are lines starting with // or a hash and a space, so a palette can carry headings.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Migrating tokens from hex to OKLCH

Modern design systems increasingly hold colour in OKLCH so lightness edits behave. Paste the old hex list and the copied output hands back each line with its OKLCH equivalent.

Deciding whether a brand colour takes white text

The contrast rows against white and black are on screen next to the value, which settles the question without opening a separate checker.

Reading a stylesheet somebody else wrote

A file full of lab() and hwb() values is hard to picture. Converting each one to hex and a colour name makes the palette legible again.

Naming a shade in a handover note

Nearest CSS name gives a word for the colour, and the ΔE beside it tells you honestly how loose that word is.

Sanity-checking a value before committing

The parser is looser than CSS itself — it takes hex without the hash, and commas inside lab() — so getting a result here is no proof a browser will accept the same string. A value that comes back clipped, though, is a genuine warning that what you typed sits outside sRGB.

Questions

Does the colour I type get sent anywhere?
No. Parsing and every conversion happen in this browser tab, so nothing is transmitted or stored, and the tool carries on working with the connection dropped.
Can I pick a colour off my screen or drag around a colour wheel?
No. This tool reads typed input only — there is no wheel, no saturation square and no screen eyedropper. To take a colour out of an image, use Image Color Picker, which samples a point in a file you choose.
Why does it show hsv() and cmyk() when CSS has neither?
Because both are useful to read. HSV/HSB is the model most image editors present, and CMYK is what a printer will ask for. They are written in function form for consistency with the other rows, but pasting either into a stylesheet will not work.
What does it mean when a colour is reported as clipped?
The lab(), lch(), oklab() or oklch() value you gave describes a colour that sRGB cannot reproduce. Each channel is clamped into range, which usually returns something less saturated than you asked for. It is clipping, not gamut mapping, so the hue can shift as well.
Is the CMYK figure safe to send to a printer?
Treat it as an approximation. It comes from the standard formula with no ICC profile and no ink model behind it, so paper, press and profile will all move the result. For production work take the conversion from the profile your printer supplies.
How many colours can I convert at once?
Up to 24 per run. One colour gives the full thirteen-notation breakdown plus the derived rows; two or more give the swatch grid with a table of input, HEX, RGB, HSL, OKLCH and nearest name beneath it, and the four main notations in the copied text. Past that ceiling the run is refused outright rather than truncated, and the message names how many lines it found.
Why is currentColor rejected?
It has no fixed value — it resolves to whatever the surrounding element's colour happens to be, so there is nothing to convert. The keyword inherit is refused for the same reason. transparent is accepted, and reads as #00000000.
How close is the nearest colour name?
It is the smallest CIE ΔE*ab distance across the 148 keywords, so there is always an answer even for a colour nothing resembles. When the distance is large enough to matter, the number is shown next to the name so you can judge it.

Related tools