Colour converter

Convert a colour between HEX, RGB, HSL, HWB and OKLCH, check its WCAG contrast against a background, or build a Material 3 tonal palette from it.

Code examples

Copy and paste these into your own project. Each one uses only the language's standard library, so there is nothing to install.

Star up to 3 languages to show them first on every tool page.

const foreground = '#3366cc'
const background = '#ffffff'

const luminance = (hex) => {
  const [r, g, b] = [1, 3, 5].map((start) => {
    const channel = parseInt(hex.slice(start, start + 2), 16) / 255
    return channel <= 0.04045 ? channel / 12.92 : ((channel + 0.055) / 1.055) ** 2.4
  })
  return 0.2126 * r + 0.7152 * g + 0.0722 * b
}

const [lighter, darker] = [luminance(foreground), luminance(background)].sort((a, b) => b - a)
const ratio = (lighter + 0.05) / (darker + 0.05)

// Truncated, not rounded: 4.499 must not pass as 4.5.
console.log((Math.floor(ratio * 100) / 100).toFixed(2))

What it does

Converts a colour between HEX, RGB, HSL, HWB and OKLCH, checks its WCAG contrast ratio against a background, and builds a Material 3 tonal palette from it. Everything runs in your browser.

How to use it

Type a colour as hex (#36c, #3366cc) or as rgb(), hsl(), hwb() or oklch().
Choose Convert, Contrast or Palette. Contrast shows a field for the background colour.
Copy or download the result, or send it to another tool.

Examples

#3366cc is rgb(51 102 204), hsl(220 60% 50%), hwb(220 20% 20%) and oklch(0.5325 0.1679 262.29). Against white it has a contrast of 5.36:1, which passes AA for normal text but not AAA.

Good to know

The ratio follows WCAG 2: relative luminance from linear sRGB, then (lighter + 0.05) / (darker + 0.05). It is truncated to two decimals, never rounded up to a pass.
AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1 and 4.5:1.
Values are rounded to whole 8-bit channels first, so every line describes the same hex colour. An OKLCH colour outside sRGB is clamped to the nearest displayable one.
The palette keeps the seed’s hue and chroma and lists tones 0, 10, 20 … 90, 95, 99 and 100, as Material 3 does.
Colour names and alpha channels are not supported.

Which colour notations does it read?

Hex (#36c or #3366cc) and the CSS functions rgb(), hsl(), hwb() and oklch(), with spaces or commas between the values. Colour names and transparency are not supported. The result lists the same colour in every notation, rounded to whole sRGB channels.

Frequently asked questions

What contrast ratio does WCAG ask for?

AA asks for 4.5:1 for normal text and 3:1 for large text and interface parts. AAA asks for 7:1 and 4.5:1. The ratio is cut off, never rounded up, so 4.49 does not read as a pass.

What is OKLCH, and why use it?

OKLCH describes a colour by lightness, chroma and hue in a space designed so that equal steps look equally different. That makes it good for building scales and for adjusting lightness without the hue drifting.

What is the palette mode?

It builds a Material 3 tonal palette: the seed’s hue and chroma at 13 tones from 0 (black) to 100 (white). The colour library behind it only loads when you pick this mode.

Changelog for this tool