Design Guide
Color Wheel & Harmonies: Build Palettes That Actually Work
Quick answer: a color wheel helps you choose related hues, but a professional palette is built by assigning those hues to jobs: primary action, secondary accent, background tint, chart color, warning color, and text-safe contrast pair. The harmony is the starting map. The usable interface is the final destination.
Most color advice stops at a charming diagram: complementary colors sit opposite each other, analogous colors sit next to each other, triadic colors are spaced evenly. That is true, but it is not enough. A website does not ship a color wheel. It ships buttons, forms, hero sections, charts, badges, dark mode surfaces, focus rings, and text that has to be readable on real phones in real light.
This guide connects the theory to the work. Open the Color Wheel & Harmonies tool in another tab, choose a base color, then use the sections below to decide which harmony model fits your design goal.
The seven harmony models
Harmony models are controlled rotations around the hue circle. The modern CSS color model still supports HSL, where hue is an angle and saturation/lightness shape the perceived strength of the color. The W3C CSS Color Module Level 4 also defines newer spaces such as Oklab and OKLCH, which are more perceptually consistent for advanced design systems.
| Harmony | How it works | Best use |
|---|---|---|
| Complementary | Base hue plus the hue 180 degrees opposite. | High-impact contrast, simple CTA vs background decisions. |
| Split-complementary | Base hue plus the two hues near the opposite side. | UI palettes that need contrast without looking loud. |
| Triadic | Three hues spaced 120 degrees apart. | Playful brands, charts, creator pages, education visuals. |
| Analogous | Hues close to the base hue. | Calm editorial pages, wellness brands, subtle dashboards. |
| Tetradic | Two complementary pairs. | Complex visual systems, event pages, illustration-heavy sites. |
| Square | Four hues spaced 90 degrees apart. | Balanced multi-section designs where every area needs a color identity. |
| Monochrome | One hue across several lightness levels. | Design systems, product UIs, dark mode, and brand consistency. |
Why split-complementary is often the smart default
Direct complementary colors can look powerful, but they can also vibrate when both colors are saturated. Split-complementary keeps the energy while softening the clash. For a product page, that usually means a primary color, one warm accent for important moments, and one cooler support color for illustration, charts, or secondary UI.
Why analogous is underrated
Analogous palettes are less dramatic, which makes them excellent for pages where the content needs to feel expensive, calm, or mature. The risk is monotony. The fix is not adding random colors; the fix is controlling contrast through lightness, whitespace, typography, and one deliberate action color.
Turn swatches into UI roles
A palette is weak when every swatch is treated equally. A working palette has hierarchy. Give every color a job before you add it to CSS.
- Primary: your main brand/action color. It should carry buttons, active states, and important links.
- Accent: a supporting color used sparingly for highlights, badges, and illustration details.
- Surface tint: a quiet color for section backgrounds, cards, empty states, or callout panels.
- Neutral scale: text, borders, dividers, shadows, and app surfaces. This is where most of the interface should live.
- Semantic colors: success, warning, error, and info. These should be readable first and pretty second.
The improved Color Wheel & Harmonies tool now exports CSS variables so you can move from idea to implementation quickly:
:root {
--ft-palette-1: #0A8D83;
--ft-palette-2: #8D0A4B;
--ft-palette-3: #8D4C0A;
}That is not a complete design system yet, but it is a clean starting point. From there, pair it with Color Palette Generator to build scales, Color Converter to move between HEX, RGB, HSL, and OKLCH, and WCAG Contrast Checker or Contrast Ratio Checker to validate text pairs.
Contrast is where palettes become real
A harmony can be mathematically elegant and still be unreadable. WCAG 2.2 Success Criterion 1.4.3 sets contrast expectations for text: normal text needs at least 4.5:1 at Level AA, while large text needs at least 3:1. The official requirement is documented in WCAG 2.2 Contrast Minimum.
Run these checks before you ship:
- Button text on primary color.
- Link text on the page background.
- Muted text on cards and panels.
- Error, warning, and success messages on their tinted backgrounds.
- Hover, active, disabled, and focus states.
The sneaky failure is hover color. A button can pass contrast in its default state, then fail when the hover state gets lighter. Treat every interactive state as a real foreground/background pair, not as a decorative variation.
A five-minute palette workflow
Use this when you need a practical palette without a full brand process.
- Start with one meaningful base color. Use a logo color, product color, or industry signal. If there is no brand yet, pick one color that matches the desired emotional tone.
- Open the Color Wheel. Try split-complementary first for UI work, analogous for calmer pages, and triadic for more expressive brands.
- Choose a palette intent. Balanced UI, bold campaign, soft editorial, and dark product modes produce different lightness behavior.
- Copy CSS variables or JSON. Do not leave the palette as a screenshot. Move it into a format a developer or design-token file can use.
- Validate contrast. Use the contrast tools before the palette touches production.
Practical examples
1. SaaS dashboard
Start with a calm primary such as teal or blue. Use split-complementary for one warm accent and one cool support color. Keep charts readable by using accent colors at medium saturation and reserving the strongest color for the primary action.
2. Creator landing page
Use triadic harmony if the page needs motion, confidence, and shareable energy. Assign one color to the CTA, one to section highlights, and one to illustrations. Do not make all three colors fight inside the hero.
3. Luxury editorial page
Use analogous or monochrome. Let typography, spacing, and photography do most of the work. The palette should whisper, not shout. A single accent color is enough when the content already has strong visual texture.
4. Dark product UI
Use monochrome for the primary scale and split-complementary for controlled accents. On dark backgrounds, reduce saturation and increase lightness carefully. Neon colors can look modern, but they fatigue the eye quickly when used as body text.
Production recipes
The fastest way to avoid a generic palette is to connect each harmony to a real product situation. Start from one of these recipes, then open the linked state in the Color Wheel and adjust the base hue.
| Project | Start here | Why it works |
|---|---|---|
| SaaS dashboard | #0A8D83, split-complementary, balanced UI | Teal gives the product a calm primary action while split accents create chart and status colors without making the interface loud. |
| Creator landing page | #EF4444, triadic, bold campaign | Triadic spacing creates launch energy, but the preview helps you keep one CTA color dominant instead of letting every swatch compete. |
| Luxury editorial | #7C3AED, analogous, soft editorial | Analogous hues keep the page polished while a softer intent leaves room for typography, photography, and white space. |
| Dark product UI | #22D3EE, tetradic, dark product | Cyan gives dark mode a clear focal point while the contrast matrix exposes which accents are safe for text and which should stay decorative. |
Design-token handoff checklist
When the palette looks right, treat it as a small system instead of a screenshot. Copy role-based CSS variables for the implementation, copy design-token JSON for a design-system repository, and copy the share link when another person needs to review the same harmony state.
- Primary action color has a passing text color.
- Accent colors are assigned to badges, charts, illustrations, or focus states.
- Surface tint is quiet enough for panels and empty states.
- Tailwind or CSS variable names describe roles, not just palette numbers.
- The final foreground/background pairs are checked again in a dedicated contrast checker.
Common mistakes
- Using every generated color at equal volume. Harmony needs hierarchy.
- Choosing hue without checking lightness. Text readability depends heavily on luminance, not just color family.
- Forgetting neutral colors. Most serious interfaces are mostly neutral with color used for emphasis.
- Trusting screenshots. Copy exact values into CSS variables or JSON.
- Skipping color vision checks. Red/green distinctions need labels, icons, or position cues too.
FastTool color workflow
For a complete browser-based color workflow, use these together:
- Color Wheel & Harmonies for the initial harmony direction.
- Color Palette Generator for usable palette scales and exports.
- Color Picker for sampling and checking values.
- Color Converter for moving between HEX, RGB, HSL, HSV, CMYK, and OKLCH.
- CSS Gradient Generator when the palette needs a hero background or visual transition.
- WCAG Contrast Checker before production.
FAQ
What is the safest color harmony for a website?
Split-complementary is usually the safest general-purpose choice. It gives enough contrast for calls to action and highlights while avoiding the harshness that direct complementary colors can create.
Should I use HSL or OKLCH?
Use HSL for quick thinking and communication because hue angles are easy to understand. Use OKLCH when building a serious design-token system where perceptual lightness consistency matters.
How many colors should a web palette have?
For most sites: one primary color, one or two accents, a neutral scale, and semantic colors. If you need more than that, define a role for every additional color.
Does the color wheel replace accessibility testing?
No. The wheel chooses relationships between hues. Accessibility depends on foreground and background contrast, text size, state design, and whether color is the only signal.
Can I share a palette with my team?
Yes. Use the share link from the tool to preserve the base color, harmony model, and palette intent in the URL. That makes review easier because everyone opens the same starting point.
Closing thought
Great palettes feel intuitive because the structure is hidden. The wheel gives you that structure. Contrast testing makes it trustworthy. CSS variables make it usable. When all three are present, color stops being decoration and becomes a system.