Color Converter: HEX, RGB, HSL, OKLCH and WCAG Contrast

Convert colours between HEX, RGB, HSL, HSV, CMYK and OKLCH, check WCAG 2.2 contrast ratios and build tint and shade palettes. Runs in your browser.

Runs in your browser. Nothing is uploaded.

Web

Color Converter and Contrast Checker

Colour

Pick a colour

Formats

Conversions
HEX
#1d4ed8
RGB
rgb(29 78 216)
HSL
hsl(224 76% 48%)
HWB
hwb(224 11% 15%)
HSV
hsv(224, 87%, 85%)
CMYK
cmyk(87%, 64%, 0%, 15%)
OKLCH
oklch(0.4882 0.2172 264.38)
OKLab
oklab(0.4882 -0.0213 -0.2161)
CSS name
royalblue is the nearest (#4169e1)

CMYK is a plain arithmetic conversion, not a print profile. OKLCH values are computed from the CSS Color 4 formulas

Contrast checker (WCAG 2.2)

Normal text sample: the quick brown fox jumps over the lazy dog.

Large text sample

ResultRatio 6.70:1

6.70:1

  • AA, normal text (4.5:1)Pass
  • AA, large text (3:1)Pass
  • AAA, normal text (7:1)Fail
  • AAA, large text (4.5:1)Pass
  • UI components (3:1)Pass

Large text means 24 px, or 18.66 px and bold, or bigger (WCAG's 18 pt and 14 pt bold). The ratio is not rounded: 4.499 does not meet 4.5.

Tints, shades and CSS variables

Tints (mixed with white)

  • #3460dc10% white
  • #4a71e020% white
  • #6183e430% white
  • #7795e840% white
  • #8ea7ec50% white
  • #a5b8ef60% white
  • #bbcaf370% white
  • #d2dcf780% white
  • #e8edfb90% white

Shades (mixed with black)

  • #1a46c210% black
  • #173ead20% black
  • #14379730% black
  • #112f8240% black
  • #0f276c50% black
  • #0c1f5660% black
  • #09174170% black
  • #06102b80% black
  • #03081690% black
CSS custom properties
:root {
  --color: #1d4ed8;
  --color-rgb: 29 78 216;
  --color-hsl: 224 76% 48%;
  --color-oklch: 0.4882 0.2172 264.38;
  --color-tint-10: #3460dc;
  --color-tint-20: #4a71e0;
  --color-tint-30: #6183e4;
  --color-tint-40: #7795e8;
  --color-tint-50: #8ea7ec;
  --color-tint-60: #a5b8ef;
  --color-tint-70: #bbcaf3;
  --color-tint-80: #d2dcf7;
  --color-tint-90: #e8edfb;
  --color-shade-10: #1a46c2;
  --color-shade-20: #173ead;
  --color-shade-30: #143797;
  --color-shade-40: #112f82;
  --color-shade-50: #0f276c;
  --color-shade-60: #0c1f56;
  --color-shade-70: #091741;
  --color-shade-80: #06102b;
  --color-shade-90: #030816;
}

Example

Input
#1d4ed8 on #ffffff
Result
rgb(29 78 216)  hsl(224 76% 48%)  oklch(0.4882 0.2172 264.38)
Contrast 6.70:1 (AA pass, AAA normal text fail)

Every format from one input

Type a colour in almost any CSS notation (a hex code with 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), oklab(), oklch(), a CSS name such as rebeccapurple) or the non-CSS notations hsv() and cmyk(), or pick one with the colour picker. The page shows HEX, RGB, HSL, HWB, HSV, CMYK, OKLCH and OKLab, each with a copy button, plus the CSS name when there is an exact match or the nearest name when there is not. Alpha is carried through where the format supports it.

OKLCH is the newer, perceptually based notation from CSS Color 4: lightness, chroma and hue, designed so that equal numeric steps look like equal steps. It is supported in current versions of the major browsers; the page tells you whether yours can display it. The conversion uses the sRGB, XYZ and OKLab matrices published in the specification, and the test suite checks them against the primaries, for example red is oklch(0.628 0.2577 29.23).

Contrast checking with WCAG 2.2

Enter a text colour and a background and the page computes the WCAG contrast ratio from relative luminance: each channel is linearised with the sRGB curve, weighted 0.2126, 0.7152 and 0.0722, and the ratio is (lighter + 0.05) / (darker + 0.05). It then lists the results for AA (4.5:1 for normal text, 3:1 for large text) and AAA (7:1 and 4.5:1), plus the 3:1 threshold for user-interface components and graphics. Large text means at least 24 px, or 18.66 px if bold.

The ratio is never rounded up: 4.499:1 fails 4.5:1, and the displayed value is truncated rather than rounded so a near miss is not hidden. A translucent text colour is blended over the background first, as a browser paints it. Contrast ratios are a minimum for accessibility, not a guarantee of comfortable reading, and WCAG 2.x does not model how thin fonts or very small text affect legibility.

Palettes and CSS variables

For any colour you get nine tints, mixed towards white, and nine shades, mixed towards black, at even steps, each labelled with a readable text colour, and a block of CSS custom properties you can paste into :root. The mixing is done in sRGB, so results are predictable and match Sass's mix(); they are a quick starting point rather than a designed scale, and mid steps can look muddier than a hand-tuned or OKLCH-based palette.

CMYK here is plain arithmetic from RGB. It is not colour-managed, so it will not match a print shop's profile, and colours outside the sRGB gamut, such as very saturated OKLCH values, are brought into gamut by reducing chroma. Treat the numbers as screen values.

Frequently asked questions

How do I convert HEX to RGB?

Split the hex code into pairs and read each as a number from 0 to 255: #1d4ed8 is 1d = 29, 4e = 78 and d8 = 216, so rgb(29 78 216). Paste it above to do it instantly, along with HSL and OKLCH.

What contrast ratio do I need?

WCAG 2.2 level AA asks for 4.5:1 for normal text and 3:1 for large text and for user-interface components. Level AAA asks for 7:1 and 4.5:1. Aim higher than the minimum where you can.

What is OKLCH and why use it?

OKLCH describes a colour by lightness, chroma and hue in a space designed to match human perception, so changing lightness does not shift the apparent hue as HSL does. It can also express colours beyond sRGB. Provide a hex fallback if you must support very old browsers.

Why does the CMYK value not match my printer?

This is a simple mathematical conversion with no ink or paper profile. Real print conversion depends on ICC profiles and the press, so ask your printer for their profile if exact colour matters.

Are my colours sent anywhere?

No. Parsing, conversion and contrast calculations run in your browser.

Related tools