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

  1. Type or paste the colour, or pick one with the swatch.
  2. Read HEX, RGB and HSL side by side.
  3. Copy the notation your file needs.

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.

Sources

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