Skip to content
Webmaster.ae
  • Loading…
Webmaster.ae
Start a projectPricing
Runs in your browserFree · no sign-up

Colour converter (HEX, RGB, HSL)

Enter a colour in HEX, RGB or HSL to get the other two formats, ready to paste into CSS. It also tells you whether black or white text is more readable on that colour.

Live resultUpdates as you type

Press “Convert colour” to see the result here.

How do I use the colour converter (HEX, RGB, HSL)?

  1. Enter a colour such as #12d18e or rgb(18, 209, 142).
  2. Press Convert colour.
  3. Copy the format you need into your CSS or design tool.

Colour converter (HEX, RGB, HSL): frequently asked questions

Which colour format should I use in CSS?

HEX is the most common. HSL is easier when you want lighter or darker shades of the same colour.

What is a 3-digit hex colour?

A shorthand where each digit is doubled, so #0af is the same as #00aaff.

What colour formats can I convert?

HEX, RGB, HSL and others used in CSS and design tools.

What is the difference between RGB and HSL?

RGB mixes red, green and blue light; HSL describes hue, saturation and lightness, which is easier to adjust by hand.

What is a HEX colour?

A six-digit hexadecimal code like #00C389 representing red, green and blue values.

What do eight-digit HEX codes mean?

The last two digits set transparency.

Do CMYK values match exactly?

Screen-to-print conversions are approximate; ask your printer for a proof.

What is OKLCH?

A modern colour space with more even perceived lightness, supported in current browsers.

How do I keep brand colours consistent?

Define them once as design tokens and reuse them in Figma and CSS.

Can I check contrast too?

Yes, with the contrast checker.