Color Picker
Color Picker is a free browser tool that lets you pick colors and copy values. Colour values are converted and contrast is measured in the page using the same maths browsers use internally. It is used most by product teams checking a dark theme reads properly. Contrast is measured against the WCAG 2.1 relative-luminance formula. There is no account to create, no email to hand over and no cap on how often you use it.
Key features
- Contrast is measured against the WCAG 2.1 relative-luminance formula.
- Converts between HEX, RGB, HSL and HSV without drift.
- Works on desktop, tablet and phone — no separate app to install.
- Built to do one job properly rather than twenty jobs badly.
How to use Color Picker
- Set your colour: Pick with the swatch or paste a HEX, RGB or HSL value.
- Adjust and compare: Tune the value and watch the converted formats and contrast figures update.
- Copy what you need: Copy any format straight into your CSS or design file.
Frequently asked questions
- Which colour spaces does Color Picker support? — HEX, RGB, HSL and HSV in sRGB. Wide-gamut Display-P3 values are outside its range.
- Is anything saved? — No. Everything happens in the page and nothing is stored.
- What ratio do I actually need? — 4.5:1 for normal body text at AA, 3:1 for large text, and 7:1 for AAA.
- How is contrast calculated? — With the WCAG 2.1 relative-luminance formula — the same one accessibility auditors use.