Color Formats Explained
Every color can be described in multiple ways. HEX, RGB, HSL, CMYK, LAB — they all refer to the same color, but each format is optimized for a different context. Here is what each one means, how to read it, and when to use it.
| Format | Example (orange) | Best for |
|---|---|---|
| HEX | #FFA500 | Web development, CSS, design tools |
| RGB | rgb(255, 165, 0) | Screen design, CSS, JavaScript |
| HSL | hsl(39, 100%, 50%) | CSS, intuitive color adjustment |
| HSV | hsv(39, 100%, 100%) | Design software color pickers |
| CMYK | cmyk(0, 35, 100, 0) | Print and prepress |
| LAB | lab(72, 19, 75) | Perceptual accuracy, color science |
| LCH | lch(72, 77, 76°) | Modern CSS, perceptual palettes |
| sRGB | (1.000, 0.647, 0.000) | Color management, ICC profiles |
HEX
Hexadecimal color notation encodes red, green, and blue channels as two-digit base-16 numbers, concatenated into a six-character string prefixed with #. Each pair ranges from 00 (0) to FF (255).
Breaking this down: FF = 255 red, A5 = 165 green, 00 = 0 blue. The result is orange. A shorthand form exists for colors where each pair is a repeated digit: #FFA500 cannot be shortened, but #FF0000 can become #F00.
Writing CSS or HTML, sharing colors with designers, copying from design tools. HEX is the universal language of web color — any tool that works with color understands it.
RGB
Red, Green, Blue. The native format of digital screens. Each channel is a value from 0 to 255. Mixing all three at 255 produces white; all at 0 gives black. The format maps directly to how display hardware works.
RGB and HEX are mathematically identical — they represent the same values in different notations. Converting between them is a simple base change. PIGMENTUM shows both on every color page.
Setting colors in CSS (color: rgb(255, 165, 0)), working in JavaScript with canvas or WebGL, or any context where you need explicit channel values.
HSL — Hue, Saturation, Lightness
HSL describes color in terms that match human perception rather than hardware. Hue is the color's position on the wheel in degrees (0–360°). Saturation is the intensity (0–100%). Lightness is how light or dark it is (0–100%, where 50% is the natural color).
The great advantage of HSL is that it makes adjustments intuitive. Reducing saturation moves any color toward grey. Increasing lightness moves toward white. You can darken a brand color by reducing lightness alone, without touching the hue.
Writing CSS where you want easy tonal control, building design systems where colors share a hue, or exploring variations of a color. Modern CSS supports HSL natively.
HSV — Hue, Saturation, Value
Similar to HSL but uses "value" instead of "lightness." The key difference: at 100% value, a fully saturated color is at its natural vivid appearance. To get white, you must reduce saturation to 0 while keeping value at 100. In HSL, white is at 100% lightness regardless of saturation.
HSV is commonly used in color picker interfaces (the square gradient you see in Photoshop and Figma is an HSV representation) because it maps naturally to how people select colors visually.
Working with design software, or reading values from a color picker widget. Less common in CSS than HSL.
CMYK — Cyan, Magenta, Yellow, Key (Black)
The model used in physical printing. Values are percentages of each ink. Unlike screen colors (which add light), print colors subtract it — ink absorbs wavelengths. Mixing cyan, magenta, and yellow theoretically produces black, but in practice produces a muddy brown, so black ink (K) is added separately for clean dark tones and sharp text.
A key limitation: the CMYK gamut is smaller than the RGB gamut. Some vivid screen colors — particularly bright blues and purples — cannot be reproduced in print. Professional prepress work always involves checking for out-of-gamut colors.
Preparing files for commercial printing, offset lithography, or any physical reproduction. Not relevant for purely digital work.
LAB (CIELAB)
A perceptually uniform color space developed by the International Commission on Illumination. L is lightness (0–100). A is the green–red axis. B is the blue–yellow axis. The defining feature of LAB is that equal numerical distances represent equal perceived differences — something RGB cannot claim.
In RGB, moving from one value to another by the same amount does not produce the same perceived change in every part of the spectrum. LAB corrects for this, making it invaluable for color comparison, interpolation, and any work that needs to be perceptually accurate.
Comparing colors for similarity, generating perceptually even gradients, color science and research, or photo retouching in tools like Photoshop that support LAB editing.
LCH — Lightness, Chroma, Hue
A cylindrical representation of LAB. The same perceptual accuracy, but with a more intuitive polar structure: lightness (0–100), chroma (intensity, similar to saturation), and hue (degrees on the color wheel). This makes it easier to manipulate than raw LAB.
Modern CSS now supports LCH natively through the lch() function, making it accessible to web designers. Because it is perceptually uniform, palettes built in LCH tend to look more balanced than those built in HSL.
Building design systems in modern CSS, creating accessible and visually balanced color palettes, or working in Figma with the newer color management features.
sRGB (Linear RGB)
The standard RGB color space used for web content and most digital workflows. sRGB values are expressed as decimal fractions from 0 to 1 rather than 0 to 255. sRGB includes a gamma curve that makes the encoding match the non-linear response of human vision and older display hardware.
Most screens, cameras, and software conform to the sRGB standard by default, which ensures colors look consistent across devices. The "linear" or "linear-light" variant removes the gamma curve and is used in some rendering and compositing workflows.
Working with ICC color profiles, color management systems, or any technical context where explicit color space specification is required.
HEX8 (8-digit HEX with Alpha)
An extension of the standard six-digit HEX format that adds an additional two-digit channel for opacity (alpha). The alpha channel ranges from 00 (fully transparent) to FF (fully opaque).
HEX8 is supported in modern CSS and design tools. Equivalent to rgba(255, 165, 0, 1.0) in standard CSS. PIGMENTUM shows the HEX8 value for every color — useful when you need to copy an exact color including its full opacity into a design tool.
Specifying colors with transparency in CSS or design tools that accept HEX8 notation.