Offered by Dead Brands
Color choices fail in predictable ways: muddy mixes, clashing accents, text nobody can read.
Use it over MCP: connect to https://mcp.deadbrands.co/hub/mcp and call skills_get with slug color-theory-in-practice.
# Color Theory in Practice Credit: SteTy — published free in the Skills Hub Color choices fail in predictable ways: muddy mixes, clashing accents, text nobody can read. Color theory gives you a small set of geometric relationships on the color wheel, a discipline for controlling saturation and value, and hard accessibility numbers — enough to make any palette decision defensible instead of a matter of taste. ## Overview Working color starts from the artist's wheel (red–yellow–blue primaries, refined by Johannes Itten at the Bauhaus) and from three independent dimensions every color has: **hue** (which color), **saturation/chroma** (how intense), and **value/lightness** (how light or dark). Most beginner palettes fail on value and saturation, not hue — two colors can be perfect wheel partners and still fight because both are at full saturation, or vanish into each other because their values match. Professional practice: choose hues by wheel geometry, then engineer the value structure so the composition reads in grayscale, then ration saturation like a budget. ## Core Principles - **Value does the work; hue does the decorating.** Convert any design to grayscale: if the structure still reads clearly, the palette will work. If elements merge in grayscale, no hue change will save them. - **Saturation is a budget.** One or two high-chroma elements per composition. When everything is vivid, nothing is — full saturation everywhere is the single most common amateur error. - **Warm advances, cool recedes.** Warm colors (red, orange, yellow) appear to come forward; cool colors (blue, green, violet) recede. Use warm for focal points, cool for backgrounds and depth. - **Simultaneous contrast** — a color shifts appearance depending on its neighbors: gray on red looks greenish, the same orange looks brighter on blue. Always judge colors in context, never as isolated swatches. - **Color is relative and cultural.** Meanings are learned, not universal: red signals luck and celebration in China, danger or debt in Western finance; white is bridal in the West, mourning in parts of East and South Asia. Know your audience. - **Never encode by hue alone.** About 8% of men and 0.5% of women have red-green color vision deficiency. Pair color with labels, icons, patterns, or position so information survives without hue. ## Techniques **Wheel harmonies (hue geometry):** - **Complementary** — two hues opposite (180°): blue/orange, red/green, yellow/violet. Maximum tension and vibrancy; the classic film-poster pairing is teal and orange because skin tones are orange and teal is their complement. Rule: use a 70/30 or 80/20 split — equal halves vibrate unpleasantly. - **Split-complementary** — one hue plus the two flanking its complement (e.g., blue + red-orange + yellow-orange). Nearly the same energy, far more forgiving. - **Analogous** — three to five neighbors (e.g., blue, blue-green, green). Serene, natural, cohesive; needs a value or saturation accent to avoid monotony. - **Triadic** — three hues 120° apart (red/yellow/blue, or orange/green/violet). Bold and balanced; let one dominate and use the other two as accents. - **Tetradic (double complementary)** — two complementary pairs forming a rectangle. Rich but the hardest to balance; pick a clear dominant. - **Monochromatic** — one hue, varied value and saturation. Instantly elegant; texture and value contrast must carry the design. **Value and saturation control:** - **The 60-30-10 rule** — 60% dominant color (usually the least saturated), 30% secondary, 10% high-chroma accent. Borrowed from interior design; works on screens, posters, and rooms. - **Squint test** — squint or blur: the focal point should be the highest value-contrast or highest-chroma spot. If three spots compete, demote two. - **Muddy-color rescue** — mixes go muddy when complementary hues blend at similar values. Fix by separating values (darken one side) rather than adding more pigment or saturation. **Accessibility numbers (WCAG 2.x):** contrast ratio = (lighter luminance + 0.05) ÷ (darker luminance + 0.05), ranging 1:1 to 21:1 (black on white). - **AA normal text: 4.5:1 minimum.** AA large text (≥18pt, or 14pt bold): **3:1**. - **AAA normal text: 7:1.** AAA large text: **4.5:1**. - **UI components and essential graphics** (borders, icons, chart lines): **3:1** against adjacent colors (WCAG 2.1, SC 1.4.11). - **Anchor fact:** #767676 on white = 4.54:1 — the lightest pure gray that passes AA for body text. #777777 = 4.47:1 and *fails*. One hex step is the whole game. - Low-contrast text is the most common accessibility failure on the web — found on roughly 79% of top home pages in the 2025 WebAIM Million audit. ## Worked Examples - **Fixing a failing palette:** light-gray text #999999 on white = 2.84:1 (fails everything). Keep the hue family, deepen value to #595959 = 7:1 — passes AAA, still reads as "soft gray." - **Building a poster palette:** analogous base of deep blue → teal (60%), cool gray-blue surfaces (30%), one complementary orange accent for the title and call-to-action (10%). Warm accent advances off the cool field; text pairs checked at 4.5:1+. ## Common Pitfalls - **Red/green as the only signal** for errors vs. success, charts, or team colors — invisible distinction for millions of users. Add icons or labels. - **Rainbow charts** — assigning maximum-saturation hues to every category destroys ordering; use a sequential single-hue ramp for quantities. - **Pure black text on pure white for long reading** — 21:1 can glare; many reading interfaces use near-black (#1a1a1a range) for comfort while staying far above AAA. - **Designing on an uncalibrated bright monitor** — palettes that glow in the studio wash out on projectors and phones. Test on a mid-range screen at 50% brightness. ## Practice Drills 1. Take a favorite movie poster. Identify its harmony type, its 60-30-10 split, and its warm/cool structure. Recreate the palette as five swatches. 2. Pick any two-color text/background pair from a site you use daily and run it through a contrast checker (e.g., WebAIM's). Fix failures by changing value only. 3. Redesign a 4-color chart palette for a red-green colorblind reader: switch to blue/orange plus direct labels, then verify in a colorblindness simulator. ## When to Use and Limits - **Use it when:** a task calls for color theory in practice, as laid out in the Techniques and Worked Examples above. - **Watch first for:** Red/green as the only signal; Rainbow charts; Pure black text on pure white for long reading (see Common Pitfalls). - **Limits:** this is a general reference drawn from public sources; it is a starting point for practice, not a full course, and attributions and dates should be checked against the cited sources before quoting them. ## Quick Reference | Item | Value | |---|---| | Complementary split of effort | 70/30 or 80/20 | | Palette budget | 60-30-10 | | AA body text | ≥ 4.5:1 | | AA large text / UI elements | ≥ 3:1 | | AAA body text | ≥ 7:1 | | Lightest AA gray on white | #767676 (4.54:1) | | Red-green colorblindness | ~8% of men, ~0.5% of women |