HEX, RGB, and HSL Color Codes Explained

If you build for the web, you will meet the same color written three different ways. HEX, RGB, and HSL all describe colors on screen, but they organize the information differently. Knowing what each one means, and when to reach for it, makes picking and tweaking colors far less of a guessing game.

RGB: how screens actually work

Screens make color by mixing red, green, and blue light. RGB notation states how much of each, from 0 to 255. So full red is red at 255 with no green or blue, and black is all three channels at zero. White is all three at maximum.

RGB maps directly to the hardware, which is why it is the foundation of every other notation. Its weakness is that the numbers are not intuitive. Looking at a mid-range trio of values, few people could tell you it is a forest green, or how to make it slightly lighter.

HEX: RGB in shorthand

HEX is the same RGB information written in base-16 for compactness. The format is a hash followed by six digits, two each for red, green, and blue. So a HEX of FF0000 is the same full red as the RGB version, because FF in hexadecimal equals 255. Black is six zeros and white is six F's.

HEX is everywhere in CSS and design tools because it is short and copy-pastes cleanly. It shares RGB's drawback, though: the codes are not human-readable. You cannot glance at a HEX string and know how to nudge it.

HSL: built for humans

HSL describes color the way people think about it: hue, saturation, and lightness. Hue is the color itself on a 360-degree wheel, where 0 is red, 120 is green, and 240 is blue. Saturation is how vivid it is, from 0 percent gray to 100 percent full color. Lightness runs from 0 percent black to 100 percent white, with 50 percent being the pure color.

The payoff is that HSL makes adjustments obvious. To create a darker shade of a button, keep the hue and saturation and lower the lightness. To build a row of related colors for a chart, hold the saturation and lightness steady and step the hue around the wheel. Doing the same thing in HEX or RGB means recalculating three intertwined channels by hand.

Alpha and transparency

All three notations support an alpha channel for transparency. In CSS you write an rgba or hsla form, or add an eight-digit HEX where the last two digits are the alpha. Alpha runs from fully transparent to fully opaque. This is how you create semi-transparent overlays, soft shadows, and tints that let the background show through.

When to use which

Use HEX for storing and sharing a fixed brand color, since it is compact and universal. Use RGB when you are working close to pixel data or compositing with alpha. Use HSL whenever you need to adjust a color, build a palette, or generate variations, because changing one number does one predictable thing.

Converting between them

In practice you will constantly move between formats: a designer hands you HEX, your code wants HSL for an adjustment, and an export needs RGB. Rather than do the base-16 arithmetic in your head, paste the value into a Color Converter and read every notation at once. For the two most common single conversions, a dedicated HEX to RGB tool and an RGB to HEX tool turn one value into the other instantly.

These tools run entirely in your browser, so your unreleased brand palette or client color specs never get uploaded anywhere.

The takeaway

HEX and RGB are two ways of writing the same screen-native values, compact versus channel-by-channel. HSL is the same color reorganized so humans can adjust it intuitively. Store in HEX, composite in RGB, and tweak in HSL, converting whenever the task calls for a different lens on the same color.