Colour Code Conversion: HEX, RGB and HSL Explained

Colour Code Conversion: HEX, RGB and HSL Explained

You have a colour that looks right on screen, but the code you copied will not paste into the next tool. Colour code conversion fixes that mismatch. This guide explains how HEX, RGB and HSL describe the same colour in different ways, when to use each format, and how to move between them without guessing.

Colour codes are just three numbers wearing different uniforms. Once you see the pattern, converting between them becomes routine rather than a memory test.

The three formats in one view

A colour code is a written instruction that tells a screen how much red, green and blue light to emit. Every format below encodes the same three channels; they differ in how they expose those channels to you.

HEX: six characters, two per channel

HEX is a base-16 notation. Each pair of characters represents one channel on a scale from 00 to FF.

• #3B7DD8 splits into 3B (red), 7D (green), D8 (blue).
• 00 means none of that channel; FF means full intensity.
• Three-digit shorthand like #38D expands to #3388DD — useful for quick edits, less precise for fine work.

Base-16 means sixteen symbols: 0-9 then A-F. So FF equals 255 in decimal. That single fact is the bridge between HEX and RGB, and it is the only arithmetic you need.

RGB: the same values in decimal

RGB expresses those channels as three integers from 0 to 255. It is what most screens and scripting environments expect.

#3B7DD8 becomes rgb(59, 125, 216). The red channel 3B is 3 × 16 + 11 = 59. Green 7D is 7 × 16 + 13 = 125. Blue D8 is 13 × 16 + 8 = 216.

An optional fourth value adds alpha, which controls opacity: rgba(59, 125, 216, 0.5) is the same colour at half opacity. Alpha is not part of the colour itself, so it does not convert into HEX or HSL unless you deliberately carry it across.

HSL: describing colour the way people talk about it

HSL stands for hue, saturation and lightness. It maps more closely to how you describe colour in conversation.

• Hue is the position on a 360-degree colour wheel. 0 is red, 120 is green, 240 is blue.
• Saturation is a percentage. 0% is grey; 100% is the most vivid version of that hue.
• Lightness is a percentage. 0% is black, 100% is white, 50% is the midpoint.

#3B7DD8 is hsl(214, 66%, 54%). Hue 214 sits in the blue range, saturation 66% keeps it from looking washed out, and lightness 54% places it slightly above the middle.

The practical payoff: if you want a lighter tint of a brand colour, change one number in HSL. In HEX you would have to recalculate all three channels.

How to convert a colour code step by step

1. Identify the format you have. A leading # with six characters is HEX. A function with three comma-separated numbers is RGB. Three values where the first is 0-360 is HSL.
2. If you have HEX, split it into three pairs and convert each pair from base 16 to decimal. 3B → 59, 7D → 125, D8 → 216.
3. If you have RGB and need HEX, convert each decimal value back to base 16 and pad with a leading zero where needed. 59 → 3B, 125 → 7D, 216 → D8.
4. For HSL, convert to RGB first, then to HEX if required. Work through one channel at a time rather than trying to hold all three in your head.
5. Verify the result by pasting it back into the source tool. A single transposed character produces a visibly different colour, and reading the numbers will not always catch it.
6. If you are converting a whole palette, use a browser-based colour converter so the arithmetic happens consistently across every swatch.

For a one-off conversion, the arithmetic above is fast enough. For a palette of twenty brand colours, manual work invites errors.

What is the difference between HEX, RGB and HSL?

HEX, RGB and HSL encode the same colour information in different notations. HEX writes each channel as two base-16 characters, RGB writes them as three decimal numbers from 0 to 255, and HSL describes the colour as a hue angle plus saturation and lightness percentages. All three render identically on screen.

That paragraph is the short answer. The longer answer is about workflow: HEX is compact for stylesheets, RGB matches what scripting environments return, and HSL is easier to reason about when you are adjusting a colour rather than copying it.

Converting HEX to RGB accurately

If you need to convert HEX to RGB by hand, the rule is two characters in, one decimal number out. Read each pair as base 16, then write the three results in order.

Three things cause most mistakes here:

