Digital color representation is built on the additive color model, where light is combined to create different colors. The RGB (Red, Green, Blue) model directly reflects this physical process. Each channel is defined by an 8-bit integer, ranging from 0 (no light) to 255 (maximum light). By mixing these three primary colors at varying intensities, computers can display over 16.7 million distinct colors (256 × 256 × 256).
For example, rgb(255, 0, 0) produces pure red, while rgb(255, 255, 255) combines all channels at maximum intensity to produce pure white. While RGB accurately maps to how screens emit light, it is famously unintuitive for humans to adjust. If you have a specific orange (rgb(255, 165, 0)) and want to make it slightly darker, guessing the correct numerical reduction for each channel requires significant trial and error.
HEX: The compact, copy-paste standard
HEX color codes are fundamentally just base-16 representations of RGB values, compacted into a single string. The format #RRGGBB uses two hexadecimal digits for each color channel. Since hexadecimal digits run from 0-9 and A-F, the value 'FF' equals 255 in decimal, making #FF0000 exactly equivalent to rgb(255, 0, 0).
The ubiquity of HEX in CSS and design tools stems from its brevity and ease of transmission. A single string like #2a9d8f is much easier to copy and paste than separate RGB values. Furthermore, modern CSS allows for an alpha (transparency) channel via an 8-digit HEX code (#RRGGBBAA), though standard RGB and RGBA formats remain common when varying opacity programmatically.
HSL: Designed for human perception
HSL (Hue, Saturation, Lightness) offers a more intuitive approach by abstracting the RGB space into a cylindrical coordinate system. Hue is measured in degrees (0-360) around a color wheel: 0° is red, 120° is green, and 240° is blue. Saturation is a percentage (0% to 100%) defining color intensity, and Lightness dictates how dark or light the color is, with 0% being black and 100% being white.
This format shines in UI development for building coherent color systems and themes. If you need a hover state that is 10% darker than a base button color, HSL allows you to simply reduce the Lightness value from 50% to 40% while keeping Hue and Saturation identical. This semantic relationship makes hsl(210, 100%, 50%) vastly superior for programmatic design systems compared to calculating the corresponding RGB shift.