Color picker
Find the exact code for any color, in every format.
Contrast check
- AA
- AA large
- AAA
- AA
- AA large
- AAA
Runs in your browser. Nothing you type is sent anywhere.
- 5 color formats
- WCAG contrast check
- Opacity support
How to pick a color
- Drag in the square to set saturation and brightness, then move the hue slider.
- Or type a code in any format: HEX, RGB, HSL, HSV or CMYK.
- Copy the code you need and check its contrast below.
Color formats compared
Every row below describes the same orange. Only the notation changes.
| Format | Example | Used in |
|---|---|---|
| HEX | #f08a3c | CSS, HTML, design tools |
| RGB | rgb(240, 138, 60) | CSS, image editors |
| HSL | hsl(24, 84%, 59%) | CSS, easiest to adjust by eye |
| HSV/HSB | hsv(24, 75%, 94%) | Paint and design app pickers |
| CMYK | cmyk(0%, 43%, 75%, 6%) | Print design and ink mixing |
Use HEX or RGB for the web, HSL when you want to nudge a color's brightness or saturation without changing its hue, and CMYK as a starting point for print.
WCAG contrast levels
The contrast check below compares your color against solid white and solid black and grades both against the WCAG 2 levels.
| Level | Normal text | Large text |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
Large text means about 24 px, or 19 px bold. Most sites only need to pass AA. AAA is a stricter bar mostly used on government and accessibility-focused sites.
Tips for picking accessible colors
- Keep the hue fixed and lower lightness in HSL to get a darker shade of the same color for hover and active states.
- A color that passes AA on white can fail on a tinted background, so check contrast against the page's real background, not just white or black.
- The eyedropper only works in Chrome and Edge on a computer. Firefox and Safari have not added the EyeDropper API yet.
- Get a print shop proof before trusting a CMYK value for a full print run. The same numbers can look different on coated and uncoated paper.
Color picker FAQ
How do I get the color code of something on my screen?
In Chrome and Edge on a computer, click Pick from screen, then click anywhere on your screen. Other browsers do not offer this yet, so take a screenshot and open it in an image color picker.
What is the difference between HEX, RGB and HSL?
They describe the same color in different ways. HEX and RGB give the amounts of red, green and blue (HEX writes them in base 16), while HSL gives hue, saturation and lightness, which is easier to adjust by hand.
What contrast ratio does readable text need?
WCAG level AA asks for at least 4.5:1 for normal text and 3:1 for large text, meaning about 24 px, or 19 px bold. Level AAA raises normal text to 7:1.
Are the CMYK values exact?
They are a direct math conversion from RGB. Real print colors depend on the inks, paper and printer profile, so use them as a starting point and check a print proof.
What does the opacity slider change?
It sets transparency from 0 (invisible) to 100 (solid). Below 100, the HEX code gets two extra digits and RGB becomes rgba(). Contrast is checked for the color as it looks on each background.
What is HSV useful for that RGB is not?
HSV separates a color's hue from how bright and saturated it looks, which is why paint pickers and photo editors give you one slider for hue and another for brightness instead of mixing red, green and blue by eye.
Can I get a Pantone color from here?
No. Pantone is a licensed spot-color system tied to specific inks, not a plain math conversion from RGB or CMYK. Use the CMYK value as a starting point and confirm the exact match with your print shop.