← Zaps Colors
Design Tool

Color Picker

Drag to pick a color, or type a code. Copy it as HEX, RGB, HSL, HSV or CMYK.

#FF922E
Tints
Shades
Complementary
Analogous
Triadic

What this color picker does

Pick a color and get its code in five formats at once: HEX, RGB, HSL, HSV and CMYK. Every field is editable, so you can paste a code in one format and read it in the other four. Under the picker you get five tints, five shades and three sets of harmony colors for the color you picked.

How to use it

  1. Drag inside the large square to set saturation and brightness, and move the slider under it to change the hue.
  2. Or type a code into any field. #3b82f6, rgb(59, 130, 246) and hsl(217, 91%, 60%) all work.
  3. In Chrome, Edge or Opera on a computer, press the eyedropper button next to the hue slider and click anywhere on your screen to sample that pixel.
  4. Click Copy next to a format to put that code on your clipboard.
  5. Click a tint, shade or harmony swatch to make it the current color.

How the picker maps to HEX and RGB

The square and slider use the HSV model. The slider sets hue, an angle from 0° to 360° around the color wheel. Moving right in the square adds saturation, and moving up adds brightness, which HSV calls value. The top right corner is always the most intense version of the hue.

The default color, Zaps orange, shows how the five formats line up:

HEX   #FF922E
RGB   rgb(255, 146, 46)
HSL   hsl(29, 100%, 59%)
HSV   hsv(29, 82%, 100%)
CMYK  cmyk(0%, 43%, 82%, 0%)

HEX and RGB hold the same three numbers. In base 16, FF is 255, 92 is 146 and 2E is 46. The HEX to RGB converter shows that math step by step. CMYK comes from a simple formula, so confirm print colors with your printer.

When you have a color, test text on it with the contrast checker or build a full scale with the tint and shade generator. To go further, blend it with a second color in the color mixer, or build a set around it on the color wheel and in the palette generator.

Color picker FAQ

How do I find the hex code of a color on my screen?

Press the eyedropper button next to the hue slider. It opens your browser's screen sampler, and when you click a pixel the picker loads that color with its HEX, RGB, HSL, HSV and CMYK codes. The button shows up in Chrome, Edge and Opera on desktop. Firefox and Safari don't support the EyeDropper API.

What is the difference between HEX, RGB and HSL?

They are three ways to write the same screen color. HEX writes red, green and blue as base 16 pairs, like #FF922E. RGB writes those values as numbers from 0 to 255. HSL uses hue, saturation and lightness, which is easier to adjust by hand. CSS accepts all three.

What is the difference between HSL and HSV?

Both use the same hue angle but handle brightness differently. In HSL, 50% lightness is the pure color and 100% is always white. In HSV, 100% value is the brightest version of the color, and you reach white only by dropping saturation to zero. Figma and Photoshop use HSV, which they call HSB.

Can I use these CMYK values for print?

Treat them as a rough guide. The picker converts from RGB with the standard formula, which ignores paper, ink and printer profiles. Print shops convert through an ICC color profile, so their numbers will differ. Ask your printer which profile they use and convert in your design software before sending files.

How do I get lighter and darker versions of a color?

Look at the Tints and Shades rows under the picker. Tints mix the current color with white in five even steps, and shades mix it with black. Click any swatch to select it and copy its code. For a full 50 to 900 scale with CSS variables, use the tint and shade generator.