Utilore

Colour Converter

Type a colour in any common notation — #1f5fd6, 1f5fd6, #1f5, rgb(31, 95, 214) — and all the other forms appear at once, along with the contrast figures you need for readable text.

  • #1f5fd6 HEX
  • rgb(31, 95, 214) RGB
  • hsl(219, 75%, 48%) HSL

Contrast:

How to use

Good to know

Three notations for the same colour

HEX is compact and universal in CSS. RGB names the channels outright, which matters when a value is calculated rather than written by hand. HSL describes hue, saturation and lightness — the form to reach for when you want the same colour a shade lighter, because you change one number instead of guessing three.

Contrast is not decoration

Under WCAG, body text needs a ratio of at least 4.5:1 against its background, and large text at least 3:1. The two figures shown here tell you immediately whether this colour can carry white text, black text, or neither — before the design goes to a developer.

Frequently asked questions

Which formats are accepted?

Three-, four-, six- and eight-digit HEX, with or without the hash, plus rgb() and rgba() with commas or spaces. Alpha is kept and shown in the HEX value.

Why does HSL sometimes show a slightly different colour?

HSL values are rounded to whole numbers for readability, so the round trip can shift by one unit in a channel. The HEX and RGB values are exact.

Is anything sent to a server?

No. Everything is calculated on the page — brand colours from an unreleased design stay on your machine.

Related tools