Complete Color Theory Guide

Most color theory tutorials stop at the wheel. This one keeps going to the point where theory becomes a palette: the three dimensions every color has, the notation systems you actually type into CSS, and the six harmony rules with concrete examples. Everything here is framed for interface and brand work rather than paint on canvas.

The color wheel in 60 seconds

The wheel arranges hues by their relationships. In the traditional model used in design education, the primary colors — red, yellow and blue — mix to make the secondaries: orange, green and violet. Mix a primary with an adjacent secondary and you get the six tertiaries, with names like red-orange and blue-violet. That's twelve steps around the wheel, and every harmony rule below is simply an angle between those steps.

One more distinction worth internalizing: warm hues (reds through yellows) visually advance and feel energetic, while cool hues (greens through violets) recede and feel calm. Interfaces lean cool for large surfaces and save warm hues for moments that need attention.

The wheel isn't just a poster, either — it's a coordinate system. Hue is measured as an angle from 0° to 360°, which is exactly the hue channel in HSL. That's why "rotating a color around the wheel" is a real operation you can perform precisely, and why every harmony rule below can be written as a bit of arithmetic.

The three dimensions: hue, saturation, lightness

Every color is a position in three dimensions, and each dimension does different work in a UI:

• Hue is the position on the wheel, measured 0–360°. It carries identity — it's what people mean when they say "our brand color".
• Saturation is intensity, from 0% (gray) to 100% (fully vivid). It sets mood and urgency: dial it down for anything that must sit quietly, up for actions.
• Lightness is the amount of light, from 0% (black) to 100% (white). It does the heavy lifting: contrast, hierarchy and readability are mostly lightness differences.

A practical palette is usually one hue identity plus carefully tuned saturation and lightness around it. That's why "make it lighter" fixes more contrast problems than "make it a different color" ever will.

HEX vs RGB vs HSL

The same violet can be written three ways:

Notation	Example	Best for
HEX	#7C3AED	Design handoff, CSS, sharing colors
RGB	rgb(124, 58, 237)	Screen work, especially with alpha: rgba(...) shadows and overlays
HSL	hsl(262, 83%, 58%)	Building shades, tints and harmonies

HEX packs the red, green and blue bytes — 7C is 124, 3A is 58, ED is 237 — into one compact token, which is why it became the lingua franca between design tools and code. Appending two more digits (#RRGGBBAA) adds transparency while staying in HEX. RGB states the same three channels directly and is what you reach for when adding transparency. HSL is the human-readable one: "hue 262°, quite saturated, a bit lighter than the midpoint." Because its channels map to how designers think, HSL is the notation for deriving colors: keep the hue, move the lightness, and you have a shade ramp or a harmony partner.

The six harmony rules

Each harmony rule is an angle recipe on the wheel. We'll use the violet hsl(262, 83%, 58%) — the HEX #7C3AED from the table above — as the base color throughout.

Monochromatic

One hue, varied by saturation and lightness. Use it for calm, editorial, inherently cohesive interfaces — the safest harmony and a natural fit for dashboards and long-form reading.

Example from the base: hsl(262, 83%, 70%), base hsl(262, 83%, 58%), hsl(262, 83%, 42%), plus a near-neutral tint like hsl(262, 30%, 96%) for backgrounds.

Analogous

The two neighbors at ±30°. Use it for rich but low-tension palettes — brand sites and content-heavy pages where nothing should shout.

Example: hsl(232, 83%, 58%) (a deeper blue) and hsl(292, 83%, 58%) (a magenta-leaning violet) sit naturally beside the base.

Complementary

The hue at +180°. Use it for a single accent that must pop — primary buttons, focus states, badges. Hue 262° + 180° = hue 82°, a yellow-green: maximum hue contrast, and loud if both sides run at full saturation, so let one dominate.

Split complementary

The two neighbors of the complement, at +150° and +210°. Use it when you want complementary energy with less clash. From the base, that's hue 52° (a warm gold) and hue 112° (a fresh green) instead of the single 82° partner.

Triadic

Two hues at +120° and +240°, evenly spaced. Use it for playful, balanced palettes with three equal voices — illustrated products, education, events. From the base: hue 22° (roughly #EA7C3A, a burnt orange) and hue 142° (an emerald green).

Tetradic

Two complementary pairs, at +90°, +180° and +270°. Use it for genuinely complex systems such as categorical data visualizations — and impose discipline, because four hues only work when one clearly dominates. From the base: hues 352° (pink), 82° (yellow-green) and 172° (teal).

You never need to compute these angles by hand: pick a harmony mode and the generator applies the wheel math for you (the harmony section of how it works shows exactly what it's calculating).

Putting it together: a 5-color palette

Real interface palettes are three chromatic colors plus two neutrals. A workable recipe from the base above:

• Primary: hsl(262, 83%, 58%) — the identity color.
• Secondary: an analogous or triadic partner, slightly detuned in saturation so the primary stays in charge.
• Accent: a color from the complementary side, reserved for actions that must stand out.
• Light neutral: a background tinted with the primary hue, around hsl(262, 40%, 97%).
• Dark neutral: near-black text with the same tint, around hsl(262, 30%, 15%).

The tinted neutrals are the quiet secret of professional palettes — they keep every surface feeling like one family. Build the palette once, then treat it as a draft: lock the colors that already work, regenerate only the rest, and check each new candidate against the survivors. The AI color palette generator composes exactly this structure automatically — three chromatic colors plus a light and a dark neutral — which is why its output is usable in an interface rather than just in a swatch row.

Quick reference

• Hue = position (0–360°), saturation = intensity, lightness = brightness.
• HEX for handoff, RGB for transparency, HSL for deriving colors.
• Harmony is angular: ±30° analogous, 180° complementary, ±120° triadic, ±90°/±180° tetradic.
• Tint your neutrals with the brand hue instead of using pure grays.
• Contrast lives in lightness — check ratios before shipping.