HEX, RGB, and HSL Explained

The same color can be written three common ways on the web — HEX, RGB, and HSL — and none of them is more "correct" than the others. They are different coordinate systems for the exact same point in color space: RGB matches how a screen actually produces light, HEX is just RGB written more compactly, and HSL matches how a person intuitively thinks about color ("a bit darker", "more saturated").

RGB — how the screen actually works

A screen pixel is three tiny lights: red, green, and blue. RGB gives each one a brightness from 0 to 255 (one byte, 256 possible values per channel). Mixing all three at full strength produces white; all three at zero produces black:

rgb(255, 0, 0)     /* pure red */
rgb(255, 255, 255) /* white — all channels maxed */
rgb(0, 0, 0)       /* black — all channels off */

HEX — RGB written in base 16

HEX is the same three 0–255 values, each written as a 2-digit hexadecimal number (00 to FF) and concatenated: #RRGGBB. See Understanding Number Bases for why hex maps cleanly to byte values.

#FF0000  →  rgb(255, 0, 0)   — FF = 255, 00 = 0
#FF3D8F  →  rgb(255, 61, 143)

A 3-digit shorthand exists for colors where each channel's two digits repeat: #F0F expands to #FF00FF, not #F00F0F — each shorthand digit is doubled, not padded.

HSL — the human-intuitive model

HSL describes the same color as a position on a color wheel instead of three light intensities:

• Hue (0–360°) — the position on the color wheel: 0° is red, 120° is green, 240° is blue.
• Saturation (0–100%) — how far from gray: 0% is a shade of gray, 100% is fully vivid.
• Lightness (0–100%) — how far from black: 0% is always black, 100% is always white, regardless of hue.

This is why HSL is easier to hand-edit than RGB: "make this 10% darker" is just lowering the lightness value by 10, with hue and saturation untouched. Doing the same thing in RGB means recomputing all three channels proportionally.

Transparency: RGBA, HSLA, 8-digit hex

Every format has a variant with a fourth alpha channel controlling opacity, from 0 (fully transparent) to 1 for RGBA/HSLA, or an extra hex byte (00 to FF) for 8-digit hex:

rgba(255, 61, 143, 0.5)   /* 50% opaque brand pink */
hsla(335, 100%, 62%, 0.5)
#FF3D8F80                 /* 80 in hex ≈ 50% (128/255) */

WCAG contrast ratios

Beyond just picking colors, the Web Content Accessibility Guidelines (WCAG 2.1) define a minimum contrast ratio between text and its background so the text stays readable for people with low vision or color blindness. The ratio is computed from each color's relative luminance and ranges from 1:1 (identical colors) to 21:1 (pure black on pure white, the maximum possible):

For reference, #767676 gray text on a white background sits right at 4.5:1 — the exact AA threshold for normal-size text. Anything lighter than that gray fails AA on white.