Color Models for Web and Print
Different color models serve different purposes. RGB and HEX are for screens; CMYK is for print; HSL is for human intuition about hue, saturation, and lightness.
HEX ↔ RGB
#FF5733:
R = FF₁₆ = 255
G = 57₁₆ = 87
B = 33₁₆ = 51
→ RGB(255, 87, 51)
RGB(100, 149, 237) → HEX:
100 = 64₁₆, 149 = 95₁₆, 237 = ED₁₆
→ #6495ED (cornflower blue)RGB → HSL
Normalise R,G,B to 0-1 range
M = max(r,g,b), m = min(r,g,b)
L = (M + m) / 2
S = (M-m) / (1-|2L-1|) (if L ≠ 0 or 1)
H = 60° × sector offset (depends on which channel is max)When to Use Each
- HEX — CSS/HTML, most common web format
- RGB — screen design tools (Figma, Photoshop)
- HSL — intuitive colour adjustments ("make it 20% lighter")
- CMYK — print files, packaging, branding guidelines
Accessibility: Contrast Ratio
- WCAG AA: contrast ratio ≥ 4.5:1 (normal text)
- WCAG AAA: contrast ratio ≥ 7:1
- Black on white = 21:1 | White on #007BFF = ~4.6:1
Convert color codes: Free Color Code Converter
Colour Code Conversion Quick-Reference Table
| Colour | HEX | RGB | HSL | HSV |
|---|---|---|---|---|
| Red | #FF0000 | 255, 0, 0 | 0°, 100%, 50% | 0°, 100%, 100% |
| Green | #00FF00 | 0, 255, 0 | 120°, 100%, 50% | 120°, 100%, 100% |
| Blue | #0000FF | 0, 0, 255 | 240°, 100%, 50% | 240°, 100%, 100% |
| White | #FFFFFF | 255, 255, 255 | 0°, 0%, 100% | 0°, 0%, 100% |
| Black | #000000 | 0, 0, 0 | 0°, 0%, 0% | 0°, 0%, 0% |
| Orange | #FF8000 | 255, 128, 0 | 30°, 100%, 50% | 30°, 100%, 100% |
How Colour Code Conversion Works
HEX (#RRGGBB) encodes each colour channel as a two-digit hex number (00–FF, representing 0–255). RGB uses three integers 0–255. HSL (Hue, Saturation, Lightness) separates colour identity from brightness — intuitive for design. HSV (Hue, Saturation, Value) is similar but with different lightness semantics. CMYK (Cyan, Magenta, Yellow, Key/Black) is used for print. Converting HEX to RGB: split into pairs and convert each from hex to decimal (FF → 255, 80 → 128). RGB to HEX: convert each decimal to two-digit hex and concatenate.
Conversion formulas: RGB to HSL normalises R, G, B to [0,1]; finds max/min; computes H from which channel is dominant; S from range/lightness. This is algebraically involved but easily done with a colour picker tool. CSS3 supports rgb(), hsl(), hwb(), lab(), and oklch() notations. The oklch() format is increasingly preferred in modern design systems because it has perceptually uniform lightness across all hues — unlike HSL, where perceived brightness varies at the same L value.
Common Mistakes
- Shorthand HEX confusion: #F00 is a valid 3-digit shorthand for #FF0000. Each digit is doubled: #ABC = #AABBCC. Not all tools accept shorthand — expand to 6 digits for maximum compatibility.
- sRGB vs. linear RGB: Standard digital colours use sRGB (gamma-encoded). Physics and rendering calculations require linear RGB (gamma = 1.0). Blending colours in sRGB produces visually incorrect results (midpoints appear too dark). CSS's color-mix() in oklch is designed for perceptually correct blending.
- Print vs. screen colour spaces: RGB is additive (screen); CMYK is subtractive (print). Bright RGB colours (saturated greens, vibrant blues) often cannot be reproduced in CMYK — they fall outside the printable gamut. Design for print in CMYK from the start; converting a bright RGB design to CMYK produces muddy colours.
Frequently Asked Questions
Both use Hue (0–360°) and Saturation. In HSL, Lightness = 0% is black, 50% is the pure hue, 100% is white. In HSV (also called HSB), Value = 0% is black, 100% is the pure hue (white requires S=0 and V=100%). HSL is more intuitive for web design (adjusting brightness while keeping hue/saturation). HSV is more aligned with how artists think about mixing paints and is used in most colour pickers and photo editors.
Screens emit light (RGB additive model) and can display very saturated, bright colours. Printers reflect light from pigments (CMYK subtractive) and have a smaller gamut — especially for bright greens, cyans, and deep blues. The visible gamut difference is called out-of-gamut colours. Colour management systems (ICC profiles) attempt to map between device gamuts, but some colours are simply impossible to reproduce in print as seen on screen.
Web-safe colours are 216 specific HEX values where R, G, B are each one of 00, 33, 66, 99, CC, FF — designed to display consistently on 8-bit (256-colour) monitors of the 1990s. Since virtually all modern displays support millions of colours, web-safe colours are now largely irrelevant. You can freely use any 24-bit hex colour in modern web design. The concept survives mainly in historical contexts and very low-resource embedded display applications.