Color Formats Reference

Definitions, value ranges, and usage for 11 color formats including HEX, RGB, HSL, CMYK, and OKLCH.

HEX

A 6-digit hexadecimal color code prefixed with #. Each pair of digits represents the Red, Green, and Blue channels in base-16 (00-FF).

When to use
The most common format in web design and CSS. Used in HTML, CSS, design tools, and version control.
Value ranges
#000000 (black) to #FFFFFF (white). Supports 3-digit shorthand (#RGB) and 8-digit alpha (#RRGGBBAA).
CSS support
Supported in all CSS versions.
Try in Color Converter →

RGB

Represents colors using Red, Green, and Blue channels, each ranging from 0 to 255. Based on additive color mixing — the way screens emit light.

When to use
Standard for digital displays, image editing, and programmatic color manipulation.
Value ranges
R: 0-255, G: 0-255, B: 0-255
CSS support
Supported in all CSS versions as rgb() and rgba().
Try in Color Converter →

HSL

Defines color by Hue (angle on the color wheel), Saturation (intensity), and Lightness (brightness). More intuitive than RGB for manual color selection.

When to use
Ideal for generating color variations — adjust lightness for shades/tints, saturation for intensity.
Value ranges
H: 0-360°, S: 0-100%, L: 0-100%
CSS support
Supported in CSS3+ as hsl() and hsla().
Try in Color Converter →

CMYK

Cyan, Magenta, Yellow, Key (black). A subtractive color model used in print production where inks absorb light rather than emit it.

When to use
Required for print design and pre-press workflows. Not directly supported in CSS.
Value ranges
C: 0-100%, M: 0-100%, Y: 0-100%, K: 0-100%
CSS support
Not supported in CSS.
Try in Color Converter →

HSB / HSV

Hue, Saturation, Brightness (also called HSV — Hue, Saturation, Value). Similar to HSL but uses brightness instead of lightness, matching how many color pickers work.

When to use
Common in design tools like Adobe Photoshop and Figma for their color pickers.
Value ranges
H: 0-360°, S: 0-100%, B: 0-100%
CSS support
Not directly supported in CSS.
Try in Color Converter →

CIELAB (LAB)

A perceptually uniform color space where equal numerical changes correspond to roughly equal perceived color differences. Consists of Lightness (L), green-red axis (a), and blue-yellow axis (b).

When to use
Used for accurate color difference calculations (Delta-E), color correction, and device-independent color representation.
Value ranges
L: 0-100, a: -128 to 127, b: -128 to 127
CSS support
Supported in CSS Color Level 4 as lab().
Try in Color Converter →

CIE XYZ

A device-independent color space defined by the International Commission on Illumination. Serves as the mathematical foundation for most other color spaces.

When to use
Used as an intermediate step in color space conversions and for colorimetric calculations.
Value ranges
X: 0-95.047, Y: 0-100, Z: 0-108.883 (D65 illuminant)
CSS support
Not directly supported in CSS.
Try in Color Converter →

LCH

The cylindrical form of CIELAB, using Lightness, Chroma (color intensity), and Hue (angle). More intuitive than LAB's a/b axes while maintaining perceptual uniformity.

When to use
Preferred over LAB when you need to adjust chroma or hue independently while maintaining perceptual uniformity.
Value ranges
L: 0-100, C: 0-150+, H: 0-360°
CSS support
Supported in CSS Color Level 4 as lch().
Try in Color Converter →

OKLCH

A modern perceptual color space that improves on LCH with better hue uniformity. Designed by Björn Ottosson to fix hue shifts that occur in CIELAB-based spaces.

When to use
Recommended for CSS Color Level 4 adoption. Provides the most uniform lightness, chroma, and hue manipulation of any widely-supported color space.
Value ranges
L: 0-1, C: 0-0.4+, H: 0-360°
CSS support
Supported in CSS Color Level 4 as oklch(). Gaining broad browser support.
Try in Color Converter →

HWB

Hue, Whiteness, Blackness. Describes color by its hue angle, then how much white and black are mixed in. Considered the most intuitive color model for humans.

When to use
Easy to understand for non-technical users. Adding whiteness creates pastels, adding blackness creates deeper tones.
Value ranges
H: 0-360°, W: 0-100%, B: 0-100%
CSS support
Supported in CSS Color Level 4 as hwb().
Try in Color Converter →

CIELUV (LUV)

A perceptually uniform color space optimized for additive color mixing (light). Similar to CIELAB but better suited for applications involving illumination.

When to use
Used in lighting design, television color science, and applications involving emitted light rather than reflected light.
Value ranges
L: 0-100, u: -134 to 224, v: -140 to 122
CSS support
Not supported in CSS.
Try in Color Converter →