Color Next

Color Picker

Pick any color and copy it as HEX, RGB, HSL or HSV.

Color Picker: the tool

Color picker

Pick

Drag in the square, or use the sliders and the fields below.

Your color

Color #3B82F6, dodgerblue.
  • HEX
  • RGB
  • HSL
  • HSV (HSB)
  • CMYK (approximate)
  • Nearest CSS name

Palette from your picks

Drag in the square to choose how vivid and how bright a color is, slide the hue to change which color it is, and copy the result in the format you need. The picker shows HEX, RGB, HSL, HSV and an approximate CMYK at the same time, names the nearest CSS color, and lets you collect your favorite picks into a palette you can export.

How it works

The picker works in HSV: hue, saturation and value. Hue is the position on the color wheel, an angle from 0 to 360 degrees. In the square, saturation grows from left to right, from grey to the full color, and brightness grows from bottom to top, from black to the brightest version. The strip above the sliders changes the hue, and the square recolors itself to match.

Every other format is calculated from the same color. RGB gives the red, green and blue amounts your screen mixes, from 0 to 255. HEX writes those three numbers in base sixteen. HSL describes the color by hue, saturation and lightness, the model CSS offers. CMYK is the simple screen-to-print formula, which is why it is marked approximate.

When a color has no hue of its own, because it is black, white or a grey, the picker keeps the hue you were on instead of jumping back to red. Drag the brightness down to black and up again and your hue is still there. The nearest CSS color name is found by measuring distance in OKLab, so it is the name that looks closest, not just the one with the closest numbers.

How to use it

  1. Drag in the square, or use the hue, saturation and brightness sliders, to choose a color.
  2. Or type a HEX code, an rgb() value or any other format into the field, or press Pick a color from the screen if your browser offers it.
  3. Press any value in the list on the right to copy it.
  4. Press Add to the palette to keep the color, repeat for other colors, then copy or export the palette or save it.

Example

A blue chosen by hue, saturation and brightness, with the same color in every format the picker shows. The numbers come from the same code the picker runs.

What was set

Hue
217°
Saturation
76%
Brightness
96%

What came out

HEX
#3B82F5
RGB
rgb(59, 130, 245)
HSL
hsl(217, 90%, 60%)
HSV
hsv(217, 76%, 96%)
CMYK
cmyk(76%, 47%, 0%, 4%)
Nearest CSS name
dodgerblue

Good to know

  • Picking a color from anywhere on your screen uses the EyeDropper feature, which is available in Chrome, Edge and other Chromium browsers but not in Firefox or Safari. Where it is missing the button is not shown.
  • The CMYK value is the plain mathematical conversion. Real print colors depend on the ink, the paper and a color profile, so use it as a guide and not as a proof.
  • A palette of picks holds up to 10 colors, and the same color cannot be added twice.
  • The square can be used with a pointer only. The sliders and the HEX field do the same job from the keyboard and with a screen reader.

Questions people ask

What is the difference between HSV and HSL?

Both describe a color by hue and saturation, but the third value differs. In HSV the value is brightness, and 100% is the purest, brightest version of the hue. In HSL the lightness runs from black through the pure color at 50% to white. Pickers use HSV because one square then holds every shade of a hue.

Why does the picker keep my hue when the color turns grey?

A grey, a black or a white has no hue, so any hue would describe it equally well. Keeping the one you were on means that dragging back out of black or grey returns you to the color you were choosing, instead of to red.

Can I pick a color from anywhere on my screen?

In browsers that support the EyeDropper feature, yes: press Pick a color from the screen, then press any point on your screen, even outside the browser window. The page only receives the one color you choose, and never a picture of your screen.

Why is the CMYK value only approximate?

CMYK is what a printer mixes, and the result depends on its inks and paper. The formula used here has no color profile, so it gives the simple mathematical equivalent of the screen color. A print shop's own profile will give a more faithful value.