How to use the Color Picker
- Drag in the big square to choose saturation and brightness, and use the rainbow bar to change the hue.
- Or type a value into any field, including color names like
tomato. All the other formats update. - Use Pick from screen (Chrome and Edge) to grab any color on your display, or drop an image below and click on it.
- Click Copy next to a format, or click any swatch to select it and copy its HEX code.
Color formats explained
| HEX | #D9480F: the web's favorite. Two hex digits each for red, green and blue. |
|---|---|
| RGB | rgb(217, 72, 15): red, green and blue light from 0 to 255. Used on screens. |
| HSL | hsl(17, 87%, 45%): hue (0–360° around the color wheel), saturation and lightness. Easy to tweak by hand in CSS. |
| HSV / HSB | Hue, saturation and value (brightness). The model used by Photoshop and Figma color pickers, and by the square above. |
| CMYK | Cyan, magenta, yellow and black ink percentages for printing. Screen colors can't always be printed exactly, so treat this as a starting point and check with your printer. |
Readable text: contrast ratios
The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text (AA) and 3:1 for large text. 7:1 earns the stricter AAA level. The contrast panel shows whether white or black text works best on your color.
Color harmonies
Complementary colors sit opposite each other on the color wheel and give strong contrast. Analogous colors sit side by side and feel calm. Triadic and tetradic schemes space colors evenly for a vibrant, balanced palette.
Frequently asked questions
How do I pick a color from my screen?
Click <b>Pick from screen</b>, then click anywhere on your screen. This works in Chrome, Edge and Opera on desktop. In other browsers, take a screenshot and drop it in the image box.
How do I get the color code from a photo?
Drop or paste the image into <b>Pick a color from an image</b>, then click the spot you want. The image never leaves your device.
What's the difference between HSL and HSV?
Both use hue and saturation. HSL's lightness goes from black through the pure color to white, while HSV's value goes from black to the pure color. 100% lightness is always white; 100% value is the brightest version of the color.
Is the CMYK value exact?
It's a mathematical conversion without a color profile. For professional printing, use your printer's ICC profile in a design app.