What Is Colour Theory? HEX, RGB, and HSL Explained

What Is Colour Theory?

Digital colour is defined by how displays mix light. Unlike pigment mixing (which is subtractive — mixing colours makes them darker), digital displays use additive colour mixing: combining red, green, and blue light creates brighter colours, and combining all three at full intensity produces white.

The Three Colour Models

RGB (Red, Green, Blue)

The native model for screens. Each channel is 0–255 (8 bits):

rgb(255, 0, 0)     → Pure red
rgb(0, 255, 0)     → Pure green
rgb(0, 0, 255)     → Pure blue
rgb(255, 255, 255) → White
rgb(0, 0, 0)       → Black
rgb(128, 128, 128) → Mid grey

RGBA adds an alpha (opacity) channel: rgba(255, 0, 0, 0.5) — red at 50% opacity.

HEX (Hexadecimal)

Hex is RGB in base-16 notation: #RRGGBB

Each pair is 00–FF (0–255 in decimal):

#FF0000  → rgb(255, 0, 0)   → Red
#00FF00  → rgb(0, 255, 0)   → Green
#1A2B3C  → rgb(26, 43, 60)  → Dark blue-grey
#FFF     → #FFFFFF           → White (3-digit shorthand)

Conversion: Take each pair and convert from hex to decimal:

#3A → 3×16 + 10 = 58
#FF → 15×16 + 15 = 255

HSL (Hue, Saturation, Lightness)

HSL is intuitive for designers because it separates colour (hue) from intensity (saturation) and brightness (lightness):

hsl(hue, saturation%, lightness%)

Hue: 0°–360° around the colour wheel (0=red, 120=green, 240=blue)
Saturation: 0% = grey, 100% = full colour
Lightness: 0% = black, 50% = pure colour, 100% = white

hsl(0, 100%, 50%)    → Pure red
hsl(240, 100%, 50%)  → Pure blue
hsl(120, 50%, 50%)   → Mid-toned green
hsl(0, 0%, 50%)      → Mid grey

Why HSL is easier for UI design:

Change lightness to create button states (hover, active)
Change saturation to create disabled states
Rotate hue to create harmonious colour schemes

Colour Harmony Rules

Scheme	Description	Example
Monochromatic	One hue, varying lightness/saturation	5 shades of blue
Complementary	Opposite on the colour wheel	Blue + Orange
Analogous	Adjacent on the wheel	Blue, Blue-green, Green
Triadic	Evenly spaced (120° apart)	Red, Yellow, Blue
Split-complementary	Base + two adjacent to its complement	Blue + Red-orange + Yellow-orange

Accessibility: Colour Contrast

WCAG 2.1 requires minimum contrast ratios for text:

Level	Normal text	Large text (18pt+ or 14pt+ bold)
AA	4.5:1	3:1
AAA	7:1	4.5:1

Contrast ratio formula:

Ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter colour and L2 of the darker.

Dark text on a light background is generally more readable than the reverse. Pure black on pure white = 21:1 (maximum contrast).

Converting Between Models

RGB → HEX:

r=255, g=87, b=51
R: 255 → FF
G: 87  → 57
B: 51  → 33
HEX: #FF5733

RGB → HSL requires a formula — use the Colour Picker to convert between all three models instantly and generate accessible palettes.

What Is Colour Theory? HEX, RGB, and HSL Explained