Color Spaces Explained: HEX, RGB, HSL, HSV, and CMYK

A color is a single point in a three-dimensional space, but the way you describe that point depends on what you are doing. CSS uses #FF5733. Designers think in HSL. Print shops need CMYK. Each representation encodes the same color; the choice of representation is a choice about which dimensions of variation are easiest to manipulate. Understanding the five common color spaces is the difference between fighting your color picker and using it intuitively.

The Five Color Spaces

Every color space in this article represents colors as three numbers. The differences are in what those numbers measure and which color model they assume.

• HEX — a 24-bit RGB color written as six hex digits. #FF5733 is FF red, 57 green, 33 blue.
• RGB — the raw three channels, each 0–255. rgb(255, 87, 51) is the same color as #FF5733.
• HSL — hue (0–360), saturation (0–100%), lightness (0–100%). Designed for human intuition.
• HSV — hue, saturation, value (0–100%). Similar to HSL but uses the brightest channel instead of the average.
• CMYK — cyan, magenta, yellow, key (black) percentages. The subtractive model used in print.

The Color Converter handles all five. Enter a value in any form and see the others, plus a live preview swatch and a WCAG 2.1 contrast ratio.

HEX and RGB: The Wire Format

HEX and RGB are the same color, different notation. CSS supports both:

.button {
    background-color: #FF5733;       /* HEX */
    background-color: rgb(255, 87, 51);  /* RGB */
    background-color: rgb(255 87 51 / 0.8);  /* modern syntax, with alpha */
}

Both forms are 24-bit: 8 bits per channel, 16.7 million distinct colors. The 3-digit shorthand #F53 expands to #FF5533 (each digit is doubled), giving 4,096 colors instead of 16.7 million. The 8-digit form #FF5733CC includes an alpha channel; CC is 80% opacity.

HEX is compact and easy to copy from a design tool. RGB is more readable and easier to manipulate in code (you can extract the red channel by indexing, or animate from one RGB color to another with linear interpolation). Modern CSS supports the rgb() function with space-separated arguments and an optional alpha, which is the preferred form for new code because it makes the alpha channel explicit.

HSL: The Designer’s Space

HSL (hue, saturation, lightness) is the color space most aligned with how designers think about color. The three axes correspond to three orthogonal questions:

• Hue — what color is it? 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, 360 is back to red. The hue axis is a continuous circle, so hsl(370, ...) wraps to hsl(10, ...).
• Saturation — how vivid is it? 0% is gray (the hue is invisible); 100% is the most vivid version of the hue. The same hue with different saturation values gives a tint-and-tone family: 0% gray, 25% muted, 50% moderate, 100% pure.
• Lightness — how bright is it? 0% is black, 100% is white, 50% is the pure hue. Adjusting lightness gives a tint (toward white) or a shade (toward black) without changing the hue.

The intuition that makes HSL valuable: when you want a lighter version of a color, you increase the lightness. When you want a more muted version, you decrease the saturation. When you want a different color, you rotate the hue. The same operations in HEX or RGB require mental math that breaks the design flow.

CSS supports HSL natively:

.button {
    background-color: hsl(11, 100%, 60%);   /* HSL */
    background-color: hsl(11 100% 60% / 0.8);  /* modern syntax with alpha */
}

The Color Converter accepts HSL inputs and shows the RGB/HEX equivalents, which is useful when you need to use a HSL-designed color in a context that only supports RGB.

HSV: The Picker’s Space

HSV (hue, saturation, value) is similar to HSL but uses value instead of lightness. The value is the brightness of the dominant channel: a yellow (255, 255, 0) has value 100% even though the lightness is 50%.

The intuition that makes HSV valuable: when you adjust the value slider, the color moves toward black. When you adjust the saturation slider, the color moves toward gray. The two operations are independent. Most color pickers (Photoshop, GIMP, the macOS color picker) expose HSV because the axes map directly to the UI controls.

The relationship between HSL and HSV is non-trivial. A yellow that is HSL 50% lightness is HSV 100% value. The two spaces are not linear transformations of each other; they are different parameterizations of the RGB cube. The Color Converter shows both, which is useful when you need to understand how a color was specified in a design tool.

CMYK: The Print Space

