Colour converter
Enter one colour — hex, rgb(), hsl(), or pick it with the native colour picker — and see it converted to all three notations at once, with a swatch and its contrast ratio against black and white. Free, instant, no sign-up.
All formats
- HEX
- #4450b7
- RGB
- rgb(68, 80, 183)
- HSL
- hsl(234, 46%, 49%)
#4450b7 — contrast 6.82:1 against white, 3.08:1 against black.
Contrast against black & white
- vs. white
- 6.82:1
- vs. black
- 3.08:1
Checking this colour as text on a background of your own? Try the full contrast checker.
Swatch
The swatch shows your colour exactly. Everything else on this page uses our own verified palette.
HEX, RGB and HSL, in plain terms
These are three ways of writing the exact same colour — none is more “correct” than the others, but each is more convenient in different places.
- HEX (e.g. #4450b7) packs red, green and blue into six hexadecimal digits. The most common format in CSS, design tools and image editors.
- RGB (e.g. rgb(68, 80, 183)) spells out red, green and blue as plain numbers from 0 to 255 — easier to read and to tweak one channel at a time than hex.
- HSL (e.g. hsl(233, 46%, 49%)) describes hue, saturation and lightness instead — often the most intuitive for adjusting a colour (lighter, more muted, a different hue) without hunting through RGB numbers.
What this does — and doesn’t. This is exact arithmetic between three common colour notations, computed the same way our own scanner does it. It doesn’t account for colour profiles, monitor calibration or gamut — the same numbers can look slightly different from screen to screen. For whether a colour pair actually passes WCAG, use the contrast checker above the fold on this section.
One colour is a start. Your whole site is more.
Getting a colour value right is one small step. Point our free scanner at a real URL and it checks the whole page against WCAG 2.2 — contrast included — and tells you what to fix first, with the legal context for the site’s jurisdiction.
Want the full pass/fail matrix for a colour pair? Try the contrast checker, or see what our scanner covers, criterion by criterion.
Other free checkers
Colour contrast checker
Enter two colours and get a live WCAG 2.2 AA/AAA pass or fail for normal text, large text and UI — hex, RGB or HSL.
Colour blindness simulator
Upload an image, or use the built-in sample, and see it approximated for protanopia, deuteranopia and tritanopia side by side.
Colour palette generator
Generate complementary, triadic and other harmonious palettes — every swatch shows its readable text colour, WCAG contrast ratio and AA pass/fail.