Colour values appear in different formats across design tools, CSS, and print production. A clear comparison of every colour format with use cases and a guide to converting between them.
HEX, RGB, HSL, CMYK, HSV — colour values appear in different formats across design tools, CSS, print production, and APIs. Understanding what each format means, when to use it, and how to convert between them is a fundamental skill for designers and developers working with colour. Here is the complete guide.
HEX (hexadecimal) is the most common colour format in web development. A 6-digit HEX code like #1a73e8 represents red, green, and blue channels as two hex digits each (00–FF in hexadecimal = 0–255 in decimal):
#1a73e8 = red: 1A (26), green: 73 (115), blue: E8 (232)#1a73e8cc (8 digits)#fff = #ffffff, #abc = #aabbccHEX is ideal for web design — it is compact, universally supported in CSS, and easy to copy-paste between design tools.
RGB expresses colour as three values from 0–255 for Red, Green, and Blue.rgb(26, 115, 232) is the RGB equivalent of #1a73e8. RGBA adds a fourth value (0–1) for alpha transparency:rgba(26, 115, 232, 0.8).
RGB is useful when you need to:
opacity property)HSL (Hue, Saturation, Lightness) is the most human-intuitive colour format.hsl(214, 80%, 51%) means hue at 214 degrees (blue), 80% saturation, 51% lightness.
HSL is excellent for programmatic colour manipulation — generating shades of a colour by adjusting lightness, or creating harmonious palettes by rotating the hue.
CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive colour model used exclusively in print production. Digital screens use RGB (additive light); printers use CMYK (ink on paper, where adding pigments subtracts light). CSS does not support CMYK — it is a print design concern only.
| Format | Range | Used in | Best for |
|---|---|---|---|
| HEX | #000000–#ffffff | CSS, design tools | General web use, copying between tools |
| RGB | 0–255 per channel | CSS, canvas, WebGL | Programmatic manipulation, opacity control |
| HSL | H: 0–360, S/L: 0–100% | CSS, design tokens | Colour system design, shade generation |
| HSV/HSB | H: 0–360, S/V: 0–100% | Photoshop, design tools | Colour picker interfaces |
| CMYK | 0–100% per channel | Print production | Offset printing, commercial print design |
| Pantone | Numbered swatch system | Brand guidelines, print | Brand colour matching across print runs |
Understanding colour formats makes you a more effective designer and developer — you will know instinctively which format a tool expects, what a colour value means, and when to convert between them. Use HEX for web design shorthand, HSL for programmatic colour systems, RGB for canvas and WebGL work, and CMYK only for print output. The ToolsGravity Color Picker & Converter handles all format conversions in one place with immediate visual feedback.