Color Picker
Pick a color and copy its HEX, RGB, HSL or HSV value in one click.
HEX
White text on this color
Black text on this color
Contrast ratio with WCAG result for normal-size text: AA needs 4.5:1, AAA needs 7:1.
Your input is processed in your browser and is not uploaded.
How to use it
- Click the swatch to pick a color, or type a HEX, RGB or HSL value.
- Copy whichever format you need.
- Check the contrast rows to see whether white or black text reads better on it.
Example
Input: #1E90FF
Result: rgb(30, 144, 255), hsl(210, 100%, 56%), hsv(210, 88%, 100%).
How it works
All conversions use the standard sRGB formulas. HSL and HSV values are rounded to whole numbers, so converting back can be off by one in a channel.
Contrast uses the WCAG 2 ratio of relative luminance. 4.5:1 meets AA for normal text and 7:1 meets AAA.
Assumptions
- Colors are in sRGB. HSL and HSV are rounded to whole numbers.
- Contrast uses the WCAG 2 relative-luminance formula for normal-size text (AA 4.5:1, AAA 7:1).
Questions
Can I type a short HEX like #f80?
Yes. Three-digit HEX values are expanded, so #f80 becomes #FF8800.
Does the browser color picker match my screen exactly?
The values are exact; how a color looks depends on your display and its color profile.