How do I get the HEX code of a color?

Pick the color in the large square and the hue slider, or type any value you already have. The HEX code appears in the “Color value” field and in the list below, with a Copy button next to it.

What color formats can I type in?

HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla() in both comma and space syntax, and any of the 148 CSS color names such as tomato or rebeccapurple.

Why is the CMYK value only an approximation?

Screens mix light (RGB) while printers mix inks (CMYK), and the exact result depends on the printer, paper and color profile. The picker uses the standard profile-free formula, which is a good starting point but not a guaranteed print match.

What do the AA and AAA results mean?

They are the WCAG 2 contrast levels for text. AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The picker shows how your color does as text on white and on black.

Yes. When you change the color, the address bar updates to something like /color-picker#1e90ff. Opening that link starts the picker with the same color.

Color Picker

Pick any color and copy its HEX, RGB, HSL and CMYK values — with shades, tints and contrast.

Hue 210°Opacity (alpha) 100 %

Pick a color from an image

#1E90FFrgb(30, 144, 255)

Color value

Type or paste HEX, rgb(), rgba(), hsl(), hsla() or a CSS color name.

RGB and opacity

HSL

CMYK (approximation)

Copy color values

HEX: #1E90FF
RGB: rgb(30, 144, 255)
HSL: hsl(210, 100%, 55.9%)
HSV: hsv(210, 88.2%, 100%)
CMYKapproximation: cmyk(88%, 44%, 0%, 0%)
CSS: color: #1E90FF;
CSS variable: --brand-color: #1E90FF;

CSS variable name

Contrast (WCAG 2)

How readable this color is as text on white and on black. Check any pair in the contrast checker.

#1E90FF on white

3.23:1

Normal text sample

Large text

AA normal text (4.5:1)Fail
AA large text (3:1)Pass
AAA normal text (7:1)Fail
AAA large text (4.5:1)Fail

#1E90FF on black

6.48:1

Normal text sample

Large text

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AAA normal text (7:1)Fail
AAA large text (4.5:1)Pass

Shades (mixed with black)

Click a swatch to select it.

Tints (mixed with white)

Color harmonies

Build a full scheme with the color palette generator or explore harmonies on the color wheel.

How to use the color picker

Choose a hue with the rainbow slider, then drag in the large square to set saturation (left to right) and brightness (bottom to top).
Or type a value you already have — #1e90ff, rgb(30, 144, 255), hsl(210, 100%, 56%) or a name like tomato — and every other format updates instantly.
Fine-tune with the RGB, HSL or CMYK number fields and the opacity slider.
Copy the value you need: HEX, RGB, HSL, CMYK, a CSS declaration or a CSS custom property.

Features

Visual picker with keyboard support: arrow keys move the picker, Shift for bigger steps.
HEX, RGB, HSL, HSV and CMYK kept in sync, including 8-digit HEX and rgba()/hsla() when the color is transparent.
Clear errors for invalid input, such as rgb(300, 0, 0) or a 5-digit HEX code, instead of silently guessing.
Nine shades and nine tints, plus complementary, analogous, triadic and split-complementary colors.
WCAG 2 contrast ratio against white and black, with AA and AAA results for normal and large text.
A “Pick from screen” eyedropper in browsers that support it (Chrome and Edge on desktop).

HEX, RGB, HSL and CMYK in short

HEX writes the red, green and blue channels as three pairs of hexadecimal digits, from 00 to FF. RGB writes the same channels as numbers from 0 to 255. HSL describes a color by hue (0–360° around the color wheel), saturation and lightness, which makes it easy to create lighter or darker versions. CMYK describes ink percentages for print; converting from screen colors is always an approximation.

The same color in CSS

.button {
  background: #1e90ff;
  background: rgb(30 144 255);
  background: hsl(210 100% 56%);
}

As a reusable CSS custom property

:root {
  --brand-color: #1e90ff;
}

.button {
  background: var(--brand-color);
}

What people use it for

Finding a brand or button color and copying it straight into CSS.
Converting a color from a design tool into the format a codebase uses.
Building hover and active states from the shade and tint rows.
Checking that text in a chosen color is readable before shipping it.

More ways to find and use colors

Need a color from a photo or screenshot? The color picker from image reads the exact pixel you click. Browse every CSS color name in the HTML color codes list, or convert single values with HEX to RGB, RGB to HEX and RGB to CMYK.

Popular colors with their codes, shades and matching colors:

Frequently asked questions

How do I get the HEX code of a color?: Pick the color in the large square and the hue slider, or type any value you already have. The HEX code appears in the “Color value” field and in the list below, with a Copy button next to it.
What color formats can I type in?: HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla() in both comma and space syntax, and any of the 148 CSS color names such as tomato or rebeccapurple.
Why is the CMYK value only an approximation?: Screens mix light (RGB) while printers mix inks (CMYK), and the exact result depends on the printer, paper and color profile. The picker uses the standard profile-free formula, which is a good starting point but not a guaranteed print match.
What do the AA and AAA results mean?: They are the WCAG 2 contrast levels for text. AA needs at least 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1. The picker shows how your color does as text on white and on black.
Can I share a color?: Yes. When you change the color, the address bar updates to something like /color-picker#1e90ff. Opening that link starts the picker with the same color.