Colors on the web are defined by numbers, not names. When a designer says "that exact shade of blue," they are really specifying a mathematical point in a three-dimensional color space. HEX, RGB, and HSL are three different ways to describe the same set of colors — the same point from different coordinate systems. Each format has different strengths for different tasks, and switching between them is part of everyday web development. Understanding the logic behind each format makes color work faster and more intuitive.
HEX: The Web Standard
A HEX color code like #3B82F6 is a compact representation of three 8-bit values (0–255) for red, green, and blue, written in hexadecimal (base 16). The first two characters are red (3B = 59 in decimal), the next two are green (82 = 130), and the last two are blue (F6 = 246). The # prefix tells the browser to interpret the value as a hex color.
Short HEX codes use single characters per channel when both digits are the same: #AABBCC can be written as #ABC. This only works when both digits in each channel are identical, limiting it to colors like #FFF (white), #000 (black), #F00 (pure red), and similar high-saturation values. In modern codebases, short HEX is mostly a curiosity since minifiers handle character counts.
HEX with an alpha channel uses eight characters: #3B82F6FF where the last two characters (FF = 255 = 100% opacity) represent opacity. This is less common than rgba() for transparent colors because the mental model is less intuitive — you have to convert the alpha hex to a percentage in your head. HEX is ideal for design tokens, CSS custom properties, and any context where compactness and copy-pastability matter.
RGB: The Logical Foundation
RGB — Red, Green, Blue — is the underlying model that computer displays actually use. Each pixel emits light in three colors, and the eye perceives their combination as a single color. CSS RGB syntax is rgb(59, 130, 246) for the same blue as #3B82F6. The rgba() variant adds an alpha channel: rgba(59, 130, 246, 0.5) for 50% opacity.
RGB is additive — adding more of each channel increases brightness. Full values of all three (255, 255, 255) produce white because maximum light in all channels overwhelms the eye with brightness. Zero values for all (0, 0, 0) produce black. This is the opposite of subtractive color mixing with physical pigments, which is a source of confusion for designers coming from print.
RGB is the best format for programmatic color manipulation. When you want to darken a color in JavaScript, subtracting a fixed amount from each RGB channel is straightforward. When you want to mix two colors, you average their RGB values. Modern CSS also supports rgb() with percentages and the newer color() function for wider gamut spaces like Display P3.
HSL: The Human-Friendly Format
HSL stands for Hue, Saturation, Lightness. hsl(217, 91%, 60%) represents the same blue. Hue is a degree on the color wheel (0° and 360° are both red, 120° is green, 240° is blue). Saturation is the intensity of the color (0% is gray, 100% is full color). Lightness is the brightness (0% is black, 50% is the pure color, 100% is white).
HSL is the most intuitive format for generating color variations. To create a lighter version of a color, increase the lightness. To create a muted version, decrease the saturation. To create a complementary color, add 180° to the hue. These operations map directly to how designers think about color relationships, making HSL invaluable for building design systems and theme tokens.
HSL shines in CSS for hover states, dark mode variants, and component theming. If your primary color is hsl(217, 91%, 60%), your hover state is hsl(217, 91%, 50%), your disabled state is hsl(217, 30%, 70%), and your dark mode background is hsl(217, 30%, 15%). These relationships are readable in the source code, unlike the equivalent HEX values which reveal no relationship at a glance.
Color Accessibility and Contrast Ratios
WCAG 2.1 (Web Content Accessibility Guidelines) defines minimum contrast ratios for text legibility. Normal text requires a contrast ratio of at least 4.5:1 against its background. Large text (18pt+ or 14pt+ bold) requires 3:1. The contrast ratio is calculated from the relative luminance of the two colors — a formula that weights the RGB channels by the human eye's sensitivity to each color.
Pure black on white has a contrast ratio of 21:1 — the maximum. Many designers prefer slightly off-black text (#1F2937 or similar) on white, which maintains a ratio well above the 4.5:1 threshold while reducing eye strain on prolonged reading. Pure white text on medium-saturation colors (like a mid-tone blue button) often fails accessibility requirements without testing.
Tools like the WebAIM Contrast Checker and browser DevTools accessibility audits flag contrast failures automatically. Building accessible color choices into your design token system — rather than checking individual components after the fact — is the sustainable approach. Define your semantic colors (text-primary, background-surface, border-default) with contrast ratios verified at the design system level.
HEX, RGB, and HSL are not competing formats — they are complementary tools. Use HEX for design tokens and copy-pastable values. Use RGB when you are manipulating colors programmatically. Use HSL when you are designing color systems and need to reason about relationships between shades. A color picker that converts between all three formats in real time is indispensable for this kind of exploration, letting you find the right color visually and then export it in whatever format your codebase requires.