Colour
Colour picker and converter
Move the wheel or type into any field: the rest update themselves. HEX, RGB, HSL, HSV, CMYK and the nearest CSS name, each with its own copy button. And if the colour lives in a photo, drag it in and grab it with the loupe.
Your images and your colours never leave this page.
Why it matters that this is not uploaded
Two of these four tools work with images, and what gets dragged in here is hardly ever just any photo: it is a client's logo before launch, a screenshot of an internal dashboard, or an unpublished product shot. Sending that to a stranger's server to pull a colour out of it is a bad trade, and an unnecessary one: reading an image's pixels needs no server — the browser does it with the canvas it already ships with. Here there is nowhere to send it.
What people use it for
- Taking a colour from design into codeThe designer sends an HSL and the CSS wants a HEX. Paste in one field, read the other.
- Grabbing a colour from a screenshotThe exact blue of a button you can see in an image, with nothing to install.
- Lightening or darkening deliberatelyIn HSL you move the L and the hue stays put. In HEX that is guesswork.
- Preparing something for printSeeing the approximate CMYK before sending, knowing the printer will adjust.
-
Finding a colour's nameLearning that your green is nearly a
seagreen, and being able to write it that way. -
Working out what an odd colour isPasting the
rgb(…)from an old file and seeing what colour it actually is.
What each format is, and when to use it
They are the same thing written different ways, and each was invented for a job:
HEX is what you write in CSS: six hexadecimal digits, two per red, green and blue channel. #0f62fe is 15 red, 98 green, 254 blue. It is nothing but RGB written in base 16, so converting HEX to RGB loses nothing: it is the same information in another notation.
RGB is those same three numbers in base 10, from 0 to 255. It is how a screen thinks: three lights adding up.
HSL is how people think: which colour (hue), how much colour (saturation) and how much light. It is the working format: to lighten a button on hover you raise the L and you are done, whereas in HEX you would be recalculating all three channels by hand.
HSV looks like HSL but its third number is value, not lightness. The practical difference: in HSL, pushing L to the top gives white; in HSV, pushing V to the top gives the pure, saturated colour. It is what nearly every drawing program uses.
CMYK is for printing: cyan, magenta, yellow and black. Here it is the direct conversion with no colour profile, and it is best treated as a reference. A print shop works with profiles that depend on paper and ink, and that same #0f62fe will come out differently on gloss than on recycled stock.
The nearest CSS name
CSS ships 148 named colours — crimson, rebeccapurple, tomato — and the tool tells you which one is closest to yours. The comparison is not made in RGB, which would be the easy way, but in a space where "close" means "looks similar". In RGB you get suggestions that look nothing alike, because two colours with nearby numbers can look completely different.
The eyedropper
Drag an image in and hover over it: the loupe magnifies the area nine times with the exact pixel marked in the middle, and clicking keeps that colour in every field. It is what you need when the colour you are after is in a screenshot, in the logo a client sent you as a JPG, or in a photo whose palette you like.
The image is not uploaded. It is read with the browser's canvas and stays there.
The six formats, at a glance
| Format | Example | What its numbers are | What it is for |
|---|---|---|---|
| HEX | #0f62fe | Red, green and blue in base 16, two digits each | Writing colour in CSS and in nearly every design tool. |
| RGB | rgb(15, 98, 254) | The same three channels, 0 to 255 | The same as HEX, but readable, and with transparency via rgba. |
| HSL | hsl(219, 99%, 53%) | Hue in degrees, saturation and lightness as percentages | Working: lighten, darken or desaturate without recalculating anything. |
| HSV | hsv(219, 94%, 100%) | Hue, saturation and value | Drawing programs: closer to mixing paint. |
| CMYK | cmyk(94%, 61%, 0%, 0%) | Cyan, magenta, yellow and black, as ink percentages | Print, as a reference: the final value depends on the profile. |
| CSS name | royalblue | One of the 148 names CSS ships with | Prototypes and examples, where a name reads better than a number. |
Frequently asked questions
Does converting HEX to RGB lose quality?
None at all. They are the same information written two ways: HEX is RGB in base 16. #0f62fe and rgb(15, 98, 254) are exactly the same colour, with no approximation in between.
The same goes for HSL and HSV: the conversion round-trips exactly. It is verified across thousands of colours: taking a HEX to HSL and back always returns the same HEX.
Why does the CMYK not match my design program?
Because CMYK depends on the colour profile, and there is none here. A design program converts using the printer's profile, which knows how that ink behaves on that paper; the direct conversion done here cannot know any of that.
It works as a reference and to get a feel for it, not as the final value you send to print. For that, the profile comes from the printer.
What is the difference between HSL and HSV?
The third number. In HSL, L runs from black (0) to white (100) with the pure colour halfway. In HSV, V runs from black (0) to the pure colour (100), and to reach white you also have to drop the saturation.
In practice: HSL is more convenient for making light and dark variants of one colour, which is what websites need. HSV is what drawing programs use, because it is closer to mixing paint.
Can I type a colour name instead of a number?
Yes. Type crimson, rebeccapurple or any of CSS's 148 names into any field and the rest catch up. grey is accepted as well as gray.
And the other way round: the tool always tells you which name is closest to your colour, marking it as approximate when it is not exact.
Is the photo I pick a colour from uploaded?
No. The image is read with the browser's own canvas and never leaves the page: no accounts, no database, and no request that takes it anywhere.
It matters because what gets dragged in here is usually a client's logo or a screenshot of something internal. With the page loaded, disconnect from the internet and check.
The other colour tools
Palette generator
The 50 to 900 scale and the five classic combinations, ready to copy as CSS, Tailwind, JSON or an image.
Contrast checker
The contrast ratio, AA and AAA levels, and the closest colour that does pass when yours falls short.
Extract from an image
A photo's dominant colours with the percentage each covers. The image never leaves the browser.