Skip to content

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.

Colour to convert

Accepts hex, rgb(), hsl() or the colour picker.

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

All free checkers