Color Picker
Pick a colour and get it in HEX, RGB, HSL, HSV, CMYK and OKLCH at once, with WCAG contrast against white and black and generated tints, shades and harmonies.
Last reviewed by the Radiatus Cloud team
Need this done properly for your business?
Radiatus delivers secure cloud, DevOps & compliance engineering.
One colour, every notation you are likely to need
A colour picker is only useful if it speaks the format your tool expects. CSS wants HEX or HSL, a design tool wants RGB, a printer wants CMYK, and modern CSS increasingly wants OKLCH. This picker converts in both directions between all of them from a single source value, so you never have to chain two converters and hope nothing rounded badly in the middle. The sliders and the text field stay in sync, and every output is one click to copy.
Contrast is part of choosing a colour, not a later check
Most accessibility failures happen because contrast was checked after the palette was fixed. Each colour here reports its WCAG 2.1 contrast ratio against both white and black, with the AA and AAA verdicts for normal and large text, so you can see immediately whether a colour can carry text at all and which direction it needs to move. The ratio comes from relative luminance, which weights green far more heavily than blue, which is why two colours that look equally dark can behave very differently behind text.
OKLCH is worth understanding
HSL lightness is a poor guide to how light a colour actually looks: fully saturated yellow and fully saturated blue both report fifty per cent lightness while looking nothing alike. OKLCH is built on a perceptual model, so its lightness number matches what the eye reports, which makes it far better for generating tints and shades that step evenly. Both are shown side by side here so the difference is visible on your own colour rather than in the abstract.
Related tools
- Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
- Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
- Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
- Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.
Frequently Asked Questions
Which colour format should I use in CSS?
HEX and RGB are universally supported. HSL is easier to adjust by hand. OKLCH is supported in all current browsers and is the best choice for generating evenly stepped tints and shades, because its lightness matches perception.
What contrast ratio do I need?
WCAG AA needs 4.5:1 for normal text and 3:1 for large text, which is 18.66px bold or 24px regular and above. AAA needs 7:1 and 4.5:1 respectively. This tool reports all four verdicts against both white and black.
Why does HSL lightness not match how light a colour looks?
Because HSL is a simple geometric transform of RGB and ignores how the eye responds. Saturated yellow and saturated blue are both 50% lightness in HSL despite looking very different. OKLCH lightness is built on a perceptual model and does match.
Can I pick a colour from my screen?
If your browser supports the EyeDropper API, the pick-from-screen button is enabled and lets you sample any pixel. It is available in Chromium-based browsers; where it is missing the button explains that rather than failing silently.
How are tints and shades generated?
Tints mix towards white and shades towards black, stepped in OKLCH lightness so the steps look even. Stepping in HSL instead produces bunched-up steps in the middle of the range, which is the usual cause of a palette that looks uneven.
Privacy & Security
Everything runs in your browser; nothing is uploaded.
How to Use
Enter a colour or move the sliders.
Disclaimer: This tool is provided "as is" without warranty of any kind. Results are for educational and utility purposes.
Related Tools
Color Converter
DesignConvert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
Accessibility Color Contrast Checker
DesignCheck foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
Typography Scale Generator
DesignGenerate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.