Colour Converter & Contrast Checker

Paste any CSS colour — HEX, RGB, or HSL, with or without alpha — and get every other format, plus WCAG contrast ratios against white and black.

How to use this tool

1. Paste a colour value, or use the picker.
2. Every format is listed below — click to copy.
3. Check the contrast panel before using it for text.

Accepted formats include #4f46e5, #4f46e5cc, #abc, rgb(79, 70, 229), rgba(79 70 229 / 0.8), and hsl(243, 75%, 59%).

HEX, RGB, HSL — when to use which

• HEX is compact and universal. Best for storing brand colours and pasting into design tools.
• RGB exposes the individual channels, and rgba() makes transparency explicit.
• HSL is the one worth learning. Hue, saturation, and lightness map to how people actually think about colour, so building a palette is straightforward: keep the hue, vary the lightness, and you have a consistent tint and shade scale. Doing the same in HEX means guessing.

Contrast and accessibility

The contrast panel shows the WCAG ratio against a white and a black background. The thresholds:

• 4.5:1 — minimum for normal body text (WCAG AA)
• 3:1 — minimum for large text (18pt+, or 14pt+ bold) and for UI components and graphics
• 7:1 — enhanced standard for body text (WCAG AAA)

A colour that fails against white may pass comfortably against black, which is exactly why dark mode often needs a different brand tint rather than the same one. If your brand colour fails at body-text size, keep it for headings, buttons, and accents, and use a darker or lighter variant for running text.

Contrast is not a nicety. Low-contrast text is unreadable for people with low vision, and difficult for everyone in sunlight.

Related tools

• Colour picker — pick visually
• Random colour palette generator — start a scheme
• Number base converter — the hex behind HEX
• Favicon generator — match your brand colour

FAQ

Is anything uploaded?

No. Parsing and conversion happen in your browser.

What does the two extra digits on a hex colour mean?

That is the alpha channel — 8-digit hex is #RRGGBBAA. FF is fully opaque, 00 fully transparent, 80 about 50%.

How is the contrast ratio calculated?

Using the WCAG relative-luminance formula, which weights the red, green, and blue channels by how sensitive human vision is to each — green counts for far more than blue.

Does contrast apply to alpha colours?

The ratios here are computed on the opaque colour. A semi-transparent colour's real contrast depends on whatever sits behind it, so composite it first.

Why does my brand colour fail contrast?

Mid-tone saturated colours — particularly bright blues, greens, and oranges — often sit around 3:1 against white. Keep them for large text and UI elements, and darken them for body copy.

What is the difference between HSL and HSB/HSV?

HSL's lightness runs from black through the pure colour to white. HSB's brightness runs from black to the pure colour only. Design tools tend to use HSB; CSS uses HSL.