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.

What is the Color Models Reference?

Reference for color model definitions, value ranges and inter-model conversion formulas. Enter an RGB color and see live HSL, HSV, CMYK, XYZ and LAB conversions with the maths behind each. It runs free in your browser on Gera Tools, with nothing uploaded.

Color Models Reference

Name: Color Models Reference
Creator: Gera Tools
License: https://creativecommons.org/licenses/by/4.0/

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).

When to use each model

Choosing the right color model for a task matters more than most developers realise.

RGB — the default for screens

Every display renders pixels in red, green, and blue light. RGB values in the 0–255 range are what CSS, SVG, Canvas and WebGL ultimately consume. For colour storage and transmission, RGB is the lingua franca of the web.

HSL — for design adjustments

Adjusting a color in RGB space is unintuitive: making a red darker means changing the red channel, but making it less saturated means changing all three channels simultaneously. HSL separates hue, saturation, and lightness into independent axes, so you can make a color 20% darker by stepping L down by 20, or create a 10-step shade ramp by holding H and S fixed while stepping L from 90% to 20%.

HSV — common in design-tool colour pickers

HSV (also called HSB) is the model used in most colour-picker widgets. The rectangular picker with a colour bar below uses hue for the bar and saturation+value for the rectangle. Understanding HSV helps you read colour-picker coordinates from design tools like Figma.

CMYK — for print, as a guide only

Screen-to-press conversion depends on ICC profiles and press conditions. The naive RGB-to-CMYK formula here gives a device-independent approximation that is useful for understanding the rough ink composition, but it cannot replace a print shop’s colour-managed workflow.

LAB and LCH — for perceptual uniformity

In LAB, a step of 10 units in any direction looks roughly the same size to the human eye, regardless of hue or lightness. This makes LAB ideal for generating palettes where you want perceptually even steps — for example, a continuous data-visualisation colour scale where each step in the data should look like an equal step in colour.

LCH rearranges LAB into polar coordinates: Lightness, Chroma (saturation intensity), and Hue angle. LCH hue is different from HSL hue; it is perceptually calibrated so equal chroma at different hues looks equally saturated to the eye.

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.