Why So Many Color Formats?
Different tools, workflows, and use cases favour different representations of color. A web browser consumes HEX and RGB natively in CSS. A design tool like Figma works in HSL because it maps to how designers think about adjusting lightness and saturation. A print shop needs CMYK because physical inks behave differently from emitted light. Understanding all the formats lets you translate between them accurately.
HEX
HEX encodes a color as a six-digit hexadecimal string prefixed with #. The first two digits are red, the next two green, the last two blue — each ranging from 00 (0) to FF (255). #FF0000 is pure red. The shorthand three-digit form #F00 works when each pair repeats a digit. An eight-digit form adds an alpha channel: #FF000080 is 50% transparent red.
HEX is the most common format in CSS and HTML, and it is compact and copy-pasteable.
RGB and RGBA
RGB expresses the same red, green, blue channels as decimal integers from 0 to 255. rgb(255, 0, 0) is red. RGBA adds a fourth channel, alpha, as a decimal between 0.0 (transparent) and 1.0 (opaque): rgba(255, 0, 0, 0.5) is 50% transparent red.
RGB is intuitive for developers accustomed to thinking in byte values, and the alpha channel in RGBA is easier to read than the hex equivalent.
HSL and HSLA
HSL describes color as Hue (0–360°, a position on the color wheel), Saturation (0–100%, how vivid), and Lightness (0–100%, how dark or light). HSLA adds alpha.
HSL is the most human-readable format for CSS. Rotating the hue value produces analogous colors; lowering saturation creates muted tones; adjusting lightness creates tints and shades without changing the hue. This makes it ideal for generating color palettes programmatically.
HSV (HSB)
HSV uses Hue, Saturation, and Value (also called Brightness). Value and Lightness sound similar but behave differently: in HSL, maximum lightness (100%) is white regardless of saturation. In HSV, maximum value with maximum saturation is a pure, vivid color — white is achieved with zero saturation at maximum value.
Design tools like Photoshop and Figma's color picker default to HSV because it reflects how a painter mixes colors: start with a pure pigment (high saturation, high value) and add white (reduce saturation) or black (reduce value).
CMYK
CMYK — Cyan, Magenta, Yellow, Key (Black) — is a subtractive model used in print. Monitors emit light (additive: combining channels produces white). Printers absorb light (subtractive: combining inks produces black). CMYK values are percentages of each ink. Not every RGB color is achievable in CMYK — the gamut is smaller, which is why colors sometimes look different in print vs. on screen.
If you are designing for print, export your assets in CMYK. If your design was built in RGB, a conversion is necessary, and some vivid greens and blues may shift.
CSS Named Colors and Modern Formats
CSS also supports 148 named colors (cornflowerblue, tomato) and newer formats like oklch() and color(display-p3 ...) for wide-gamut displays. These are less widely used but increasingly relevant as screens with P3 color spaces become common.
Conversion Accuracy
Color space conversions involve floating-point arithmetic, so rounding can introduce small errors. When precision matters — such as matching a brand color exactly — keep the source value in the original format and convert once, as close to use as possible, rather than converting repeatedly.