Uber Tools

Color Converter

Convert a color between HEX, RGB, HSL, HWB, CMYK and OKLCH, check its contrast and build palettes from it

dodgerblue

Formats

HEX

#1e90ff

RGB

rgb(30 144 255)

HSL

hsl(209.6 100% 55.9%)

HWB

hwb(209.6 11.8% 0%)

CMYK

cmyk(88.2%, 43.5%, 0%, 0%)

OKLab

oklab(65.2% -0.0549 -0.182)

OKLCH

oklch(65.2% 0.1901 253.21)

Contrast

WCAG 2.1 contrast ratio of the color as text, the transparency left out

Large text

Normal text on white

3.24 : 1 on white

AA normal ✗
AA large ✓
AAA normal ✗
AAA large ✗

Large text

Normal text on black

6.49 : 1 on black

AA normal ✓
AA large ✓
AAA normal ✗
AAA large ✓

Large text

Normal text on the background

3.24 : 1 on the background

AA normal ✗
AA large ✓
AAA normal ✗
AAA large ✗

Palettes

Click a swatch to use its color

Tints, with white

Shades, with black

Complementary

Analogous

Triadic

Split complementary

Tetradic

How to convert a color

  1. Type a color in any CSS format (#1e90ff, rgb(), hsl(), oklch(), a name…) or pick it.
  2. Copy it as HEX, RGB, HSL, HWB, CMYK, OKLab or OKLCH, and see its nearest CSS color name.
  3. Check its contrast on white, on black and on a background you pick.
  4. Build palettes from it: tints, shades and harmonies; click a swatch to make it the color.

Questions

How do I check color contrast for accessibility?

The contrast ratio of the color as text is rated against WCAG 2.1, AA and AAA, for normal and large text, on white, black and your background.

What is OKLCH?

A newer CSS color format whose lightness matches what eyes see, so palettes made in it look even; modern browsers support it.

Is CMYK exact for print?

It's the plain conversion; printers use color profiles for their inks and paper, so treat it as a starting point.

Can I type a color name?

Yes, any CSS color name works, such as dodgerblue, and every color shows its nearest name.

Related tools