This Color Theory Cheat Sheet is everything a designer needs: from the color wheel to WCAG contrast, harmonies, OKLCH, psychology, print, and historical palettes.
The foundation of all color relationships. Understanding how hues relate on the wheel is the first step toward intentional color decisions.
HSL is the most intuitive color model for designers. It maps directly to how we think about color: what color is it, how vivid is it, how light or dark?
The pure color identity. Position on the color wheel. 0°/360° = red, 120° = green, 240° = blue.
Colorfulness. 0% = gray, 100% = fully vivid. Desaturating adds neutral gray to the hue.
0% = black, 50% = full color, 100% = white. At 100% L, all hue is lost to white.
HSL vs HSB/HSV: HSL uses Lightness where 50% = full color. HSB uses Brightness where 100% = full color. CSS uses HSL. Photoshop uses HSB. Same color space, different coordinate systems.
Harmonies are systematic relationships between hues on the wheel. Each type produces a different emotional quality and degree of visual tension.
Opposite on the wheel (180°). Maximum contrast. Use one dominant (70%), one accent (30%). Vibrates when used at equal area and equal lightness.
3-5 adjacent hues within 30-60°. Naturally harmonious, found in nature. Add a complementary pop for hierarchy.
3 colors at 120°. Vibrant and balanced. Designate one dominant, one secondary, one accent (60/30/10).
Base color plus two colors flanking its complement. High contrast but less jarring than pure complementary.
4 colors as two complementary pairs. Rich but needs a clear dominance hierarchy to avoid visual chaos.
One hue at varying saturation and lightness. Cohesive and elegant. Add sufficient value difference for contrast.
Johannes Itten's 1961 framework from "The Art of Color" identifies seven distinct types of color contrast. Understanding these is fundamental to intentional color composition.
The most basic contrast, using different hues at full saturation. Red, yellow, and blue together create maximum hue contrast.
Using colors of differing lightness. Black on white is the extreme. Value contrast drives readability above all else.
Cool hues vs warm hues. Warm colors advance; cool colors recede. Creates atmospheric depth in illustration.
Opposite colors placed together. Each makes the other appear more intense. The eye searches for balance between them.
A color appears to change depending on surroundings. Gray looks greenish on red, reddish on green.
Vivid vs muted. A saturated hue surrounded by grayed-down versions of itself pops powerfully.
Area-based contrast. A small area of intense warm color can balance a large area of cool neutral.
Generate a full 11-stop design system scale from any base color, with values ready to copy in HEX, HSL, or OKLCH.
How it works: Stops are spaced using perceptual lightness, from 97% (50) to 7% (950). This matches how Tailwind v3, Radix UI, and Material 3 generate their scales, unlike naive HSL mixing which looks muddy at the extremes.
Three fundamental ways to modify a base color by adding white, gray, or black respectively.
In practice: Design systems use 9-11 stop scales. Tools like Radix, Tailwind, and Material use perceptual lightness (OKLCH), not simple HSL mixing, because HSL-mixed dark stops can look greenish or brownish.
Color contrast is a legal accessibility requirement in many contexts. Use the checker below to verify any color pair against WCAG 2.1 and the newer APCA standard.
Use the Color Contrast Checker tool for a full WCAG report.
WCAG contrast uses a weighted average of linearized RGB. Green contributes 71.5%, red 21.3%, blue 7.2%, matching human cone sensitivity. The exact formula is defined in the W3C WCAG 2.1 specification.
Advanced Perceptual Contrast Algorithm. Accounts for polarity (dark-on-light vs light-on-dark) and font weight. More accurate for real-world readability. See the APCA documentation for the scoring model.
UI components and icons need 3:1 against adjacent colors (WCAG 1.4.11). Often missed: check borders on inputs, icon fills, and focus rings.
The same color pair can pass or fail WCAG depending purely on font size and weight. Larger, heavier text needs less contrast.
Bold text at the same color reads as higher contrast. A 3:1 ratio is sufficient for bold 14pt+ text. Thin fonts may need AAA ratios even at large sizes.
Use underlines for links, not just color changes. WCAG 1.4.1: color must not be the only visual means of conveying information.
When both foreground and background are chromatic, run the WCAG formula on both. Saturated complementary pairs may pass ratio but cause chromatic aberration.
Placeholder text needs 4.5:1. Disabled states are exempt (WCAG 1.4.3), but consider low-vision users who may not perceive the disabled affordance.
When a color lives outside a target gamut, it must be handled. Clipping and compression produce different results with different trade-offs.
Channel values above the gamut ceiling are cut to the maximum. Fast but destructive. Hue shifts and lost highlight detail — like overexposing a photo.
The entire tonal range is scaled to fit within the gamut. No information lost, but the result is slightly desaturated. Used in professional ICC profiles.
ICC profiles define four intents: Perceptual (compress all), Relative Colorimetric (clip + shift white point), Saturation (maximize vividness), Absolute Colorimetric (clip, preserve white).
CSS Color 4 lets you specify P3 colors with sRGB fallback via @media (color-gamut: p3). Browsers clip out-of-gamut values to the nearest in-gamut color.
Electric blues, vivid cyans, and saturated greens are the most common gamut casualties in print. In digital, HDR highlights often clip on SDR screens.
OKLCH is the modern CSS color space for perceptually uniform color. Equal L values truly look equally bright across all hues — unlike HSL.
oklch(L% C H) — L = 0-100% lightness, C = 0-0.4 chroma, H = 0-360° hue. Supported in all modern browsers from 2023 onward, and specified in CSS Color Level 4.
color(display-p3 1 0 0) gives roughly 50% wider gamut than sRGB. Use @media (color-gamut: p3) to progressively enhance.
Generates consistent lightness steps across hues. HSL-generated scales look uneven: yellows appear lighter than purples at the same L value.
CSS Color 4 includes rec2020 and other ultra-wide gamuts. color(rec2020 ...) future-proofs for HDR web displays.
Charts have their own color rules. The wrong palette can create false patterns or exclude colorblind users from understanding your data entirely.
Rainbow colormaps create false perceptual boundaries where none exist. The green-to-yellow transition appears as a sharp edge. They fail for colorblind users and look different in grayscale.
Cynthia Brewer's ColorBrewer2.org provides rigorously tested palettes rated for colorblind safety, print safety, and photocopy safety. Essential for any data designer.
Use hue to distinguish categories. Use lightness to show magnitude. Saturation works for emphasis but not quantity. Avoid encoding two different dimensions with both hue and saturation.
Never use red and green as the primary distinction. Use shape, texture, or label redundancy. The Okabe-Ito palette is the gold standard for colorblind-safe categorical data.
Color temperature describes the perceived warmth or coolness of a color. It affects spatial perception, emotional response, and appetite.
Energetic, urgent, inviting. Advance toward the viewer. Increase perceived temperature and appetite. Used in CTAs, food, and entertainment.
Calm, trustworthy, spacious. Recede from the viewer. Lower perceived temperature. Used in finance, tech, healthcare, and productivity.
Pick two colors and see how they mix in additive (light) and subtractive (pigment) models — which produce very different results.
Mixing light wavelengths. Red + Green = Yellow. Red + Blue = Magenta. All three = White. Used in screens, projectors, and LEDs.
Inks absorb wavelengths. Cyan + Magenta = Blue. Magenta + Yellow = Red. All three produce dark brown — which is why printing needs a dedicated black (K) ink.
Beyond Pantone, several industry-standard systems define and communicate color across manufacturing, architecture, and product design.
Describes color in three dimensions: Hue (H), Value (V), and Chroma (C), written as H V/C. The first scientifically rigorous perceptual color system.
Based on how humans perceive color, not physics. Describes similarity to six elementary colors: white, black, yellow, red, blue, and green.
Standardized color matching for paints and coatings. RAL Classic has 215 colors by 4-digit number. RAL 9005 is the most specified matte black in architecture.
Proprietary spot color system. Each color is premixed to a specific formula, guaranteeing identical reproduction globally. C (coated) and U (uncoated) variants for different paper stocks.
Screen colors and print colors are fundamentally different. Understanding why prevents expensive surprises at the press.
Monitors emit RGB light. Printers lay down CMYK inks on paper. The CMYK gamut is smaller: many vivid RGB colors physically cannot be reproduced in ink — this is called gamut clipping.
Pantone Matching System uses premixed inks printed as a single layer, bypassing CMYK limitations. One PMS color guarantees exact reproduction across any printer worldwide.
PMS C (coated) = glossy paper, ink sits on surface, result is brighter. PMS U (uncoated) = matte paper, ink absorbs in, result is more muted. PMS 286 C and 286 U look noticeably different.
Simulating print output on screen. In Photoshop: View > Proof Colors > CMYK. Always request physical proofs for critical color work.
RGB colors that typically fall outside CMYK: bright cyan-blue, electric green, vivid violet, neon orange. Desaturate by 15-20% when preparing for print.
Total Area Coverage is the sum of all CMYK channel percentages. Most presses cap at 280-320%. Exceeding TAC causes ink not to dry properly.
Color communicates before words. These associations are partly universal, partly cultural — always context-dependent.
Urgency, passion, danger, energy, appetite
Enthusiasm, warmth, creativity, affordability
Optimism, attention, caution, happiness
Nature, health, growth, money, success
Trust, calm, intelligence, loyalty, professionalism
Royalty, mystery, creativity, wisdom, luxury
Power, elegance, sophistication, authority
Balance, neutrality, calm, professionalism
Every design era produced a signature palette. Click any swatch to copy its hex value.
The eye is not a camera. Several optical effects can make identical colors appear different — or different colors appear identical.
The same color looks different against different backgrounds. Both center squares below are #888:
The visual system compensates for ambient light to perceive stable object colors. This is why "The Dress" debate happened: different assumptions about ambient light led to completely different perceived colors.
Complementary colors at equal lightness placed side by side create an optical vibration. Avoid saturated complementary pairs at the same lightness in UI design.
Stare at a saturated color then look at white and you will see its complement. Caused by photoreceptor fatigue — explains opponent-process theory.
Changing one color in a pattern shifts the perception of all others. Fine red lines on blue feel purple due to optical mixing. Used in textiles and pointillist painting.
In dim light, the eye shifts from cones (color) to rods (brightness). Reds darken faster than blues — why night vision sees less red. Key for dark mode design.
Distilled principles from production design, accessible systems design, and brand strategy.
60% dominant, 30% secondary, 10% accent. Prevents visual chaos and creates natural hierarchy.
Primitives (blue-500) to Semantics (color-action-primary) to Component (button-bg). Semantic tokens decouple meaning from value, enabling theming at scale.
Pure grays (#808080) feel cold and lifeless. Use warm-tinted or cool-tinted neutrals that match your brand temperature. Great products never use pure neutral gray.
Do not simply invert. Use separate dark-specific scales. Reduce saturation slightly. Elevate surfaces by lightening them (Material 3's approach) rather than by adding shadows.
About 8% of men have red-green deficiency. Never convey info by hue alone. Test with Chrome DevTools' vision deficiency emulator.
Use @media (color-gamut: p3) to progressively enhance. P3 reds and greens are visibly more vivid on capable displays, giving brand colors more impact.
Color meanings are not universal. A color that signals trust in one culture may signal mourning in another — critical knowledge for global design.
| Color | West | East Asia | Middle East | India |
|---|---|---|---|---|
Red | Love, danger, excitement | Luck, prosperity (China), bridal | Danger, evil | Purity, bridal |
White | Purity, weddings, peace | Mourning, death | Purity, peace | Mourning, death |
Black | Power, mourning, luxury | Inauspicious; formal | Mystery, sophistication | Evil, darkness |
Yellow | Caution, optimism, sunshine | Royalty, luck, earth element | Wisdom, royalty (gold) | Auspicious, sacred (saffron) |
Green | Nature, environment, go | Health; exorcism in folk tradition | Islam, paradise, fertility | Life, harvest, nature |
Blue | Trust, calm, loyalty | Immortality, healing | Safety, protection (evil eye) | Love, Krishna, divinity |
Purple | Royalty, luxury, mystery | Wealth (historical royalty) | Royalty, mourning | Sorrow in some regions |