Color Picker

How to use the color picker

1. Drag on the color field to set how vivid and how bright the color is, then slide the hue bar to change the color itself.
2. Or type a value into the input, or use the eyedropper to grab a color from anywhere on your screen.
3. Read your color in HEX, RGB, HSL and more, and copy any line with a single click.
4. Need one specific format? Open the HEX, RGB or HSL color picker.

What is a color picker?

A color picker is a tool for choosing a color visually and reading back its code. Instead of guessing at numbers, you drag on a spectrum, land on the exact shade you want, and copy it in whatever format you need, from HEX for the web to CMYK for print.

The two parts of the color picker

Every format the color picker gives you

Other ways to pick a color

• Use the eyedropper to sample any pixel on your screen, in supported browsers.
• Pull a color out of a photo or screenshot with the Image Color Picker.
• Start from one color and build a set with the Palette Generator or Shades Generator.
• Confirm a text and background pairing stays readable with the Contrast Checker.

What you can do with your color

Once you have a color you can drop it into a stylesheet, match a brand shade, build a palette around it, or convert it for print. The Color Converter turns it into any other format in one step.

Why a visual picker beats typing codes

Hand-typing color numbers is the slow way to work. Dragging on a spectrum and reading the code back is faster, harder to get wrong, and shows the shade before you commit. Type-in fields are best kept for pasting an exact value, not for choosing one.