Developer Tools · 16 tools

Color Code Converter

Type a color in HEX, RGB, HSL, HWB or OKLCH, or pick one, to get it in every other format. The contrast check shows whether text on it meets WCAG levels.

INPUT

HEX, rgb(), hsl(), hwb() or oklch(), with or without transparency

Read as HEX

RESULT

  • HEX#2445D6
  • RGBrgb(36, 69, 214)
  • HSLhsl(229, 71%, 49%)
  • HWBhwb(229 14% 16%)
  • OKLCHoklch(47.27% 0.2232 266.62)

CONTRAST (WCAG 2)

  • With white

    7.24:1

    • AA: pass
    • AA large text: pass
    • AAA: pass
    • AAA large text: pass

  • With black

    2.89:1

    • AA: fail
    • AA large text: fail
    • AAA: fail
    • AAA large text: fail

  • With #F5F6F8

    6.70:1

    • AA: pass
    • AA large text: pass
    • AAA: fail
    • AAA large text: pass

Runs entirely in your browser. Nothing you enter is sent to a server.

How to convert a color code

  1. Enter a color

    Type or paste a value such as #2445D6, rgb(36, 69, 214) or oklch(47% 0.22 267), or use the color picker.

  2. Copy the format you need

    HEX, RGB, HSL, HWB and OKLCH are shown together, each with its own copy button.

  3. Check the contrast

    See the contrast ratio against white, black and a color of your choice, with the WCAG AA and AAA results.

One color, five notations

HEX and RGB describe the red, green and blue parts of a color. HSL and HWB describe it by hue, which is easier to adjust by hand. OKLCH is a newer CSS format whose lightness matches how bright colors look, so palettes built with it stay even. Transparency is kept in every format.

Contrast and WCAG

WCAG asks for a contrast ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA. Large text, from about 24px or 19px bold, needs 3:1 for AA and 4.5:1 for AAA. Ratios are rounded down, so a color shown as passing really does.

Frequently asked questions

Why does my OKLCH color look different?

OKLCH can describe colors that screens using the sRGB range can't show. Such colors are brought into range by lowering their chroma while keeping lightness and hue, and a note tells you when that happened.

How are transparent colors checked for contrast?

A transparent color is first drawn over white, as it would look on a white page, and that result is compared.

Is anything sent to a server?

No. All conversions and contrast checks happen in your browser.