HEX, RGB, HSL: Why Designers Reach for Each One

Pick a color, any color. Now express it as a number. How you do that depends on what you are trying to do with it. HEX is what you write when you need to type a color into CSS. RGB is what code uses when it needs to do math with colors. HSL is what designers use when they need to adjust a color in a particular direction without changing the others. Each format is a different lens on the same underlying thing - the wavelengths of light a pixel emits - and knowing which to use when is the difference between fumbling with a color picker and actually controlling color.

HEX: the developer default

A HEX color code is six hex digits (0-9, A-F) representing red, green, and blue channels. The format is #RRGGBB where each pair is one byte (0-255 in decimal, 00-FF in hex). So #FF0000 is pure red, #00FF00 is pure green, #0000FF is pure blue. White is #FFFFFF, black is #000000, gray is #808080.

The reason HEX caught on for web use is that it is compact and uniquely identifies the color in 7 characters (including the #). Compare to rgb(255, 0, 0), which is 14 characters. In CSS files that may have hundreds of color values, the difference adds up.

There is also a 3-digit shortcut: #F00 is the same as #FF0000. The browser doubles each character to get the full 6-digit value. #F63 means #FF6633. Many color tools handle 3-digit hex correctly; some do not. The Toolium Color Picker handles both because I had to fix a bug where users were pasting 3-digit hex codes and getting "invalid format" errors.

Modern CSS supports 8-digit hex for transparency: #FF0000FF is opaque red, #FF000080 is half-transparent red. The 4-digit shorthand also works (#F00F, #F008).

RGB: the math-friendly version

RGB uses decimal numbers (0-255) for each channel. It is functionally equivalent to HEX but in a format that is easier to do arithmetic with. rgb(255, 0, 0) is the same color as #FF0000.

The reason code reaches for RGB is that you can do things like "make this color 20% darker" by multiplying each channel by 0.8. With HEX you would have to convert to decimal, do the math, and convert back. The math is the same; RGB is just the unit form that makes it explicit.

The modern variant rgba(255, 0, 0, 0.5) adds an alpha channel (0-1 transparency). This is what you would use in JavaScript when manipulating colors programmatically.

HSL: the designer's lens

HSL (Hue, Saturation, Lightness) describes colors the way humans think about them.

Hue is the position on a color wheel, 0-360 degrees. 0 is red, 60 yellow, 120 green, 180 cyan, 240 blue, 300 magenta, back to red at 360. Hue is what most people mean when they say "the color" of something.

Saturation is how "vivid" the color is, 0-100%. 100% is fully saturated (a vibrant pure color). 0% is gray (all hue information removed). 50% is muted.

Lightness is how light or dark, 0-100%. 0% is black regardless of hue or saturation. 100% is white. 50% is the "pure" version of the color.

The reason HSL is invaluable for design work: you can systematically adjust one dimension at a time. Want a darker version of your brand color? Lower the lightness, leave hue and saturation alone. Want a muted version for backgrounds? Lower the saturation. Want a complementary color? Add 180 to the hue.

This is how design systems work: you define a base color in HSL, then derive all the variations by adjusting one dimension at a time. The result is a coherent palette where everything feels related, because mathematically the colors are related by simple transformations.

HSL is what I reach for when building a color system

The Toolium color tokens are built on HSL. The primary brand color is around hsl(263, 83%, 58%) - a violet-purple. The "lighter" variant is the same hue and saturation but a higher lightness. The "darker" variant is the same hue and saturation but lower lightness. The hover state is a slightly lower lightness (subtle darkening). The disabled state is a lower saturation (muting).

Building this in HEX would require manually computing each variation, and it would be hard to maintain consistency. In HSL it is just arithmetic.

The CMYK question (briefly)

CMYK (Cyan, Magenta, Yellow, Key/Black) is the color model for print. Computer monitors use additive color (RGB), where adding all channels gives white. Printers use subtractive color (CMYK), where adding all inks gives black (in theory; in practice, K is added because mixed CMY is muddy).

For web work, you do not need CMYK. For print, you do, but the conversion depends on the specific printer's color profile and is not a fixed mathematical relationship. Most graphics tools let you do "approximate CMYK preview" of RGB colors, and dedicated print software handles the actual conversion.

The Toolium color picker shows an approximate CMYK conversion for reference, but for real print work you need color-managed software.

HSV vs HSL

Some tools use HSV (Hue, Saturation, Value) instead of HSL. The names are similar but the math is slightly different. In HSL, lightness 50% gives the most saturated version of the color. In HSV, value 100% gives the most saturated. They are equally valid; designers split on which feels more intuitive.

The Toolium color picker uses HSL because it makes "lighter and darker variants" easier to reason about. If you prefer HSV, the GIMP and Photoshop color pickers default to it.

Accessibility: contrast checking

HSL is also the right lens for thinking about contrast. WCAG (the Web Content Accessibility Guidelines) requires a contrast ratio of at least 4.5:1 between text and background for normal-size text. The contrast ratio depends on the lightness of the colors, not their hue or saturation. So in HSL, you can pick any hue you want and adjust the lightness until the contrast ratio is sufficient.

For checking contrast, dedicated tools like WebAIM's Contrast Checker give you the ratio. The Toolium color picker shows the contrast ratio against a chosen background, which is good for spot-checking.