Hex, RGB and HSL Colour Values Explained Simply

Q: Can I mix colour formats in the same CSS file?

Yes. Browsers accept hex, RGB, HSL and named colours like tomato anywhere a CSS colour is expected. You can freely mix them in one file, though sticking to one or two formats keeps your stylesheet easier to maintain.

Q: What does the # symbol mean in a hex colour?

The # is just a prefix that tells the browser (or any tool reading the value) that what follows is a hexadecimal colour code. It has no numeric value of its own - remove it and the six-character code loses its meaning as a colour.

By Deepak·June 26, 2026

Hex, RGB and HSL colour values are three different ways to write the same colour so that browsers and design tools can display it. Each format suits a different job - once you know what each one is for, picking the right one becomes easy.

What Are Hex, RGB and HSL Colour Values?

Every colour on a screen is made by mixing red, green and blue light. The three formats below just describe that mix in different ways.

Format	Example	Best for
Hex	`#FF6B35`	Copying colours between tools, design hand-off
RGB	`rgb(255, 107, 53)`	CSS, when you need to set opacity separately
HSL	`hsl(18, 100%, 60%)`	Creating colour palettes, adjusting lightness in code

All three examples in that table describe the exact same orange. The format is just the language you use to say it.

Hex Colours: The Six-Character Code

A hex colour (short for hexadecimal) is a six-character code that starts with a #. The six characters split into three pairs: the first pair is red, the second is green, the third is blue.

Hexadecimal counts from 0 to 9, then A to F - so it has 16 digits instead of the usual 10. Each pair runs from 00 (none of that colour) to FF (full intensity).

#FF0000 - pure red (red maxed, green and blue zeroed)
#00FF00 - pure green
#0000FF - pure blue
#FFFFFF - white (all maxed)
#000000 - black (all zeroed)

You may also see a three-character shorthand like #F63. The browser just doubles each digit: #FF6633. This only works when both digits in each pair are identical.

RGB Colours: Red, Green and Blue as Numbers

RGB writes the same three channels as plain numbers from 0 to 255. rgb(255, 107, 53) means: red at 255, green at 107, blue at 53.

The big advantage over hex is that RGB values are human-readable without mental arithmetic. It also unlocks rgba() - add a fourth value (the alpha channel, meaning opacity) from 0.0 (invisible) to 1.0 (fully solid).

/* CSS - a semi-transparent orange overlay */
.overlay {
  background-color: rgba(255, 107, 53, 0.5);
}

Modern CSS lets you write rgb(255 107 53 / 0.5) without commas. Both work in all current browsers.

HSL Colours: Hue, Saturation and Lightness

HSL stands for hue, saturation, and lightness. Instead of describing colours by their light components, it describes them the way a human would.

Hue - the base colour, expressed as a degree on a colour wheel (0° = red, 120° = green, 240° = blue)
Saturation - how vivid the colour is, from 0% (grey) to 100% (full colour)
Lightness - how light or dark it is, from 0% (black) to 100% (white)

HSL makes it straightforward to create colour variations in code. Want a lighter shade of your brand colour? Just nudge the lightness up. You never need to touch the hue.

/* CSS - base colour and two tints from the same hue */
:root {
  --brand:       hsl(18, 100%, 60%);
  --brand-light: hsl(18, 100%, 80%);
  --brand-dark:  hsl(18, 100%, 40%);
}

Like RGB, HSL supports an alpha channel: hsla(18, 100%, 60%, 0.5) or the newer hsl(18 100% 60% / 0.5).

How to Convert Between Hex, RGB and HSL

Browsers do this for you automatically - a colour written in any format renders identically. You only need to convert when a tool, a design file, or an older codebase expects a specific format.

For quick conversions, a free online colour picker handles it in seconds. If you want to see the underlying maths, the W3C CSS Color Level 4 spec documents the exact algorithms.

For number-base conversions (useful when you want to understand why FF equals 255), our hex to decimal converter breaks it down step by step.

Common Mistakes with Colour Formats

Confusing hex case

Hex is case-insensitive: #ff6b35 and #FF6B35 are identical. Consistency in your codebase matters more than which case you pick.

Using the short hex shorthand incorrectly

#F63 expands to #FF6633, not #F00600300. You can only use the three-character form when each pair of digits is a double - #1A2B3C cannot be shortened.

Forgetting that HSL lightness 50% is not neutral

At full saturation, hsl(0, 100%, 50%) is pure red. Lightness 50% is the midpoint between black and white for that hue - it is not a grey.

Alpha syntax mismatches

The comma-free syntax (rgb(255 107 53 / 0.5)) is supported in all modern browsers but will fail in Internet Explorer. If you support IE, stick with rgba().

Which Format Should You Use?

Here is a simple rule of thumb:

Use hex when copying colours from a design tool like Figma or when adding a colour to a CSS variable that never changes.
Use RGB / RGBA when you need to control opacity, or when you are manipulating colour values with JavaScript.
Use HSL when you are building a palette or a theme system and want to create lighter/darker variants without picking new colours by hand.

There is no wrong choice for most projects - pick what makes the code readable to the next person who opens it.

Understanding hex, RGB and HSL colour values explained side by side shows that the formats are just three dialects of the same idea. Master all three and colour problems stop being mysterious. For data format conversions elsewhere in your project, tools like our JSON to YAML converter and Unix timestamp converter follow the same principle: the same data, written a different way for a different tool.

The MDN documentation on CSS color values is the most complete reference if you want to go deeper into colour functions, colour spaces, and browser support tables.

Frequently Asked Questions

What is the difference between hex and RGB colour values?

Hex and RGB represent the same red, green and blue channels. Hex encodes each channel as a two-digit hexadecimal number (00–FF), while RGB writes them as plain decimal numbers (0–255). #FF6B35 and rgb(255, 107, 53) produce the same colour. RGB also supports an alpha (opacity) channel more intuitively via rgba().

Why would I use HSL instead of hex or RGB?

HSL lets you think in human terms: hue (the colour family), saturation (how vivid), and lightness (how bright). Adjusting a shade is as simple as changing the lightness percentage. With hex or RGB you would need to recalculate all three channels - HSL keeps the same colour family with one edit.

Can I mix colour formats in the same CSS file?

Yes. Browsers accept hex, RGB, HSL and named colours like tomato anywhere a CSS colour is expected. You can freely mix them in one file, though sticking to one or two formats keeps your stylesheet easier to maintain.

What does the # symbol mean in a hex colour?

The # is just a prefix that tells the browser (or any tool reading the value) that what follows is a hexadecimal colour code. It has no numeric value of its own - remove it and the six-character code loses its meaning as a colour.