Which formats can I type?

HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), and three plain numbers such as 51, 102, 153, which are read as RGB.

Does it support transparency?

Yes. An alpha value is kept and shown as 8-digit HEX, rgba() and hsla(). Contrast and palettes use the fully opaque color.

What do the AA and AAA contrast results mean?

They are the WCAG accessibility levels for text. AA needs a contrast ratio of at least 4.5:1 for normal text (3:1 for large text), and AAA needs 7:1.

Why does converting HSL back to HEX sometimes give a slightly different color?

HSL values are shown rounded to whole numbers, and several nearby RGB colors can round to the same HSL value. The HEX and RGB values shown are always exact.

Color Converter

Runs locally

Type or pick a color and get it in HEX, RGB, HSL and HSV at once, each ready to copy. You also get its contrast against white and black text, a scale of tints and shades, and classic color-wheel palettes.

Free to use
No registration
Runs locally in your browser
Your data is never uploaded

Color (HEX, RGB, HSL or HSV)

HEX#2f6fed

RGBrgb(47, 111, 237)

HSLhsl(220, 84%, 56%)

HSVhsv(220, 80%, 93%)

Contrast (WCAG)

White text: 4.55:1

AA pass · AAA fail · AA large text pass

Black text: 4.62:1

AA pass · AAA fail · AA large text pass

Tints and shades

Palettes

Complementary

Analogous

Split complementary

Triadic

Tetradic

Click a swatch to copy its HEX value.

Your data is processed locally in your browser and is not uploaded.

Learn more about this tool⌄

How it works

Whatever notation you type is converted to RGB, and every other notation is calculated from that, so the values always describe the same color. Contrast uses the WCAG 2 relative luminance formula. Tints and shades mix the color with white and black in even steps; palettes rotate its hue around the HSL color wheel (180° for complementary, 120° steps for triadic, and so on). HSL and HSV values are rounded to whole numbers for display.

Common use cases

Converting a HEX color from a design file to RGB or HSL for CSS
Checking whether white or black text is readable on a brand color
Building a quick palette of lighter, darker and complementary colors

Frequently asked questions

Which formats can I type?: HEX with 3, 4, 6 or 8 digits (with or without #), rgb() and rgba(), hsl() and hsla(), hsv() or hsb(), and three plain numbers such as 51, 102, 153, which are read as RGB.
Does it support transparency?: Yes. An alpha value is kept and shown as 8-digit HEX, rgba() and hsla(). Contrast and palettes use the fully opaque color.
What do the AA and AAA contrast results mean?: They are the WCAG accessibility levels for text. AA needs a contrast ratio of at least 4.5:1 for normal text (3:1 for large text), and AAA needs 7:1.
Why does converting HSL back to HEX sometimes give a slightly different color?: HSL values are shown rounded to whole numbers, and several nearby RGB colors can round to the same HSL value. The HEX and RGB values shown are always exact.