Open any CSS file, design tool, or image editor and you will immediately encounter a bewildering variety of color representations: #FF6B35, rgb(255, 107, 53), hsl(18, 100%, 60%), cmyk(0, 58, 79, 0). Each of these represents the exact same color. So why do multiple formats exist, and which should you use? The answer depends on what you are doing and who needs to work with the value.
Hexadecimal color notation represents red, green, and blue channels each as a two-digit number in base 16 (0–9, then A–F). Each channel ranges from 00 (0 in decimal, minimum intensity) to FF (255 in decimal, maximum intensity). So #FF6B35 means: Red = 255 (maximum), Green = 107 (medium), Blue = 53 (low) — producing an orange tone.
Use HEX when: writing CSS or HTML, sharing colors with developers, specifying brand colors in style guides, or working with any web context. It is compact, copy-paste friendly, and universally supported.
Limitation: HEX values are difficult to intuit. You cannot look at #3B82F6 and immediately know it is a medium blue. You need to see it rendered.
RGB expresses colors as three integers from 0 to 255. It is the native language of screens — your monitor creates every color by mixing red, green, and blue light at different intensities. RGB is an additive color model: mixing all channels at maximum (255, 255, 255) gives white; all at minimum (0, 0, 0) gives black.
Use RGB when: working in JavaScript (where color manipulation is easier with numbers), using canvas APIs, or when you need to programmatically adjust color values (add 20 to the red channel, etc.).
HSL is a human-centric color model designed to match how designers actually think about color. Hue is the color's position on a 360° color wheel — 0° and 360° are red, 120° is green, 240° is blue. Saturation is how pure or grey the color is (0% = fully grey, 100% = fully saturated). Lightness is how light or dark (0% = black, 100% = white, 50% = the pure color).
Use HSL when: creating color variations (keep hue fixed, adjust lightness to get tints and shades), building design systems, or making colors that need to feel harmonious. It is far easier to intuit than HEX or RGB.
💡 Designer tip: HSL is ideal for creating accessible color palettes. To ensure text contrast, you can precisely control lightness: keep H and S constant but set L to 15% for dark text and L to 92% for a light background, guaranteeing readable contrast.
CMYK is the color model of the physical printing world. Unlike RGB (which adds light), CMYK is subtractive — inks absorb light rather than emitting it. When you mix cyan, magenta, yellow, and black inks, each ink absorbs certain wavelengths, and the remaining wavelengths reflect to your eye as color.
Use CMYK when: preparing files for professional printing — business cards, posters, brochures, packaging. Screen designs (RGB/HEX) must be converted to CMYK before printing, and colors can shift noticeably in this conversion.
| Use Case | Best Format |
|---|---|
| Web/CSS styling | HEX or HSL |
| JavaScript manipulation | RGB |
| Design systems and theming | HSL |
| Brand style guides | HEX + CMYK |
| Professional printing | CMYK |
| Screen-to-print conversion | Convert RGB → CMYK |
These two formats are frequently confused even by experienced designers. Both use Hue and Saturation, but the third component differs in ways that affect colour selection significantly.
HSL (Hue, Saturation, Lightness): Lightness ranges from 0% (black) to 100% (white), with the pure colour at 50%. This model is intuitive for creating tints (add white by increasing lightness above 50%) and shades (add black by decreasing below 50%). CSS natively supports HSL.
HSV (Hue, Saturation, Value/Brightness): Value ranges from 0% (black) to 100% (the pure colour). White is achieved by combining low saturation with high value. HSV is what you typically see in colour picker wheels in design software — Photoshop, Illustrator, and Figma all use HSV internally.
Practical difference: in HSL, a fully saturated colour at 100% lightness is white. In HSV, a fully saturated colour at 100% value is the pure vivid colour. For CSS variables and design tokens, use HSL. For design tool colour pickers, you are working in HSV.
Every colour format has an opacity extension. RGBA adds a fourth value (0–1) for transparency: rgba(255, 107, 53, 0.8) is 80% opaque. HSLA does the same: hsla(18, 100%, 60%, 0.5). 8-digit HEX appends two hexadecimal digits for alpha: #FF6B35CC where CC = 204 in decimal (80% of 255). All three are valid in modern CSS. The 8-digit HEX format is supported in all modern browsers and is especially convenient for design tokens in Figma and Sketch, where values are exported as HEX.
The formats discussed above all operate within the sRGB colour space, which covers approximately 35% of colours visible to the human eye. Modern displays and design workflows are expanding beyond this limit.
color(display-p3 r g b) syntax.| Use Case | Best Format | Why |
|---|---|---|
| CSS variables / tokens | HEX or HSL | Compact, universal, easy to copy |
| JavaScript manipulation | RGB or HSL | Easy arithmetic on channel values |
| Design systems | HSL or OKLCH | Intuitive for generating colour scales |
| Opacity effects | RGBA or HSLA | Direct alpha channel control |
| Print production | CMYK | Required by print workflows |
| Wide-gamut displays | Display P3 | Accesses colours beyond sRGB |
Pick any color and see HEX, RGB, HSL, HSV, and CMYK values simultaneously.
Open Color Converter →