# HEX, RGB and HSL: three ways to write the same colour, how to convert between them, and which one to use

> A designer sends #6366F1, your code wants rgb(), and the style guide says hsl(). They are all the same purple. Here is how each format is built, how to convert by hand and with a tool, how to make lighter and darker shades, and the small rounding surprise that shifts a colour by one step.

Published 2026-10-23 by Toolcloak. 6 minute read. Original: https://toolcloak.com/articles/hex-rgb-and-hsl-three-ways-to-write-the-same-colour
Related free tool: [Color Converter](https://toolcloak.com/tools/color-converter)

Colour on a screen has one truth and several spellings. A brand guide gives you a HEX code, a stylesheet may want rgb(), a design tool shows HSB, and the person who says “just make it a bit lighter” is really talking about HSL. Mixing them up is where mistakes start: a missing digit, a percentage sign in the wrong place, a code that looks right but is a different colour. This guide explains how each format is built, so you can convert in your head when you must and with a tool when you can.

> **In short**
> - A screen colour is **three numbers from 0 to 255**: red, green and blue. HEX, RGB and HSL are three ways to write them.
> - **HEX** writes the three numbers as three two-digit pairs: `#6366F1` is red 99, green 102, blue 241.
> - **HSL** describes the same colour as hue (0 to 360 degrees), saturation and lightness, which is easier for making shades.
> - The [Color Converter](https://toolcloak.com/tools/color-converter) takes a **six-digit HEX code** and shows HEX, RGB, RGBA, HSL, HSLA and HSV, each with a Copy button.
> - Keep the **original HEX** as your master. Converting back from rounded HSL can land one step away.

## How a screen colour is stored

Every pixel mixes three lights: red, green and blue. Each light has 256 levels, from 0 (off) to 255 (full). Three channels with 256 levels each give 256 × 256 × 256 = 16,777,216 possible colours. Every format on this page is just a different way of writing those three numbers, or a different way of looking at them.

**The numbers behind a screen colour**

|  | Value | Note |
| --- | --- | --- |
| Channels | 3 | Red, green and blue |
| Levels per channel | 256 | 0 is off, 255 is full |
| Colours in all | 16.7M | 256 × 256 × 256 = 16,777,216 |
| HEX digits | 6 | Two for each channel |

*Black is 0, 0, 0 and white is 255, 255, 255. Pure red is 255, 0, 0. Every grey has the same number in all three channels.*

## Convert between HEX and RGB by hand

HEX is base 16, where the digits run 0 to 9 and then A to F for 10 to 15. Each channel is a pair of digits. To read a pair, multiply the first digit by 16 and add the second.

| Channel | HEX pair | Working | Value |
| --- | --- | --- | --- |
| Red | `63` | 6 × 16 + 3 | 99 |
| Green | `66` | 6 × 16 + 6 | 102 |
| Blue | `F1` | 15 × 16 + 1 | 241 |

*So #6366F1 is rgb(99, 102, 241). Case does not matter: #6366f1 is the same colour.*

To go the other way, divide each number by 16. The whole part is the first digit and the remainder is the second. Take green 87 from rgb(255, 87, 51): 87 ÷ 16 is 5 remainder 7, so the pair is `57`. Red 255 is 15 remainder 15, which is `FF`, and blue 51 is 3 remainder 3, which is `33`. That gives #FF5733. If base 16 is new to you, our guide to [counting in bases 2, 10 and 16](https://toolcloak.com/articles/binary-hex-and-decimal-counting-in-bases-2-10-and-16) explains why it is used.

## How to use the Color Converter

1. Open the [Color Converter](https://toolcloak.com/tools/color-converter).
2. Pick a colour with the colour box, or type a HEX code in the field. The page starts with #6366F1.
3. Read the rows: **HEX, RGB, RGBA, HSL, HSLA and HSV**.
4. Press **Copy** next to the one you need. The button turns green and says “Copied”.

Try it: [Color Converter](https://toolcloak.com/tools/color-converter). Pick a colour or type a HEX code, then copy it in the format you need.

> **Type all six digits:** The converter reads full six-digit codes, so write `#ff0000` rather than the shorthand `#f00`. It works in one direction: from HEX out to the other formats. To start from an RGB or HSL value, use the hand method above, or pick the colour in the colour box.

## The same colour, six ways

Here is one colour, #FF5733, as the tool writes it. Notice that the first four rows carry the same information, and the last two describe the colour from a different angle.

| Format | How the tool writes it | What it means |
| --- | --- | --- |
| HEX | `#FF5733` | Three pairs: red, green, blue |
| RGB | `rgb(255, 87, 51)` | The same three numbers, in decimal |
| RGBA | `rgba(255, 87, 51, 1)` | RGB plus opacity. 1 is solid, 0 is invisible |
| HSL | `hsl(11, 100%, 60%)` | Hue 11 degrees, fully saturated, 60 percent light |
| HSLA | `hsla(11, 100%, 60%, 1)` | HSL plus opacity |
| HSV | `hsv(11, 80%, 100%)` | Hue, saturation and value, as many design tools show it |

*The tool always writes 1 for opacity. To make a colour half see-through, change the last number to 0.5 yourself.*

## HSL: the format made for shades

HEX and RGB tell you how much of each light to mix, which is hard to picture. HSL describes the colour the way people talk about it. **Hue** is the position on the colour wheel, in degrees. **Saturation** is how vivid it is, from grey at 0 percent to full colour at 100. **Lightness** runs from black at 0 percent through the pure colour at 50 to white at 100.

**Hue on the colour wheel (degrees)**

| Zone | From | To |
| --- | --- | --- |
| Red to yellow | 0 | 60 |
| Yellow to green | 60 | 120 |
| Green to cyan | 120 | 180 |
| Cyan to blue | 180 | 240 |
| Blue to magenta | 240 | 300 |
| Magenta to red | 300 | 360 |

*Pure red is hue 0, yellow 60, green 120, cyan 180, blue 240 and magenta 300. The tool confirms each of these. Our starting purple sits at 239, just short of pure blue.*

The practical gain is in shades. To make a hover colour darker or a background lighter, keep the hue and the saturation and change only the lightness. Starting from the tool’s default, hsl(239, 84%, 67%):

| Lightness | HSL | Same colour as RGB |
| --- | --- | --- |
| 80 percent (lighter) | `hsl(239, 84%, 80%)` | `rgb(161, 163, 247)` |
| 67 percent (the original) | `hsl(239, 84%, 67%)` | `rgb(100, 103, 242)` |
| 50 percent (richer) | `hsl(239, 84%, 50%)` | `rgb(20, 24, 235)` |
| 35 percent (darker) | `hsl(239, 84%, 35%)` | `rgb(14, 17, 164)` |

*Doing the same by editing a HEX code would mean changing three numbers at once and guessing. For a ready-made ladder of shades, use the [Color Shades Generator](https://toolcloak.com/tools/color-shades-generator).*

**Round trip: why to keep the original HEX**

| The original | Back from rounded HSL |
| --- | --- |
| rgb(99, 102, 241) | rgb(100, 103, 242) |
| Exact: this is the HEX code you started with | HSL is shown in whole numbers |
| Safe to share as the brand colour | Each channel lands one step higher |
|  | Invisible to the eye, but not identical |

*Converting HEX to HSL and back through whole-number values can shift a channel by one. Treat the first HEX code as the master and convert from it every time.*

## HSL against HSV

The converter shows HSV as well. It looks like HSL, but its third number, **value**, means brightness. At 100 percent value the colour is as bright as it can be, but it is not necessarily light: pure red is hsv(0, 100%, 100%) and hsl(0, 100%, 50%). Many colour pickers in image editors use this model, under the name HSB. If a design tool and a stylesheet seem to disagree about “saturation”, this is usually why.

| Colour | HEX | RGB | HSL | HSV |
| --- | --- | --- | --- | --- |
| Pure red | `#FF0000` | 255, 0, 0 | 0, 100%, 50% | 0, 100%, 100% |
| Pure blue | `#0000FF` | 0, 0, 255 | 240, 100%, 50% | 240, 100%, 100% |
| Orange | `#FFA500` | 255, 165, 0 | 39, 100%, 50% | 39, 100%, 100% |
| Mid grey | `#808080` | 128, 128, 128 | 0, 0%, 50% | 0, 0%, 50% |
| White | `#FFFFFF` | 255, 255, 255 | 0, 0%, 100% | 0, 0%, 100% |

*Greys have no hue, so the tool shows 0. When red, green and blue are equal, the hue number carries no meaning.*

## Which format should you use?

**Pick by the job**

| Box | What it means |
| --- | --- |
| Sharing a brand colour | Use **HEX**. It is short, it has no spaces and everyone recognises it. |
| Making shades and hover states | Use **HSL**. Change only the lightness and the hue stays put. |
| A see-through overlay | Use **RGBA or HSLA** and set the last number between 0 and 1. |
| Matching a design tool | Check whether it shows **HSB or HSV**, and do not paste those numbers into an hsl() function. |

*Browsers understand all of these in CSS, so the choice is about how easy the code is to read and change, not about how it looks.*

## Common mistakes

- **Dropping the hash or a digit.** `#6366F` is five digits and is not a valid colour. A valid code has six digits, or three in shorthand.
- **Copying HSV numbers into CSS hsl().** The two models share a name for two of their numbers but not their meaning.
- **Forgetting the percent signs.** In hsl(), saturation and lightness take percentages, while the hue is plain degrees.
- **Matching colours by eye.** Two codes that differ by a few steps look identical on one screen and different on another. Compare the numbers instead.
- **Trusting a colour name.** CSS has only about 140 named colours, so most colours have no standard name.

## Related checks for a colour you have chosen

Once you have the right code, check that text on top of it can be read. The [Contrast Checker](https://toolcloak.com/tools/contrast-checker) gives the ratio, and our guide on [the contrast ratio](https://toolcloak.com/articles/is-your-text-readable-the-contrast-ratio-explained) explains the targets. To lift a colour out of a photo or logo, use the [Image Color Extractor](https://toolcloak.com/tools/image-color-extractor). For a set of colours that go well together, try the [Color Palette Generator](https://toolcloak.com/tools/color-palette-generator), and for a quick pick the [Color Picker](https://toolcloak.com/tools/color-picker). If your logo is an SVG that you now need as a picture, see [how to convert SVG to PNG](https://toolcloak.com/articles/how-to-convert-svg-to-png-pick-the-right-size-keep-the-background-transparent-and-fix-missing-fonts).

## Frequently asked questions

### How do I convert HEX to RGB?

Split the six-digit code into three pairs and turn each pair into a number from 0 to 255 by multiplying the first digit by 16 and adding the second. For #6366F1 that gives 99, 102 and 241. The Color Converter does it instantly and shows RGB, HSL and more.

### hex color code ko rgb mein kaise badle?

Color Converter kholiye, colour chuniye ya HEX code likhiye jaise #6366F1. Neeche RGB, HSL aur baaki formats dikhenge, aur Copy dabane se copy ho jayenge. Haath se karna ho to har pair ko 16 se guna karke jodiye.

### What is the difference between HSL and HSV?

Both use hue and saturation, but the third number differs. In HSL it is lightness, where 100 percent is white. In HSV it is value, where 100 percent is the brightest version of the colour. The same colour has different saturation numbers in the two.

### How many colours can HEX codes represent?

A six-digit HEX code has 256 levels for each of red, green and blue, so 256 × 256 × 256 = 16,777,216 colours.

### Does the Color Converter accept RGB or HSL input?

No. It starts from a HEX code, typed or picked with the colour box, and shows the other formats. To start from RGB or HSL, convert by hand or pick the colour visually.

### Why does my colour change by one step after converting back?

HSL values are shown as whole numbers, so some precision is rounded away. Converting back can move a channel by one, for example from 99, 102, 241 to 100, 103, 242. Keep the original HEX code as the master.

### What does the last number in rgba() and hsla() mean?

It is opacity, from 0 (fully transparent) to 1 (fully solid). The converter writes 1. Change it to 0.5 for a half see-through colour.

### How do I make a colour lighter or darker?

Convert it to HSL and change only the lightness number, keeping hue and saturation the same. Higher lightness is lighter and lower is darker. The Color Shades Generator builds a whole ladder for you.