Hex, RGB, and HSL: A Practical Guide to Color on the Web

Color on the web is described in three common formats — hex, RGB, and HSL — that all specify the same sRGB color space using different notation. They are interchangeable in output: a given hex value, RGB triplet, and HSL triplet can all describe the identical pixel on screen. The reason three formats persist is that each one is convenient for a different task.

Hex: the compact default

Hexadecimal notation packs red, green, and blue into a single string prefixed with #. The most common form, #RRGGBB, uses two hex digits per channel, where each pair ranges from 00 to FF and maps to the decimal range 0 to 255. The color #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue. An extended form, #RRGGBBAA, adds an alpha channel for opacity, and shorthand forms like #RGB expand each digit to a repeated pair — so #F80 becomes #FF8800.

Hex is the default in HTML and CSS because it is compact, unambiguous, and easy to copy between design tools and stylesheets. Its weakness is legibility: a hex value tells you the exact color but gives you no intuition about how to adjust it. Staring at #3B82F6, it is not obvious whether nudging it toward a lighter tint means changing the first pair, the second, or the third.

# Common hex forms
#FF8800   # full RGB, opaque orange
#FF8800AA # RGB + alpha (AA = ~67% opacity)
#F80      # shorthand, expands to #FF8800

RGB: additive light channels

RGB describes color as three additive channels of light, each ranging from 0 to 255, where 0 means the channel is off and 255 means it is fully on. The function notation rgb(255, 136, 0) produces the same orange as #FF8800. A modern variant, rgba(), adds a fourth value between 0 and 1 for opacity, and the newer space-separated syntax rgb(255 136 0 / 0.5) lets you specify alpha without switching function names.

RGB mirrors how screens produce color. Every pixel on an LCD or OLED display is literally a set of red, green, and blue sub-pixels, so RGB maps cleanly onto hardware. That same property makes RGB unintuitive for humans: few people can look at rgb(47, 158, 246) and know it is a friendly sky blue without seeing it rendered. RGB is a precise description of output, not a natural description of perception.

HSL: perceptual and adjustable

HSL separates color into three components that match how people tend to think about color: hue, saturation, and lightness. Hue is an angle from 0 to 360 degrees around the color wheel, where red sits at 0, green at 120, and blue at 240. Saturation is a percentage from 0 (gray) to 100 (fully colored). Lightness is also a percentage, where 0 is black, 50 is normal, and 100 is white. The notation hsl(210, 90%, 60%) describes a specific light blue without making you reason about red, green, and blue channels.

HSL is the right format for building tints and shades. To produce a darker version of a color, drop the lightness. To produce a muted version, drop the saturation. To shift across an analogous palette, rotate the hue a few degrees. Doing the same tasks in RGB means re-balancing three correlated numbers, which is tedious and error-prone. HSL is also why color pickers in design tools are usually organized as a hue ring with a saturation-lightness square inside it — the model matches the gesture.

All three describe the same sRGB gamut

It is worth being precise about what these formats do not do. Hex, RGB, and HSL all describe colors in the sRGB color space, which is the common denominator of the web. None of them can express the wider gamuts available on modern displays — for that you need newer CSS color functions targeting P3 or similar wide-gamut spaces. If a color is outside the sRGB gamut, clipping will happen regardless of which of the three formats you use to write it down.

Conversion between hex, RGB, and HSL is lossless within sRGB: any color expressible in one is expressible in the other two, and round-tripping produces the original value, up to minor rounding in the HSL lightness and saturation percentages. Pick the format that fits the task — hex for copying values between tools, RGB when you need to reason about channel output, HSL when you are iterating on a palette — and convert as needed.

Choosing a format for the job

For hand-writing stylesheets, hex is usually the right default because it is short and universally supported. For programmatic color generation — building a palette from a base hue, computing hover states, or deriving accessible contrast ratios — HSL is easier to reason about and easier to make readable. RGB sits in the middle: useful when you are interfacing with image data, canvas pixels, or APIs that expose channels directly.

You can experiment with all three notations side by side, and copy values in whichever format your target tool expects, using the color picker. Pick a base color, watch how the same pixel is described in hex, RGB, and HSL, and the relationships between the three formats become intuitive quickly.