HEX vs RGB vs HSL: How to Convert Color Codes (With Examples)

Every colour on a web page is stored as a code. The same blue can be written as #0A6CE0, rgb(10, 108, 224) or hsl(213, 91%, 46%) — three formats, one colour. Here is what each format means, how to convert between them, and when each one is the better choice. To skip the maths, paste any code into the free Color Converter.

What is an RGB colour?

Screens mix red, green and blue light. RGB lists how much of each channel to use, on a scale from 0 to 255:

• rgb(255, 0, 0) is pure red, rgb(0, 0, 0) is black and rgb(255, 255, 255) is white.
• With 256 levels per channel there are 256 × 256 × 256 = 16,777,216 possible colours.
• Add a fourth value for transparency: rgba(10, 108, 224, 0.5), or in modern CSS rgb(10 108 224 / 50%).

What is a HEX colour code?

A HEX code is the same RGB values written in hexadecimal (base 16), which uses the digits 0–9 and the letters A–F. Each pair of characters is one channel:

• #0A6CE0 → 0A red, 6C green, E0 blue.
• Short form: #F09 is shorthand for #FF0099 — each digit is doubled.
• With transparency: modern CSS also accepts 4- and 8-digit codes, where the last digits are alpha, for example #0A6CE080.

What is HSL?

HSL describes a colour the way people talk about it:

• Hue — the position on the colour wheel, from 0° to 360° (0 = red, 120 = green, 240 = blue).
• Saturation — how vivid the colour is, from 0% (grey) to 100%.
• Lightness — from 0% (black) through 50% (the pure colour) to 100% (white).

Because hue stays fixed while you change lightness, HSL is the easiest way to build lighter and darker shades of one brand colour.

How to convert HEX to RGB

1. Split the code into three pairs: #0A6CE0 → 0A, 6C, E0.
2. Convert each pair from base 16: the first character × 16, plus the second. A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.
3. 0A = 0 × 16 + 10 = 10; 6C = 6 × 16 + 12 = 108; E0 = 14 × 16 + 0 = 224.

So #0A6CE0 = rgb(10, 108, 224). To go back, divide each value by 16: the whole number is the first digit and the remainder is the second.

How to convert RGB to HSL

1. Divide each channel by 255: 10 → 0.039, 108 → 0.424, 224 → 0.878.
2. Lightness = (largest + smallest) ÷ 2 = (0.878 + 0.039) ÷ 2 ≈ 0.46 → 46%.
3. Saturation = (largest − smallest) ÷ (1 − |2 × lightness − 1|) ≈ 0.839 ÷ 0.917 ≈ 91%.
4. Hue depends on which channel is largest. Here blue is largest, so hue = 60 × ((red − green) ÷ (largest − smallest) + 4) ≈ 213°.

Result: hsl(213, 91%, 46%). The steps are easy to get wrong by hand, which is why most designers use a converter.

HEX vs RGB vs HSL: which should you use?

• HEX — short, easy to copy from brand guidelines and design tools. The most common format in CSS.
• RGB / RGBA — handy when you need transparency or when a script calculates colours.
• HSL — best for creating colour systems: keep the hue, then change lightness for hover states, borders and backgrounds.
• CMYK — used for print. Screen-to-print conversion is only approximate, because printers use colour profiles, so always check a printed proof.

All three screen formats show exactly the same colour; pick whichever is easiest for the task.

How to convert HSL back to RGB or HEX

1. Work out the chroma: (1 − |2 × lightness − 1|) × saturation. For hsl(213, 91%, 46%) that is (1 − |0.92 − 1|) × 0.91 ≈ 0.837.
2. Find the intermediate value X = chroma × (1 − |(hue ÷ 60) mod 2 − 1|) and place chroma and X in the red, green or blue slots according to which 60° segment the hue falls in (213° falls in the 180°–240° segment, so blue gets the chroma and green gets X).
3. Add the same amount (lightness − chroma ÷ 2) to every channel, multiply by 255 and round. You get back to roughly rgb(10, 108, 224), and from there to #0A6CE0.

Small rounding differences of one unit are normal when you convert back and forth, because HSL percentages are rounded to whole numbers.

Using colour codes in CSS and design tools

Design tools such as Figma, Canva and Photoshop show HEX by default but let you switch to RGB or HSL. In CSS you can use any of the formats interchangeably — color: #0A6CE0;, color: rgb(10 108 224); and color: hsl(213 91% 46%); all paint the same text. A good habit is to define each brand colour once as a CSS custom property, for example --brand: #0A6CE0;, and reuse it everywhere. When you need a hover or background tint, switch to HSL and change only the lightness value, so every shade stays in the same family.

Check contrast before you use a colour for text

A colour can look great and still be hard to read. The Web Content Accessibility Guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (about 24px, or 18.5px bold). The Color Converter shows the ratio of your colour against white and black and suggests which text colour to use on top of it.

Tips for working with colour codes

• Need the exact colour from a logo or screenshot? Use the Image Color Picker, then convert the code.
• Keep a short list of brand colours in HEX and their HSL versions for shades.
• Store colours as CSS variables, then shrink your stylesheet with the CSS Minifier.
• Choosing images for the same page? See WebP vs PNG vs JPG.

Frequently asked questions