OKLCH is perceptually uniform: equal numeric steps look like equal visual steps. It is the recommended colour space for design tokens and tonal palettes in modern CSS.

Which contrast ratio do I need?

WCAG AA needs 4.5:1 for body text and 3:1 for large text. AAA tightens this to 7:1 / 4.5:1. Aim for at least AA on text-bearing surfaces.

Colour

Colour Converter & Contrast

Convert a colour between every modern colour space at once — HEX, RGB, HSL, HSV and the perceptually-uniform OKLCH. Generate a tonal palette and check WCAG AA / AAA contrast ratios against any background.

#7c3aed

Color

RGB

HSL

OKLCH

HSV

Tonal palette (OKLCH lightness ramp)

WCAG contrast checker

Foreground

Background

3.47 : 1the quick brown fox

AA · text✗ fail · ≥ 4.5

AAA · text✗ fail · ≥ 7

AA · large✓ pass · ≥ 3

AAA · large✗ fail · ≥ 4.5

runtime

Browser-local execution

Inputs stay inside the current tab unless you copy, download or explicitly export.

memory

Session handoff

Magic Paste can pass input to a target tool through sessionStorage, never through the URL.

control

User-owned state

Favorites, recent tools and workflow history are local browser data you can clear from the browser.

smart handoff graph

Suggested next moves

session handoff ready

sponsor

Fixed native slots for developer products. No third-party tracking, no popups, no layout shift.

Sponsor this tool

How to use

01Type or pick a HEX colour at the top.
02All other colour spaces update instantly — copy the one you need.
03Scroll down to inspect the OKLCH tonal palette and the WCAG contrast badges.

FAQ

Why include OKLCH?: OKLCH is perceptually uniform: equal numeric steps look like equal visual steps. It is the recommended colour space for design tokens and tonal palettes in modern CSS.
Which contrast ratio do I need?: WCAG AA needs 4.5:1 for body text and 3:1 for large text. AAA tightens this to 7:1 / 4.5:1. Aim for at least AA on text-bearing surfaces.