Color Theory
How color creates meaning, mood, and hierarchy.
The Color Wheel
All color relationships begin with the wheel — a circular arrangement of hues showing how colors relate to each other. Primary colors (red, blue, yellow) cannot be mixed from others. Secondary colors (orange, green, purple) are mixtures of two primaries. Tertiary colors fill the gaps between.
The wheel is not just a diagram. It is a tool for prediction: colors opposite each other (complementary) create maximum contrast. Colors beside each other (analogous) create harmony. Colors equally spaced (triadic) create balance.
Every style on this site uses the wheel differently. Art Deco uses complementary pairs (gold and black). Art Nouveau uses analogous greens. Memphis deliberately clashes colors that the wheel says should not meet.
Active accent
#6200ee
Warm and Cool
The wheel divides into two hemispheres: warm (red, orange, yellow) and cool (blue, green, purple). This division is not arbitrary — it maps to human experience. Fire is warm. Ice is cool. Sunlight is warm. Moonlight is cool.
Temperature is the fastest way to create mood. Switch between styles on this site and notice: Victorian is warm (mahogany, gold, bronze). Swiss International is deliberately neutral (gray ground, red signal accent — the red is functional, not atmospheric). Nordic Minimal is warm-neutral (cream, sage). The temperature tells you how the style wants you to feel before you read a word.
A single warm element in a cool composition draws the eye immediately. A single cool element in a warm composition creates distance. Temperature contrast is one of the most powerful tools in the designer's vocabulary.
Value and Contrast
Value is how light or dark a color is — independent of its hue. A dark blue and a dark red have different hues but similar values. Value creates readability: text must differ in value from its background, or it disappears.
High-value contrast (light on dark, or dark on light) creates drama and clarity. Low-value contrast (similar lightness) creates subtlety and calm. Compare Art Deco (maximum value contrast: gold on black) with Neomorphism (minimal value contrast: same-colored surfaces distinguished only by shadow).
Material Design takes this further with its HCT color space — measuring 'tone' (similar to value) and guaranteeing that text always has sufficient contrast against its background. A tone difference of 50 guarantees WCAG 4.5:1 contrast.
Saturation
Saturation is a color's intensity — how vivid or muted it is. Pure red is fully saturated. Gray-red (dusty rose) is desaturated. Saturation controls energy: saturated colors are loud, demanding, energetic. Desaturated colors are quiet, sophisticated, restrained.
Notice the saturation levels across styles: Memphis uses fully saturated colors (maximum energy, maximum clash). Cottagecore uses deeply desaturated colors (quiet, aged, natural). Bauhaus uses saturated primaries but only three of them (controlled energy).
A common mistake: using too many saturated colors simultaneously. When everything is loud, nothing is loud. Saturation works best when it is rare — one vivid accent against a field of neutrals.
Color Harmony
Harmony is the relationship between colors in a composition. The classical harmonies (complementary, analogous, triadic, split-complementary) are starting points, not rules. Every style interprets harmony differently.
Complementary (opposites): maximum contrast, maximum energy. Art Deco's gold and deep blue-black. Analogous (neighbors): smooth, natural, unified. Art Nouveau's greens and warm creams. Monochromatic (one hue, many values): sophisticated, restrained. Dark Luxury's near-black palette with one warm accent.
The most important lesson: harmony is not about following formulas. It is about intention. Memphis deliberately breaks harmonic rules — and the disharmony is the harmony. The clash is intentional, consistent, and therefore coherent.
Color as Communication
Color communicates before it decorates. Red means danger, passion, urgency. Blue means trust, calm, distance. Green means nature, growth, safety. These associations are partly cultural, partly biological — and every designer must know them.
But color meaning is also contextual. Red in Victorian means velvet and theater. Red in Bauhaus means the primary color assigned to the square. Red in Web Brutalism means nothing — it is just #FF0000. The same hue carries different meaning in different systems.
The styles on this site demonstrate this beautifully. Switch between them and watch how the same page changes meaning through color alone. The words do not change. The structure does not change. Only the color changes — and yet the entire feeling transforms.