Color Format Converter
Convert a color between hex, RGB, and HSL with a live swatch, and check WCAG 2.1 contrast against black and white.
Type a color in any format — #hex, rgb(), or hsl()
(with optional alpha) — and get the others, a live swatch, and WCAG contrast ratios.
Everything updates as you type.
| hex | |
| rgb | |
| hsl | |
Contrast (WCAG 2.1)
Relative-luminance contrast of this color against black and white (alpha ignored). AA needs 4.5:1 for normal text and 3:1 for large (≥24px, or ≥18.66px bold); AAA needs 7:1 and 4.5:1.
color formats 101
The three formats
| format | looks like | good for |
|---|---|---|
| hex | #ff6e7a | the web default — two hex digits each for red, green, blue. A fourth pair adds alpha (#ff6e7a80); the 3- and 4-digit shorthands double each digit (#f7a = #ff77aa). |
| rgb | rgb(255, 110, 122) | each channel 0–255. rgba(…, 0.5) adds alpha as 0–1. |
| hsl | hsl(354, 100%, 72%) | hue (0–360°), saturation, lightness. Intuitive for tweaking — nudge the hue to shift color, lightness to lighten. |
They're interchangeable ways of naming the same sRGB color; the converter parses any and shows the rest.
Contrast and WCAG
The Web Content Accessibility Guidelines define a contrast ratio between a
foreground and background color, from 1:1 (identical) to 21:1 (black on white). It's computed
from each color's relative luminance — a gamma-corrected, perceptually weighted
brightness — as (Llighter + 0.05) / (Ldarker + 0.05).
| level | normal text | large text |
|---|---|---|
| AA | 4.5 : 1 | 3 : 1 |
| AAA | 7 : 1 | 4.5 : 1 |
"Large" means ≥ 24px, or ≥ 18.66px (14pt) bold. The tool checks this color against pure black and pure white so you can see, at a glance, which one it's readable on. Alpha is ignored for the calculation — contrast is only meaningful once a color is composited to opaque.
Why luminance isn't just the average
The eye is far more sensitive to green than to blue, so luminance weights them
0.2126·R + 0.7152·G + 0.0722·B (after undoing sRGB gamma). That's why a saturated
yellow reads as "light" and a saturated blue as "dark" even at the same RGB magnitude — and
why eyeballing contrast from the hex digits alone is unreliable.