EnglishEN

Color Picker & Color Code Converter

Pick a color or paste any color code — every format updates instantly.

Your text and files never leave your browser — nothing is sent to a server.

#0F766E
Color codes

Tints (mixed with white)
Shades (mixed with black)

Click a swatch to use that color. The number is the mix percentage.

CSS variables

How to use

  1. Click the color box to choose a color, or paste a code into any field such as HEX or RGB.
  2. Editing one field updates all the others. You can type just three numbers without “rgb(”.
  3. Pick a nearby color from the tint and shade rows — clicking one makes it the new base color.
  4. Name your variable under “CSS variables”, then copy the block into your stylesheet. The color is saved in the page URL, so you can share the link as is.

FAQ

What is the difference between HEX and RGB?

They describe the same color in different notations. HEX writes the red, green and blue values (0–255) as two hexadecimal digits each, while RGB writes the same values as decimal numbers.

Will the CMYK values print exactly like the screen?

The CMYK shown here is a simple mathematical conversion meant as a starting point. Real print colors depend on paper, ink and the printer’s color profile, so confirm the values with your print shop.

What is OKLCH?

OKLCH describes a color by perceived lightness (L), chroma (C) and hue (H). Modern CSS supports oklch() directly, and changing only the lightness keeps the hue looking consistent.

Why don’t I see the “Pick from screen” button?

It only appears in desktop browsers that support the EyeDropper API, such as Chrome and Edge. In other browsers, try the image color picker to grab colors from a photo.

Related tools

Image Color PickerPick pixel colors and a paletteContrast CheckerContrast ratio with AA and AAA resultsColor scale for TailwindOne color to a 50–950 scaleCSS GradientLinear, radial and conic gradients

All tools