Type a hex value or pick one below.
Dragging a slider changes the colour. The hue ring is the same colour wheel every design tool uses: 0° is red, 120° green, 240° blue.
-
HEX
— -
HEX8
— -
RGB
— -
RGBA
— -
HSL
— -
HSV
— -
CMYK
—
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Pick a colour and take away the code. The sliders cover both ways of thinking about it — HSL for hue, saturation and lightness, RGB for the three channels as the screen draws them — and the hex field accepts a value you already have.
Every panel reads from one colour, so the hex field, the sliders, the swatch and the five output formats can never disagree with each other.
How to use this tool
- Drag the hue, saturation and lightness sliders, or the red, green and blue ones.
- Or type a hex value straight into the field, or paste one in from a design file.
- Add transparency with the alpha slider; the swatch shows it over a checkerboard.
- Copy the format you need — HEX, RGB, HSL, HSV or CMYK.
Why there are two sets of sliders
HSL and RGB describe the same colour in different terms, and each is easier for a different job. Hue, saturation and lightness make it obvious how to keep a hue and change how light it is. Red, green and blue match what a screen actually emits, and match the channel values in a hardware spec or an image editor.
Changing one set updates the other, because neither is stored. There is one colour, and both controls are views of it.
Reading the hue slider
Hue is an angle on the colour wheel: 0° is red, 60° yellow, 120° green, 180° cyan, 240° blue and 300° magenta, wrapping back to red at 360°. Saturation is how far from grey the colour is, and lightness is how close it is to black or white.
What the checkerboard means
The grey-and-white squares are not part of the colour — they are the page showing through, the same convention every image editor uses. A colour at 50% alpha over a checkerboard is half transparent paint, not a grey.
Frequently asked questions
What is the difference between HSL and HSV?
Both describe hue, but HSL measures lightness — how close to white or black — while HSV measures value and saturation, which is what most colour wheels show. A colour pure in HSV (100% saturation, 100% value) is fully saturated, whereas in HSL the same colour sits at 50% lightness.
Why does the hex value change while I drag a slider?
The sliders set the colour and the hex value is printed from it, so it moves as you pick. Nothing is rounded on the way in, only when it is displayed.
Can I paste a colour I already have?
Yes. The field accepts #RGB, #RRGGBB, 8-digit hex with alpha, rgb(), rgba(), hsl() and hsla().
Does the picker work offline?
Once the page has loaded, yes. There are no network requests after that, which is why no colour is ever uploaded.