How to convert a colour
Type a colour in any common CSS format, or pick one with the colour picker. The tool accepts HEX (#2f5fe0, the short form #25e, or 8-digit HEX with alpha), rgb()/rgba() and hsl()/hsla(), in both the classic comma syntax and the newer space-separated syntax. Every other format updates instantly, along with a large preview swatch.
Which format should I use?
- HEX is compact and universal. Designers hand it over, and every tool understands it.
- RGB maps directly to how screens mix red, green and blue light, and is easy to manipulate in code.
- HSL (hue, saturation, lightness) is the most human-friendly. To make a lighter hover state, just raise the lightness; to make a muted version, lower the saturation. It's great for building colour scales with CSS custom properties.
- CMYK is for print. The conversion here is a simple mathematical one; real print work uses colour profiles, so ask your printer for the exact values they need.
Modern CSS also supports oklch(), which keeps perceived brightness consistent across hues. It's excellent for design systems, but HEX and HSL remain the common language when sharing colours.
Contrast and accessibility
The last two rows show the contrast ratio of your colour against white and black, using the formula from the Web Content Accessibility Guidelines (WCAG 2.x). The guidelines ask for:
| Level | Normal text | Large text (about 24px, or 19px bold) |
|---|---|---|
| AA | 4.5:1 | 3:1 |
| AAA | 7:1 | 4.5:1 |
If your brand colour fails AA against white, don't use it for body text. Use it for larger headings, icons or backgrounds instead, or darken it slightly for text. A few percent less lightness in HSL is often enough to pass while still looking like the same colour.
A note on alpha
Transparent colours (alpha below 1) are converted correctly, but their contrast depends on what's behind them, so the contrast rows treat the colour as if it were fully opaque. Check the final rendered colour if you're using transparency on text.
Frequently asked questions
How do I convert HEX to RGB by hand?
Split the six digits into three pairs and convert each pair from hexadecimal to decimal. For #2f5fe0 that is 2f = 47, 5f = 95, e0 = 224, so rgb(47, 95, 224).
Why does my CMYK value differ from Photoshop?
Photoshop converts through a colour profile that models real inks and paper. This tool uses the plain mathematical conversion.
What contrast ratio do I need for buttons?
Button text should meet 4.5:1 against the button background. The button itself should have at least 3:1 against the surrounding page under WCAG 2.1 non-text contrast.