What is a color picker?

A color picker lets you choose a color by eye instead of typing numbers. Most design apps lay it out the same way: a hue slider picks the base color from the rainbow, and a square beside it sets how much of that hue there is (saturation, left to right) and how bright it is (top to bottom). This layout is the HSV color model, and every color a screen can show has a spot in it.

Tool description

Drag across the square and the hue slider to find a color, or type or paste one you already have in HEX, RGB, HSL, or another format. In Chrome and Edge, the eyedropper button picks a color from anywhere on your screen, even outside the browser. Set the opacity for see-through colors, and copy the result in the format you need: HEX for CSS and most design tools, RGB and HSL for CSS, HSV for design apps, OKLCH for modern CSS, and CMYK as a starting point for print.

Features

  • Saturation and brightness square with a hue slider, by mouse, touch, or keyboard
  • Screen eyedropper in Chrome and Edge
  • Type or paste a color in HEX, RGB, HSL, HWB, CMYK, and other formats
  • Opacity, shown on a transparency grid
  • HEX, RGB, HSL, HSV, OKLCH, and CMYK values, each ready to copy
  • More formats, such as HWB, LAB, LCH, and XYZ, from the picked color's format list
  • Runs in your browser

How it works

The tool keeps the color as hue, saturation, and value, so the hue stays where you left it when you drag to white, black, or grey. The other formats are calculated from it: HEX and RGB are rounded to whole numbers from 0 to 255, HSL and HSV to whole degrees and percents, and OKLCH is converted through the sRGB color space. When the opacity is below 100%, HEX gets a fourth pair of digits and the CSS formats get an alpha value. CMYK has no alpha, and it's a simple conversion without a printer profile.

Tips

  • A pasted color's own opacity, as in rgba(), isn't kept: set it with the Opacity field.
  • Click the square or the slider and use the arrow keys to move by 1%, or by 10% with Shift.
  • For colors in a photo or a screenshot file, use the Image Color Picker, which reads the image itself.
  • Ask your print shop for the CMYK values to use, as the same color can print differently on different presses and papers.