HEX vs RGB vs HSL Color Codes

They all describe the same colors

Every color on a screen is made by mixing three lights: red, green and blue. HEX, RGB and HSL are simply three ways of writing down how much of each you want. Convert one to another and you get the identical pixel — the choice is about which notation is easiest for the task in front of you.

HEX — compact and copy-friendly

A HEX code looks like #2563EB. After the # come three pairs of characters for red, green and blue, each written in base-16 (hexadecimal) from 00 (none) to FF (full). So #FF0000 is pure red and #000000 is black. HEX is short, easy to copy, and the most common way to write colors in CSS and design tools. The downside: it is hard to eyeball — you cannot tell at a glance how to make #2563EB a little lighter.

RGB — the same numbers, in plain decimal

RGB writes the three channels as ordinary numbers from 0 to 255: rgb(37, 99, 235) is the same blue as #2563EB. An optional fourth value, alpha, sets transparency: rgba(37, 99, 235, 0.5) is half-transparent. RGB is useful when you are working with numbers in code, or when you need an opacity value.

HSL — the one built for humans

HSL stands for Hue, Saturation, Lightness, written like hsl(222, 83%, 53%):

• Hue (0–360°) is the color itself on a color wheel: 0 is red, 120 is green, 240 is blue.
• Saturation (0–100%) is how vivid it is, from grey to full color.
• Lightness (0–100%) is how bright it is, from black through the color to white.

HSL is the easiest to adjust by hand. Want a lighter shade of the same color? Raise the lightness. A muted version? Lower the saturation. A whole palette? Keep the hue and vary the other two. That is why designers love it for building color schemes.

Which should you use?

• HEX: for copying a fixed color into CSS or a design file — short and universal.
• RGB: when you are calculating colors in code, or need transparency (rgba).
• HSL: when you want to tweak a color or build a palette by hand.

Because all three describe the same colors, you can switch freely. A converter lets you paste a color in any format and instantly see the other two, with a live preview swatch.

Try the free Color Converter →
Switch a colour between HEX, RGB and HSL with a live swatch and one-click copy.

Frequently asked questions

Are HEX, RGB and HSL different colors?

No. They are three notations for the same screen colors. Convert between them and you get the exact same pixel — only the way of writing it changes.

Which color format is best for CSS?

All three work in modern CSS. HEX is the most common for fixed colors, RGB/RGBA is handy when you need transparency, and HSL is easiest when you want to adjust a color by hand.

How do I make a color lighter?

It is easiest in HSL: just increase the lightness value. In HEX or RGB you would have to raise all three channels by the right amounts, which is harder to do by eye.