Skip to content
AnyToolBox

Search tools

Find a tool by name or keyword

Color Converter

Convert colors between HEX, RGB, HSL, HWB, CMYK and OKLCH, with a picker and WCAG contrast check.

100% Client-Side

Type any CSS color or use the picker to get it in every common format.

How to use the Color Converter

  1. 1

    Type a color in any CSS format — #ff6600, rgb(255 102 0), hsl(24 100% 50%), a name like tomato — or use the color picker.

  2. 2

    See it converted to HEX, RGB, HSL, HWB, CMYK and OKLCH instantly.

  3. 3

    Copy any value with one click, ready to paste into CSS or a design tool.

  4. 4

    Check the contrast ratio against white and black text to meet WCAG AA or AAA.

Frequently asked questions

HEX (3, 4, 6 or 8 digits), rgb()/rgba(), hsl()/hsla() and hwb() are parsed directly, in both comma and modern space-separated syntax. Other CSS colors your browser understands, such as named colors or oklch(), are converted through the browser's own color engine.

It uses the standard formula without an ICC print profile, so it's a good starting point for design work. For professional printing, your print shop's color profile will give slightly different values.

OKLCH is a newer CSS color space based on how people perceive lightness, chroma and hue. Changing only the L value gives evenly lighter or darker shades, which makes it popular for design-system palettes.

WCAG requires at least 4.5:1 for normal text and 3:1 for large text (level AA), or 7:1 and 4.5:1 for level AAA. The tool shows the ratio against white and black and which levels it passes.

Yes. If your color has alpha, it's carried through to the 8-digit HEX, rgb(), hsl(), hwb() and oklch() outputs. CMYK has no alpha, and contrast is measured on the opaque color.

Missing a feature or tool?

Tell us what would make Color Converter more useful, or what to build next.