Color Converter (HEX, RGB, HSL)

How to use

This tool converts a color between HEX, RGB, HSL, HWB, OKLCH, OKLab and CMYK, shows the colors that go with it, and checks its contrast with another color.

1. Type or paste a color into Color. It reads:
   • Hex codes with 3, 4, 6 or 8 digits, like #ff6347 or #ff634780.
   • The CSS functions rgb(), hsl(), hwb(), oklch(), oklab() and cmyk(), with commas or spaces, with or without alpha.
   • The 148 CSS color names, like tomato or rebeccapurple.
   • A whole CSS line, like color: #ff6347;.
2. Or click the swatch to use your device's color picker.
3. Copy any format from the list. Choose Commas or Spaces for rgb() and hsl(), and turn on Uppercase HEX if you like. Values are rounded only as far as they still convert back to the same HEX.
4. Nearest name shows the CSS color name that matches, or the closest one.

Shades, tints and harmonies shows your color mixed with black and with white, 10% more each time, as CSS color-mix() in OKLab does. Below them are the colors that go with it on the color wheel: complementary, analogous, triadic, split complementary and square. Classic (HSL) is the usual wheel. Even lightness (OKLCH) keeps every color as light as yours. Click any color to use it, or copy a whole row.

The Contrast checker compares your color with white, black or a second color. It shows the WCAG 2 contrast ratio and whether text passes AA and AAA, at normal and large sizes.

An OKLCH color outside sRGB, the range HEX can hold, is brought inside by lowering its chroma, as CSS Color 4 describes, and the tool tells you. CMYK uses a simple formula with no printer profile, so treat it as a starting point for print.

Frequently asked questions

What is the difference between HEX, RGB and HSL?

They describe the same colors in different ways. HEX and RGB give the amounts of red, green and blue, HEX in base 16. HSL gives hue, saturation and lightness, which is easier to adjust by hand.

Why use OKLCH?

OKLCH is built so that equal steps in its numbers look like equal steps to the eye. Two colors with the same lightness really look equally light, which makes palettes and readable color pairs easier to plan. Current browsers support it in CSS.

What contrast ratio do I need?

WCAG 2 level AA needs 4.5:1 for normal text and 3:1 for large text, which is 24 px, or about 19 px when bold. Level AAA needs 7:1 and 4.5:1. The tool never rounds a ratio up to reach a pass.