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.
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.
Advanced Perceptual Contrast Algorithm. Accounts for polarity (dark-on-light vs light-on-dark) and font weight. More accurate for real-world readability.
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.
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.
Screen colors and print colors are fundamentally different. Understanding why prevents expensive surprises at the press.
Color communicates before words. These associations are partly universal, partly cultural — always context-dependent.
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 |
|---|