Color is the fastest signal your brand sends. Before a visitor reads a single word, they have already formed an impression based on your palette. Getting color right is not about personal taste — it is about understanding a few underlying principles and applying them consistently.
The Three Color Relationships That Matter
Color schemes are built on relationships between hues on the color wheel. There are three you need to know:
Complementary: Colors directly opposite on the wheel — blue and orange, red and green, purple and yellow. These create maximum contrast and visual tension. They are excellent for calls-to-action (a blue background with an orange button) but overwhelming if used in equal proportions across an entire design.
Analogous: Colors that sit adjacent on the wheel — blue, blue-green, and teal, for example. Analogous palettes feel harmonious and calm. They work well for backgrounds and supporting UI elements, but lack the contrast needed to direct attention toward specific actions.
Triadic: Three colors evenly spaced around the wheel, forming a triangle — red, blue, and yellow, or orange, purple, and green. Triadic schemes are vibrant and balanced. Used well, they give a design energy without the jarring quality of a pure complementary scheme.
For most product interfaces and marketing sites, a complementary pair handles your primary brand color and CTA color, while analogous tones fill in the neutral and supporting shades.
The 60-30-10 Rule
Professional designers use this proportion system to create balanced layouts without overthinking every color decision:
- 60% of the visual space uses your dominant color — usually a neutral or muted brand tone
- 30% uses a secondary color — your brand’s main color or a strong supporting shade
- 10% uses your accent color — the most vibrant, attention-grabbing color in the palette, reserved for CTAs, highlights, and interactive elements
The discipline here is restraint. The accent color only works if it is rare. If your bright orange CTA button is surrounded by five other orange elements, it stops standing out.
Tints, Shades, and Tones
A complete palette is not just five hex codes. Each key color needs a range:
- Tints (add white): lighter versions for backgrounds, hover states, and disabled elements
- Shades (add black): darker versions for text on colored backgrounds, active states, pressed buttons
- Tones (add gray): desaturated versions for subtle UI components
Most design systems generate 5–10 steps per color (50, 100, 200 … 900 in Tailwind’s notation). You do not need all of them in the beginning, but knowing you can derive them from a single well-chosen base color is important.
Accessibility and Contrast Ratios
Color choices that look beautiful on a high-end display can be completely illegible for people with low vision or color blindness. The WCAG (Web Content Accessibility Guidelines) define specific contrast ratio requirements:
- 4.5:1 minimum for normal text (WCAG AA standard)
- 3:1 minimum for large text (18pt+ or 14pt bold)
- 7:1 for enhanced accessibility (WCAG AAA)
The most common failure: light gray text on a white background. It looks elegant in mockups but fails contrast checks in production. Always verify your text-background combinations before shipping.
Color blindness affects roughly 8% of men and 0.5% of women. Red-green combinations are the most problematic. Never rely on color alone to communicate meaning — always pair color signals with icons, labels, or patterns.
Generate harmonious color palettes from any base color. Explore complementary, triadic, and analogous schemes with hex codes ready to copy.
From Palette to Gradient
Flat colors are clean and versatile, but gradients have made a strong comeback in modern interfaces — particularly for hero backgrounds, cards, and button fills. A gradient that flows between two colors in your palette feels cohesive; a gradient pulled from random colors looks accidental.
The key to a good gradient is choosing colors that are close enough in hue or brightness to transition smoothly, while still having enough difference to be visually interesting. Two colors at 120° apart on the color wheel, both with similar saturation, almost always produce a gradient that works.
Build linear or radial CSS gradients visually. Adjust stops, directions, and opacity, then copy the ready-to-use CSS snippet.
Putting It Together
A practical palette-building workflow:
- Choose a primary brand color that reflects your positioning (calm blue for trust, energetic orange for action, deep green for growth)
- Find its complement for your CTA color
- Choose 2–3 analogous neutrals for backgrounds and body text
- Generate tints and shades for each key color
- Check all text-background combinations against WCAG AA
- Test in grayscale to confirm the hierarchy works without color
The goal is a palette small enough to remember and flexible enough to use across every surface — web, print, social, and product.