Hex, RGB, HSL & HSV: Color Formats Explained

Hexadecimal (#RRGGBB)

A hex color like #FF6B35 is shorthand for three pairs of base-16 numbers. The first pair (FF) is the red channel. The second (6B) is green. The third (35) is blue. Each pair runs from 00 (0) to FF (255).

Base 16 uses digits 0–9 plus letters A–F, which is why you see letters in color codes. FF in base 16 equals 255 in decimal — the maximum value for any single channel. So #FF0000 is pure red (red at maximum, green and blue at zero), and #FFFFFF is white (all three channels at maximum).

Hex is the dominant format in CSS because it's compact. Three bytes of color data become a 7-character string. The shorthand version — #F63 instead of #FF6633 — works when each pair repeats the same digit, halving the character count.

RGB (Red, Green, Blue)

RGB expresses the same three-channel information as decimal numbers: rgb(255, 107, 53) is the same color as #FF6B35. The format is more readable for humans doing arithmetic and more accessible for JavaScript that needs to manipulate channel values.

RGB is an additive color model — it describes light, not pigment. Red + green = yellow. Red + green + blue = white. This is the opposite of paint (subtractive), which is why the "primary colors" from school don't apply here. Screens mix light, not dye.

When you need to programmatically lighten a color, you add to all three channels. When you need to check contrast ratios, you use the weighted RGB formula. When you want to interpolate between two colors for a gradient, linear RGB interpolation avoids the muddy midpoint that appears in hex-based CSS gradients.

HSL (Hue, Saturation, Lightness)

HSL rearranges color into three properties that match how humans think about color:

• Hue (0–360°) — position on the color wheel. 0° = red, 120° = green, 240° = blue.
• Saturation (0–100%) — how vivid the color is. 0% is gray; 100% is the purest version of the hue.
• Lightness (0–100%) — how light or dark. 0% is black, 100% is white, 50% is the "normal" color.

HSL is the designer's format. If you want a lighter version of your brand color, increase lightness. If you want a more muted version, decrease saturation. If you want a warmer version, shift hue by 10–20°. None of this is intuitive in RGB or hex — you'd have to understand the underlying math to predict the result.

In CSS, hsl(14, 100%, 60%) and #FF6B35 are the same orange, but the HSL version communicates structure: "it's an orange hue (14°), fully saturated, moderately light."

HSV / HSB (Hue, Saturation, Value/Brightness)

HSV is a sibling to HSL. The hue and saturation channels mean the same thing, but the third channel differs: Value (sometimes called Brightness) measures how much white is mixed in, rather than how close to pure black or white the color is.

In HSV, a fully saturated red at 100% value is the vivid red you'd expect. Reduce value to 50% and you get a dark red, not the muddy brown you'd get reducing HSL lightness. This makes HSV more intuitive for design tools — which is why Adobe Photoshop, Figma, and most color pickers use HSV or HSB under the hood, not HSL.

The practical difference: when you drag the large color picker square in most tools, you're navigating a 2D HSV space (saturation on the horizontal axis, value on the vertical). The hue changes the base color underneath.

CMYK — Why It Doesn't Belong on Screen

CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model used for printing. It describes how much ink to lay down on paper, where mixing all colors creates black (because ink absorbs light). Screens don't print ink, so CMYK values on a monitor are approximations converted back to RGB for display. They're useful when preparing files for print — nowhere else.

Converting Between Formats

The relationships are all deterministic — every hex has exactly one RGB equivalent, which has exactly one HSL equivalent. The conversions involve specific formulas:

• Hex → RGB: Parse each pair as a base-16 integer. #FF6B35 → rgb(255, 107, 53).
• RGB → HSL: Normalize to 0–1, find the max and min channels, then calculate hue from which channel is dominant, saturation from the range, and lightness from the midpoint.
• HSL → RGB: Use trigonometric relationships to map the hue back onto the three channels.

In practice, you don't need to do this by hand. Every color tool — including the one below — handles all conversions instantly.