Color Code Converter — HEX, RGB, HSL, OKLCH

Convert a HEX code to RGB, HSL and OKLCH — and back. Add a background color and you get the WCAG contrast ratio plus AA/AAA verdicts for normal and large text. Everything runs in your browser.

How to use

  1. Paste a HEX code, rgb() or hsl() value, or pick a color with the swatch picker.
  2. Copy the HEX, RGB, HSL or OKLCH value straight from the list.
  3. Enter a background color to see the contrast ratio and AA/AAA results.

Contrast uses the WCAG 2.x relative-luminance formula. Alpha is ignored — the real contrast of a translucent color depends on whatever sits behind it, so enter the composited color instead.

OKLCH is the perceptually uniform space from CSS Color 4. Keep L fixed and change only the hue and the colors stay about equally bright to the eye, which makes design-token ramps far more predictable than HSL.

FAQ

What's the difference between HEX and RGB?

Only the notation. #FF8800 is hexadecimal and rgb(255, 136, 0) is decimal — the same color either way.

What contrast ratio do I need to pass?

Normal text needs 4.5:1 for AA and 7:1 for AAA. Large text (24px, or bold 18.66px and up) needs 3:1 for AA and 4.5:1 for AAA.

What is the lightness ramp for?

It gives you lighter and darker steps of one color in a single shot — handy for hover and disabled states, or a dark-mode variant.

Related tools