• Forgetting that letters are values. A is 10, B is 11, up to F at 15.
• Dropping a leading zero. #0A1B2C has a red channel of 10, not 1.
• Assuming shorthand is exact. #38D and #3388DD are the same colour, but #3B7DD8 cannot be shortened.

If the source value is already RGB and you need HEX, run the same operation in reverse and pad every result to two characters. 5 becomes 05, not 5.

Converting RGB to HSL when you need to adjust a colour

Converting RGB to HSL is the step worth doing when you plan to change a colour rather than just record it. Hue, saturation and lightness give you independent controls.

A common workflow: take an existing RGB value, convert it to HSL, keep the hue fixed, then raise or lower lightness to generate a tint and shade ramp. Because the hue never moves, every swatch in the ramp still reads as the same colour family.

This is also why design systems often store colours in HSL internally. It is not because HSL is more accurate — it is not — but because it makes systematic variation simpler to express. When the palette is final, the values are usually exported as HEX for the stylesheet.

Converting HSL to HEX for stylesheets

Converting HSL to HEX is the final step before a colour ships into CSS or a design file. Most style guides expect HEX, even when the palette was designed in HSL.

The conversion runs through RGB. Convert the hue, saturation and lightness into three channel values between 0 and 255, then write each as two base-16 characters. Rounding matters at this stage: a channel that lands on 127.6 will round to 128, and that can shift the final HEX by one step.

Do not round intermediate results. Carry the full value through and round only at the end.

Building a palette you can maintain

A colour code conversion workflow pays off most when you are maintaining a palette over time, not just producing one screen.

• Pick one format as the source of truth and document it.
• Generate variations in HSL, where the controls are independent.
• Export final values as HEX for stylesheets and design handoff.
• Keep alpha separate from the base colour so opacity changes do not fork your palette.

If your team stores the same colour in two formats, one will drift. Pick one and convert on demand.

Where browser tools help and where they do not

A browser-based converter handles the arithmetic instantly and removes transcription errors, which is the main benefit. It runs locally in your browser, so nothing is uploaded.

Be realistic about the limits. A converter cannot tell you whether a colour is accessible against its background, whether it matches your brand guidelines, or whether it will look right on a different display. It converts notation; it does not judge design. Contrast checking and colour management are separate tasks, and you should not assume a conversion tool covers them.

FAQ

#### Can HEX, RGB and HSL represent the same colours?

Yes. All three describe the same red, green and blue channels, so any colour expressible in one format is expressible in the others. The only exception is alpha transparency, which RGB can carry as a fourth value but HEX and HSL express through separate notations such as eight-digit HEX or hsla().

#### Why does my converted colour look slightly different?

The most common cause is rounding. Channel values that do not land on whole numbers get rounded, and repeated conversion between formats can shift a colour by a step or two. Convert once, then store the result rather than converting back and forth. Display calibration can also make identical values look different on two screens.

#### Which format should I use in CSS?

Use HEX for solid colours in stylesheets — it is compact and universally supported. Use RGB or RGBA when you need alpha transparency as part of the value. Use HSL when you are generating variations programmatically or when readability of the palette matters more than brevity.

#### Do I need to convert alpha values too?

Alpha is separate from the colour channels, so handle it deliberately. A four-value RGB notation and an eight-digit HEX both carry opacity, but a standard six-digit HEX does not. If you drop alpha during conversion, a semi-transparent colour becomes fully opaque.

#### Is HSL more accurate than RGB?

No. HSL and RGB describe the same colour space with different coordinates, so neither is more precise. HSL is often easier to reason about when you adjust a colour, and RGB is closer to what screens and scripts work with directly. Choose based on the task, not on accuracy.

Getting the conversion right the first time

The formats are not competing standards; they are three ways of writing the same three numbers. HEX keeps values short for stylesheets, RGB matches what screens and scripts exchange, and HSL gives you independent controls for adjusting a colour rather than just recording it. Once you know that FF equals 255 and that hue is an angle, colour code conversion stops being guesswork.

Work in one format, convert deliberately, and keep a browser-based converter open for the bulk jobs. For related browser utilities, browse the full tool collection.