Color Converter
Convert a colour between HEX, RGB and HSL, and check its contrast against white and black for accessibility.
#7c3aedContrast
WCAG AA asks for 4.5:1 on body text and 3:1 on large text (about 24px, or 19px bold) and on meaningful icons and borders. AAA raises body text to 7:1.
Runs entirely in your browser — nothing you paste is uploaded or stored.
About color converter
The same colour has several notations, each convenient for something different. HEX is compact and what design tools hand you; RGB maps to what the screen does; HSL is the one you can reason about, because adjusting lightness or saturation means changing a single number.
Contrast is included because a converted colour usually ends up as text or a background, and whether it is legible is not something you can judge by eye. The ratios against white and black are the actual WCAG numbers.
Good to know
- Type into any field — HEX, RGB or HSL — and the others follow. Three-digit HEX shorthand and an optional leading # are both accepted.
- WCAG asks for at least 4.5:1 for body text and 3:1 for large text or UI elements. The tool states which thresholds a colour passes rather than just printing a number.
- HSL is the field to reach for when you need a lighter or more muted version of a colour: change one component and the hue stays put.