Colour Picker
Pick a colour and read it as HEX, RGB, HSL and OKLCH, with live WCAG contrast checks against white and black.
Runs in your browser — nothing is uploadedFree trial: 1 run of Colour Picker every day. After that, 2 credits per run.
Pick a colour and read it in HEX, RGB, HSL and OKLCH
Choose a colour from the swatch, type a hex value, or drive it with hue, saturation and lightness sliders. Every format updates together and each is copyable. Contrast against both white and black is calculated to WCAG 2.2, with the pass or fail shown for normal and large text so an accessibility decision is made on evidence.
What Colour Picker gives you
Four output formats at once
HEX, RGB, HSL and OKLCH, each with its own copy button. No converting by hand between tools.
HSL sliders
Adjust hue, saturation and lightness directly, which is far easier than editing hex digits to find a tint or shade.
WCAG 2.2 contrast, both ways
Ratios against white and black, with AA and AAA results for normal and large text.
Live preview
Sample text is shown on both backgrounds, so you can see what the ratio actually looks like.
Colour maths stays in the page
Every conversion is arithmetic performed in the page; changing a colour contacts nothing.
How to use Colour Picker
Choose a colour
Use the swatch, paste a hex value, or move the sliders.
Adjust with HSL
Nudge lightness or saturation to find the exact tone you want.
Check the contrast
Read the ratios against white and black and the AA and AAA results.
Copy the format you need
HEX for CSS, RGB or HSL for readability, OKLCH for modern work.
Other names for this tool
People also look for this as hex colour picker, RGB to HEX converter, HSL colour tool, contrast checker and colour code finder. It is the same tool on this page.
Limitations
- Colours are entered as hex or chosen from the swatch; there is no screen eyedropper.
Questions about Colour Picker
What do the contrast numbers mean?
They are WCAG 2.2 ratios. Normal text needs 4.5:1, large text and user interface borders need 3:1.
Does this cost credits?
The first colour you copy each day is free. After that, copying a new colour costs 2 credits. Changing a colour is arithmetic in the page and makes no network request at all.
How do I check if my colour passes WCAG contrast?
The ratio against both white and black is calculated as you pick, with the AA and AAA result shown for normal and large text. Do this before a colour reaches your stylesheet, not after a page fails an audit.
What contrast ratio do I actually need?
4.5:1 for normal body text at AA and 7:1 at AAA. Large text needs only 3:1 for AA, so a colour that fails for paragraphs may still be fine for headings — which is why both are shown separately.
How do I convert a HEX colour to RGB or HSL?
Paste the hex value and every other format updates with it. HEX, RGB, HSL and OKLCH each have a copy button, so there is no converting by hand between a style guide, a design tool and a CSS file.
What is OKLCH and why would I use it?
It is a perceptually uniform colour space, meaning equal numeric steps look like equal visual steps. That makes it far better than HSL for generating evenly spaced tints and shades, because HSL lightness does not match how the eye reads brightness.
Why is nothing happening when I paste a colour?
The hex field accepts three or six digits with or without the hash, and silently ignores anything that is not a valid colour rather than guessing at what you meant. Check for a stray character or a missing digit.
Can I pick a colour from my screen?
No, there is no eyedropper. Colours are chosen from the swatch, typed as hex, or built with the hue, saturation and lightness sliders. Nothing is stored between visits either.