Color picker

Pick any color and get its HEX, RGB, HSL and OKLCH values, its contrast against white and black, a tint and shade scale and matching colors.

How to use the color picker

  1. Drag in the OKLCH picker, type a hex code, or open the browser color picker to choose a color. The page address follows your color, so you can share it.
  2. Read the color in HEX, RGB, HSL, OKLCH and Display P3, and copy any value with its copy button.
  3. Check the contrast against white and black, with WCAG ratios and APCA values.
  4. Scroll down for a tint and shade scale, how the color looks with color blindness, matching harmonies and similar named colors.

What you can do

  • OKLCH picker

    Choose lightness, chroma and hue with a picker built on OKLCH, including colors beyond sRGB, with a gamut report for sRGB, Display P3 and Rec. 2020.

  • Every format

    HEX, RGB, HSL, OKLCH and Display P3 values, plus a CSS snippet to paste into your stylesheet.

  • Contrast checks

    WCAG 2 ratios and APCA values for your color as text and as a background on white and black.

  • Tint and shade scale

    An OKLCH scale around your color, which you can take further in the Tailwind scale generator.

  • Color-blindness views

    See how the color shifts under simulated color-vision deficiencies.

  • Harmonies and names

    Matching color harmonies that open in the generator, and the nearest named colors.

Frequently asked questions

How do I pick a color online?

Drag in the OKLCH picker, type a hex code, or use the browser color picker. The values for the color update as you go, and you can copy any of them.

What is a HEX color code?

A hex code is a six-digit hexadecimal number starting with #, such as #E77B80. The three pairs of digits are the red, green and blue amounts, each from 00 to FF, which is 0 to 255 in decimal.

What is OKLCH?

OKLCH is a color format with three parts: lightness, chroma and hue. It is built on a color space where equal numeric steps look like equal visual steps, so adjusting lightness does not shift the apparent hue the way HSL does. CSS supports it with oklch().

How do I find the name of a color from its hex code?

Enter the hex code. The page shows the nearest named color, and a color that matches a name exactly has its own page in the color names directory.

How do I pick a color from an image or from my screen?

Use the image color picker to sample a photo, or the GetColors Chrome extension to pick any color on screen with its eyedropper.