The Foreground–Background Relationship
Every pattern has at least two elements: a background fill and a foreground motif. The relationship between these two colours — their hue, saturation, and lightness — determines the pattern's visual impact. High contrast (dark on light) creates bold, graphic patterns. Low contrast creates subtle textures. Tonal palettes (same hue, different value) create sophisticated, refined surfaces.
HSL: The Designer's Colour Model
Work in HSL (Hue, Saturation, Lightness) rather than HEX or RGB. HSL makes it trivial to create harmonious palettes: fix the hue, vary the saturation or lightness. A foreground at HSL(245, 70%, 62%) and a background at HSL(245, 50%, 95%) will always look balanced because they share the same hue family.
Colour Harmony Schemes
The classic harmony schemes all work beautifully with patterns. Monochromatic: one hue at different values — the safest, most versatile choice. Analogous: adjacent hues (e.g., indigo + violet + blue) — harmonious and rich. Complementary: opposite hues (e.g., indigo + amber) — vibrant and high-energy. Triadic: three equally spaced hues — complex and lively.
Opacity vs Separate Colours
Instead of choosing a specific foreground colour, use opacity on a single colour against a variable background. A black shape at 10–20% opacity works on any background colour — the background tints the shape automatically. This technique makes your SVG patterns context-adaptive: the same pattern file works with any background-color value.
<!-- Opacity-based: works on ANY background colour -->
<circle cx="10" cy="10" r="3" fill="black" fill-opacity="0.12"/>
<!-- vs Fixed colour: only looks good on white -->
<circle cx="10" cy="10" r="3" fill="#e2e8f0"/>The 60-30-10 Rule for Patterns
In pattern design, the 60-30-10 rule means: 60% background colour, 30% primary motif colour, 10% accent colour. This creates visual balance without monotony. The accent colour (used sparingly in the pattern) ties the surface to your brand's accent colour on interactive elements.
WCAG Contrast in Patterns
WCAG 2.2 requires a 4.5:1 contrast ratio for text over backgrounds. When patterns serve as text backgrounds, ensure the most similar region of the pattern (the lightest or darkest point) still meets contrast requirements. Test by placing real text over the pattern and measuring contrast at the worst-case tile position. Tools: Chrome DevTools accessibility panel, WebAIM Contrast Checker.
Colour Temperature & Mood
Warm colours (red, orange, yellow) feel energetic, urgent, and warm. Cool colours (blue, teal, purple) feel calm, trustworthy, and professional. Pattern backgrounds strongly influence page mood — use warm palettes for creative/marketing pages and cool palettes for technical/productivity tools. Neutral palettes (grey, off-white) let content take centre stage.