HEX, RGB & HSL Color Guide

A color model is a mathematical system that describes colors using a set of numbers. Different models exist for different purposes — screens use additive light, printers use subtractive ink, and designers use perceptual models for intuitive editing.

On the web and in apps, three color models dominate: HEX, RGB, and HSL. All three describe the same color space — they are just different notations for the same value. A color converter translates between them instantly.

The same orange — #FF5733 in HEX — is also rgb(255, 87, 51) in RGB and hsl(11, 100%, 60%) in HSL. Same color, three different notations.

HEX (hexadecimal) is the most widely recognized color format on the web. A HEX code starts with # followed by six characters using digits 0–9 and letters A–F.

The six characters split into three pairs: the first two represent Red, the middle two Green, and the last two Blue. Each pair is a base-16 number from 00 (none) to FF (full intensity).

Example: #FF5733 — Red is FF (255), Green is 57 (87), Blue is 33 (51). This produces an orange-red tone. HEX is compact, easy to copy, and natively understood by all browsers and CSS.

A shorthand version exists for colors where each pair repeats — #FFF equals #FFFFFF, and #09C equals #0099CC.

RGB stands for Red, Green, Blue — the three primary colors of light. Screens (monitors, phones, TVs) mix these three light channels to produce all visible colors. This is called an additive color model: adding all three at full intensity produces white.

CSS also supports rgba(), where the fourth parameter — alpha — controls transparency from 0.0 (fully transparent) to 1.0 (fully opaque). This is essential for overlays, shadows, and glass effects.

RGB is the native language of every screen. When a browser reads your HEX or HSL, it converts internally to RGB before rendering pixels.

HSL stands for Hue, Saturation, Lightness. Unlike HEX or RGB, which think in terms of hardware channels, HSL maps to how humans perceive color — making it far more intuitive for design work.

Hue is the base color described as a degree on a color wheel: 0° and 360° are red, 120° is green, 240° is blue. Saturation controls intensity — 0% is grey, 100% is vivid. Lightness controls brightness — 0% is black, 100% is white, 50% is the pure hue.

The real power of HSL shows in CSS. To create a hover effect that darkens a button, you simply reduce the Lightness value. To create a muted version of a color, reduce Saturation. These changes are impossible to read in HEX or RGB without converting first.

CSS also supports hsla() with an alpha channel for transparency, and the modern hsl() syntax in CSS Color Level 4 accepts a slash for alpha: hsl(240 80% 50% / 0.7).

Colors do not exist in isolation. Color harmony describes how colors relate to each other on the color wheel and why certain combinations feel natural or striking.

These principles translate directly into CSS variables. A well-structured design system defines a primary hue in HSL, then derives tints, shades, and accent colors from it by adjusting Lightness and Saturation.

CSS supports all three formats interchangeably. Choosing the right one depends on context:

Modern design systems increasingly rely on CSS custom properties (variables) to store HSL components separately: --color-hue: 240; — allowing components to shift lightness or saturation dynamically without recalculating HEX values.

When building a dark mode, HSL makes flipping themes trivial: flip the Lightness range from the light palette (90–10%) to the dark palette (10–90%) by changing one variable.