NNonkera
Developer ToolsUpdated July 31, 2026

HEX vs. RGB vs. HSL: How CSS Colors Actually Work

What HEX, RGB, and HSL color codes actually represent, when to reach for each one, and why HSL is often the easiest format for adjusting a color.

Three formats, one color

HEX, RGB, and HSL don't represent different colors — they're three different notations for describing the exact same color, and converting between them never changes what color is actually being described, only how it's written down. All three are natively, interchangeably supported in modern CSS, so choosing between them is purely about which one is easiest to work with for a given task.

HEX: compact and ubiquitous

A HEX code like #4f46e5 packs red, green, and blue values into a six-digit base-16 (hexadecimal) code — the first two digits are red, the middle two are green, the last two are blue, each ranging from 00 to ff (0–255 in decimal). Its main advantage is compactness: it's the shortest common way to write a precise color, which is exactly why it's become the default for pasting a color value quickly into code, a design tool, or a chat message.

RGB: the same values, spelled out

RGB writes out the identical red, green, and blue values as plain decimal numbers — rgb(79, 70, 229) is the exact same color as #4f46e5, just in base 10 instead of base 16. RGB is useful when you need to reason about or programmatically manipulate individual color channels, since the numbers are immediately readable without a hex-to-decimal mental conversion.

HSL: the format built for adjusting a color

HSL describes a color by hue (position on a 0–360° color wheel), saturation (how vivid vs. gray), and lightness (how close to black or white). This maps far more naturally onto how people actually think about tweaking a color than RGB or HEX do — "make this a bit darker" is a straightforward lightness decrease in HSL, but requires recalculating all three RGB channels by hand to achieve the same effect. This is exactly why HSL is often the most convenient format for generating a consistent set of tints and shades from one base brand color, or for building a hover/active state that's a slightly darker or lighter version of a base color.

Which one to actually use

For pasting or storing a fixed color value, HEX's compactness makes it the common default. For programmatically blending colors or checking individual channel values, RGB's plain decimal numbers are the most direct to work with. For deliberately adjusting a color's character — lighter, darker, more or less saturated — HSL is generally the most intuitive to reason about, since its three components map directly onto the kind of adjustment you're usually trying to make.

Frequently asked questions

Do HEX, RGB, and HSL represent different colors?

No — they're three notations for the same color. Converting between them never changes the actual color, only how it's written.

Which color format is easiest to adjust lightness with?

HSL — its lightness component can be increased or decreased directly, unlike RGB or HEX, which require recalculating all three channels to achieve the same visual effect.

Are all three formats supported in CSS?

Yes — HEX, RGB, and HSL are all natively, interchangeably supported in modern CSS with identical rendering results.

What does each pair of digits in a HEX code represent?

The first two digits represent red, the middle two green, and the last two blue, each as a two-digit hexadecimal value from 00 to ff.

Can I convert a 3-digit HEX shorthand, like #fff?

Yes — a 3-digit shorthand expands to a full 6-digit HEX code by doubling each digit (#fff becomes #ffffff) before converting.