Colour Converter (HEX, RGB, HSL)

This color converter changes a colour between HEX, RGB and HSL as you type, so you can copy whichever format your CSS, Figma file or brand guide needs. (CSS uses the American spelling color; we use “colour” in the text.)

How to use the color converter

1. Type a colour into any field: HEX (for example #ff9933), RGB or HSL. You can also choose a colour with the colour picker.
2. The other formats update as you type, and the swatch shows the colour so you can confirm it is the one you meant.
3. Press a copy button to copy the value you need into your CSS or design file.
4. Read the OKLCH line if you want a modern oklch() value. Treat it as an approximation (see below).

Different ways to write the same colour

HEX, RGB and HSL are all ways of describing a colour in the sRGB colour space, which is the standard space for the web. Here is saffron in each format:

Converting HEX to RGB is simple arithmetic. Each pair is a base-16 number: ff is 15 × 16 + 15 = 255, 99 is 9 × 16 + 9 = 153, and 33 is 3 × 16 + 3 = 51.

Modern and legacy CSS syntax

Current CSS writes rgb() and hsl() with spaces between the values and an optional / before the alpha (opacity) value. The older comma syntax still works everywhere, and rgba() and hsla() are now just aliases of rgb() and hsl().

.badge {
  /* each line gives the same saffron */
  background-color: #ff9933;
  background-color: rgb(255 153 51);
  background-color: hsl(30 100% 60%);
}

.badge-soft {
  /* the same colour at 20% opacity */
  background-color: rgb(255 153 51 / 0.2);
}

.badge-legacy {
  /* older comma syntax, still valid */
  background-color: rgba(255, 153, 51, 0.2);
}

Why designers like HSL

HSL is easy to adjust by hand. Keep the hue and saturation, lower the lightness, and you have a darker shade for a hover state: hsl(30 100% 60%) becomes hsl(30 100% 45%). Add 180 to the hue to get the colour opposite on the wheel.

What is oklch()?

oklch() describes colour in the OKLCH space, which is designed around how people see. L is perceived lightness from 0% to 100%, C is chroma (0 is grey; values above about 0.4 are rare), and H is the hue angle. Equal steps in L look like roughly equal steps in brightness, which makes it useful for building colour scales in a design system. According to MDN, oklch() has been widely available in browsers since May 2023.

OKLCH hue numbers are not the same as HSL hue numbers. Saffron has a hue of 30 in HSL but about 60 in OKLCH, so do not copy a hue from one to the other.

Learn more

• CSS Colors and Backgrounds
• CSS Variables (Custom Properties)
• Colour in UI Design
• Colour Theory for UI Designers: Practical Rules for Screens
• CSS Custom Properties as Design Tokens: A Practical Guide
• Colour Contrast Checker

Frequently asked questions