Colour converter and contrast checker
Convert between HEX, RGB, HSL, HWB and OKLCH, and check contrast.
Notations
- hex
#3b82f6- rgb
rgb(59 130 246)- hsl
hsl(217.2 91.2% 59.8%)- hwb
hwb(217.2 23.1% 3.5%)- oklch
oklch(62.3% 0.188 259.8)
Contrast
- WCAG grade
- AA
- Legible text colour
- Black
- Relative luminance
- 0.2355
Reads a colour in any notation a stylesheet might contain and gives you every other one, along with the contrast ratio against black and white. OKLCH is included because it is the notation that makes a lighter or darker variant actually look like the same colour — the thing HSL is famously bad at, since two HSL colours with the same lightness can differ enormously in how bright they look.
How it works
- Input accepts hex, rgb(), hsl(), hwb() and CSS colour names, in both the comma and the modern space-separated syntax.
- Contrast is the WCAG 2.1 ratio, and the grade is the one a body-text-sized element would earn.
- Everything recalculates as you type, in the page; no colour is ever sent anywhere.
Where your data goes
Nowhere. This tool runs entirely in your browser: the text you paste is processed by the page and is never transmitted to a server or written to a log.
When a run costs points, a one-line summary is saved to your own history so you can find it again. The summary records the shape of the run — sizes, counts, the values you looked up — never the content you pasted.
What it costs
This tool is free, with no sign-in and no points.
Common questions
- Why does HSL lightness not match how bright a colour looks?
- Because HSL lightness is a simple average of the largest and smallest channel, not a model of human vision. hsl(60 100% 50%) is yellow and hsl(240 100% 50%) is blue; both claim 50% lightness, and the yellow is roughly six times brighter to look at. OKLCH's lightness is perceptual, which is why the same L value looks equally bright across hues.
- What contrast ratio do I actually need?
- 4.5:1 for body text and 3:1 for text at 18pt or 14pt bold to meet WCAG AA; 7:1 meets AAA. Interface components and graphics that carry meaning need 3:1. Below 3:1 nothing passes.
- Can I use OKLCH in production?
- Yes. Every current browser supports it, and it degrades cleanly behind an @supports rule or a preceding hex declaration for anything older. It is worth the switch specifically for generating colour scales, where HSL produces steps that look uneven.
The open-source behind it
This tool is a self-contained implementation. Qix-/color-convert (MIT) does the same job as a library — if you need this behaviour inside your own program, start there rather than calling a web page.
Qix-/color-convertAlso known as
- color converter
- hex to rgb
- rgb to hex
- hsl converter
- oklch converter
- contrast checker
- wcag contrast