CMYK (cyan, magenta, yellow, key) is the subtractive color model used in print. The four channels represent the four inks in a printing press. Combining cyan, magenta, and yellow at 100% produces a muddy brown rather than black, which is why the K (key) channel exists to provide a true black.

The conversion from RGB to CMYK is approximate. The simple formula used in the Color Converter is:

K = 1 - max(R, G, B)
C = (1 - R - K) / (1 - K)
M = (1 - G - K) / (1 - K)
Y = (1 - B - K) / (1 - K)

This formula assumes a default ink profile and a specific paper stock. For press-ready output, you need a color-managed tool that loads the printer’s ICC profile. The simple formula is accurate to within a few percent for most colors; for the bright RGB colors at the edge of the print gamut, the difference can be substantial.

CMYK has a smaller gamut than RGB. The bright blues and greens that are easy to display on a screen are difficult or impossible to reproduce in print. The CMYK conversion of an out-of-gamut color clamps to the closest reproducible color; the design tool usually warns when this happens. The Color Converter does not show gamut warnings, which is one reason it is a preview tool rather than a press tool.

Choosing the Right Space

The decision tree is short:

1. For CSS and web design: HEX or RGB. HSL is the best choice when you need to generate color variations (lighter, darker, muted) algorithmically.
2. For UI design: HSL or HSV. Most design tools expose both; use whichever feels more intuitive for the operation you are performing.
3. For data visualization: HSL. The hue axis is the cleanest way to encode a categorical variable; lightness is the cleanest way to encode an ordinal variable.
4. For print: CMYK, with an ICC profile for the specific printer and paper. The Color Converter gives a quick preview but is not a substitute for color-managed software.
5. For accessibility audits: HEX or RGB, with the WCAG contrast ratio computed from the linearized luminance. The Color Converter shows the contrast against white and black, which are the two most common background choices.

Color Math: Interpolation and Palettes

Linear interpolation in RGB produces colors that pass through the gray of the intermediate values. The interpolation from red (255, 0, 0) to blue (0, 0, 255) goes through dark gray, not the pink and purple you might expect. The same interpolation in HSL produces pink and purple, which usually look more natural.

For data visualization and color palette generation, HSL is almost always the right choice. A color palette can be parameterized by a single hue and a set of lightness/saturation values, giving a visually coherent family. The same palette in RGB requires careful tuning of each color independently.

For color mixing (CSS color-mix(), SVG <feColorMatrix>), the default interpolation is in the source color space. To get natural mixing, convert to HSL first, interpolate there, and convert back. The conversion is cheap; the result is much better-looking.

Color Spaces and Accessibility

Color spaces are not directly related to accessibility, but the choice of representation affects how easily you can pick a high-contrast color. The WCAG 2.1 contrast ratio is computed from the linearized RGB values, so the formula is the same regardless of the space you specify the color in. The space matters for the design process: HSL makes it easy to find a color with a specific lightness, which is the most direct lever on contrast.

The Color Converter shows the contrast against white and black. If both are below 4.5:1 (the AA threshold for normal text), the color is too close to both ends of the lightness scale to be a safe text color. A color with at least one contrast above 4.5:1 is safe to use as text against one of the two backgrounds; a color with at least one contrast above 7:1 is safe to use as body text against either.

Color in Modern CSS

CSS Color Module Level 4 added several modern features that change the color landscape:

• Wide-gamut spaces — color(display-p3 1 0 0) expresses colors in the Display P3 space, which is larger than sRGB. Modern displays can show these colors; older displays approximate them.
• Lab and LCH — perceptually uniform color spaces. lab(50% 40 60) and lch(50% 60 40) are designed so that numerical differences correspond to visual differences. Useful for gradient generation and color manipulation.
• color-mix() — mix two colors in a specified color space. color-mix(in hsl, red, blue) interpolates through HSL; color-mix(in oklab, red, blue) interpolates through OKLab (a perceptually uniform space). The right choice produces smoother, more natural-looking gradients.
• color-contrast() — automatically pick a contrasting color from a list. The browser computes the WCAG contrast ratio and returns the first color that meets the threshold.

These features are not yet universally supported, but they represent the direction of the platform. The Color Converter handles the standard sRGB-derived spaces; a future version may add Display P3 and Lab.

Frequently Asked Questions