Colour Converter & Contrast Checker
Paste any CSS colour to convert it, get a perceptual tint scale, and test text contrast against WCAG 2.
Tints and shades
Steps of equal perceived lightness (OKLCH), keeping the hue. Click a swatch to copy its HEX.
Contrast checker (WCAG 2)
Large text 24px sample
Normal body text at 16px. The quick brown fox jumps over the lazy dog.
How it works
Type a colour in any common CSS form: #1e90ff, #1e90ff80 with alpha, rgb(30 144 255), hsl(210 100% 56%), oklch(65% 0.18 250) or a named colour such as rebeccapurple. Every other format updates instantly, ready to copy.
The tint and shade scale is built in OKLCH, a colour space designed so equal steps in lightness look equally different to the eye. That gives much more even design-system scales than lightening in HSL, where yellow and blue at the same "lightness" look nothing alike. Colours that fall outside the sRGB screen gamut are pulled back by reducing chroma, so the hue stays true.
The contrast checker uses the WCAG 2 formula: relative luminance of each colour, then (lighter + 0.05) / (darker + 0.05). Body text needs at least 4.5:1 for level AA and 7:1 for AAA; large text (24px, or 18.66px bold) needs 3:1. If a pair fails, the tool searches for the nearest text colour with the same hue that passes and lets you apply it with one click.
Questions
What is OKLCH and why use it?
OKLCH describes a colour by perceived lightness, chroma (colourfulness) and hue. It is supported in modern CSS and makes palettes and contrast far more predictable than HSL.
Is the contrast ratio rounded?
It is truncated to two decimals rather than rounded up, so 4.499 shows as 4.49 and correctly fails AA instead of falsely passing.
Does it handle transparency?
Alpha is parsed and shown in every format. Contrast is calculated on the opaque colours, because the result of a transparent colour depends on what is behind it.
What about WCAG 3 / APCA?
APCA is still a draft. WCAG 2.x ratios remain the legal and audit standard in most places, so that is what this tool reports.