What is the difference between HSL and HSV?

Both describe a color by hue angle plus two other axes. HSL uses saturation and lightness, where lightness 50% is the pure hue and 100% is white. HSV uses saturation and value, where value 100% is the brightest version of the hue and you reach white by also dropping saturation.

Why does CMYK conversion look approximate?

The simple RGB-to-CMYK formula used here is the naive device-independent version. Real print conversion depends on an ICC profile for the specific ink, paper and press, so on-screen CMYK values are only a guide, not a press-accurate match.

What is the CIELAB color space for?

CIELAB (L*a*b*) is designed to be perceptually uniform, meaning equal numeric distances correspond to roughly equal perceived color differences. It is used for color difference (delta-E) calculations and as a profile connection space between RGB and CMYK.

What is XYZ and why is it shown?

CIE XYZ is a device-independent reference space derived from human cone response. RGB is first converted to linear XYZ, and XYZ is then converted to LAB, so XYZ is the intermediate step between a screen color and a perceptual one.

Which color model should I use in CSS?

Hex and rgb() are universal. hsl() is convenient for tweaking lightness and creating shade ramps. Modern CSS also supports lab() and lch(), which give more perceptually even gradients and are worth using where browser support allows.

Color Models Reference

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

One color, every model

A color model is a way of describing a color as numbers. The same patch of color can be written as RGB for screens, CMYK for print, HSL or HSV for human-friendly editing, and LAB or LCH for perceptual work. This reference takes one sRGB color and expresses it in each model so you can see how the numbers relate — and lists the conversion formula behind every translation.

How it works

Everything starts from RGB in the 0–255 range, normalised to 0–1.

HSL / HSV share a hue computed from which channel is largest. For HSL, lightness is the average of the max and min channels; for HSV, value is simply the max. Saturation is derived differently in each so that HSL peaks at mid lightness and HSV peaks at full value.
CMYK uses K = 1 − max(R,G,B), then C = (1−R−K)/(1−K) and likewise for M and Y, with all-black handled as a special case.
XYZ requires linearising sRGB (undoing the gamma curve) and multiplying by the sRGB-to-XYZ matrix under the D65 white point.
LAB transforms XYZ through a cube-root non-linearity relative to the reference white, producing L* (lightness 0–100), a* (green–red) and b* (blue–yellow).

Tips and notes

Use HSL when you need readable shade ramps — fix hue and saturation, step lightness. Reach for LAB or LCH when you care about even perceived steps, such as data-visualisation palettes, because equal RGB steps look uneven to the eye. Treat CMYK output as indicative only: accurate print color needs the press’s ICC profile. When converting in code, always linearise sRGB before any matrix math, and de-linearise on the way back, or your XYZ and LAB values will be wrong.