Design Guide

Color Palette Guide: How to Choose Colors That Work Together

Published April 20, 2026 · 12 min read

Choosing colors that work well together is one of the most impactful decisions in any visual project. Whether you are building a brand identity, designing a user interface, creating marketing materials, or styling a personal website, your color palette communicates mood, establishes hierarchy, and influences how people perceive your work. A carefully constructed palette feels intentional and cohesive. A random assortment of colors feels chaotic and untrustworthy.

This guide covers the foundational theory behind color relationships, the practical frameworks professionals use to build palettes, and the design principles that turn a collection of colors into a system. By the end, you will understand why certain color combinations work, how to construct palettes that serve multiple contexts, and how to validate your choices for accessibility and visual effectiveness.

The Color Wheel

The color wheel is the foundational tool of color theory. It arranges hues in a circle based on their relationships to each other, making it easy to identify harmonious combinations at a glance. Understanding the wheel's structure is the first step toward building palettes with intention.

Primary, Secondary, and Tertiary Colors

Primary colors are the base hues that cannot be created by mixing other colors. In the traditional RYB (Red-Yellow-Blue) model used in painting and design education, these are red, yellow, and blue. In the RGB (Red-Green-Blue) model used by screens and digital design, the primaries are red, green, and blue.

Secondary colors are created by mixing two primaries in equal parts. In RYB: orange (red + yellow), green (yellow + blue), and purple (red + blue). In RGB: cyan (green + blue), magenta (red + blue), and yellow (red + green).

Tertiary colors fill the gaps between primaries and secondaries. They have hyphenated names like red-orange, yellow-green, or blue-violet. The full wheel contains twelve hues: three primaries, three secondaries, and six tertiaries.

RGB vs RYB Color Models

The RYB model is subtractive — it describes how pigments absorb light. Mixing all pigments together produces a muddy dark color. The RGB model is additive — it describes how light sources combine. Mixing all light together produces white. Digital design tools operate in RGB (or its perceptual equivalent HSL), so the digital color wheel places red at 0 degrees, green at 120 degrees, and blue at 240 degrees. When selecting harmonious color combinations for screens, use the RGB/HSL wheel, not the traditional painter's wheel.

Color Theory Basics

Every color can be described along three independent dimensions. Understanding these dimensions gives you precise control over the mood and readability of your palette.

Hue, Saturation, and Lightness

• Hue is the pure color — its position on the color wheel, measured in degrees from 0 to 360. Red is 0, green is 120, blue is 240. Hue is what most people mean when they say "color."
• Saturation (also called chroma) is the intensity or vividness of the color. At 100% saturation, the color is fully vivid. At 0%, it becomes a neutral gray. Reducing saturation creates muted, sophisticated tones; increasing it creates energetic, attention-grabbing ones.
• Lightness (or value/brightness) describes how light or dark the color is. At 0% lightness, any hue becomes black. At 100%, it becomes white. At 50%, the color is at its purest expression. Tints are colors with added white (higher lightness). Shades are colors with added black (lower lightness).

Warm vs Cool Colors

The color wheel divides naturally into warm and cool halves. Warm colors — reds, oranges, and yellows — evoke energy, warmth, urgency, and action. They appear to advance toward the viewer. Cool colors — blues, greens, and purples — evoke calm, trust, stability, and professionalism. They appear to recede. Most effective palettes mix warm and cool temperatures to create contrast and visual interest, using one temperature as the dominant mood and the other as an accent.

Color Harmony Types

Color harmony refers to combinations that are visually pleasing because of their geometric relationship on the color wheel. These are not arbitrary aesthetic preferences — they are mathematical relationships that produce predictable visual effects. Each harmony type serves different design goals.

Complementary Colors

Complementary colors sit directly opposite each other on the wheel — 180 degrees apart. Examples include blue and orange, red and green, or yellow and purple. This pairing produces maximum contrast. Each color makes the other appear more vivid, creating a vibrating visual tension that draws the eye. Complementary schemes are ideal for call-to-action buttons, headline/background pairings, and any context where one element must stand out dramatically. The risk: overusing equal amounts of both colors creates visual fatigue. Use one as the dominant and the other sparingly as an accent.

Analogous Colors

Analogous colors are neighbors on the wheel — typically three to five hues within a 60-degree arc. Examples include blue, blue-green, and green, or red, red-orange, and orange. Because they share underlying pigment, analogous palettes feel harmonious, serene, and cohesive. They are excellent for backgrounds, gradients, and designs where unity matters more than contrast. The risk: insufficient contrast between elements. Counter this by varying saturation and lightness significantly across your analogous hues.

Triadic Colors

Triadic colors are evenly spaced at 120-degree intervals — forming an equilateral triangle on the wheel. Examples include red, yellow, and blue, or orange, green, and violet. Triadic schemes are vibrant and balanced, offering strong visual contrast while maintaining color richness. They work well for playful brands, children's products, and designs that need energy without the harshness of a complementary pair. Best practice: let one color dominate (60%), use the second for support (30%), and the third for accents (10%).

Split-Complementary

Instead of using the direct complement of your base color, a split-complementary scheme uses the two colors adjacent to the complement. If your base is blue, instead of orange (the complement), you would use red-orange and yellow-orange. This creates high contrast with less visual tension than a true complementary pair, making it more versatile and forgiving. It is an excellent choice when you want a bold palette that is still comfortable to look at for extended periods.

Tetradic / Square Colors

Tetradic (or square) harmonies use four colors spaced 90 degrees apart, forming a square on the wheel. This produces the richest and most complex palettes, offering maximum color variety. The challenge is balance — with four distinct hues, one must clearly dominate or the design feels chaotic. Tetradic schemes work best in large-scale projects with many UI surfaces: dashboards, editorial layouts, or product ecosystems where different sections need distinct color identities while maintaining family resemblance.

Monochromatic

A monochromatic palette uses a single hue and varies only saturation and lightness. A monochromatic blue palette might include navy, royal blue, sky blue, and pale ice blue. These palettes are inherently cohesive and clean because there is zero hue conflict. They are popular for minimalist interfaces, text-heavy content, and professional brands that want to communicate calm authority. The limitation is obvious: without hue variation, distinguishing between elements relies entirely on value contrast. Pair with a single accent hue for interactive elements.

Building a Brand Palette

A brand palette is more than a collection of pretty colors. It is a structured system with defined roles for each color. A well-built brand palette typically contains these layers:

• Primary color — The single color most associated with your brand. It appears on logos, headers, and key interactive elements. Choose this color based on the emotion and industry association you want to convey.
• Secondary color(s) — One or two colors that complement the primary. They provide variety for sections, illustrations, and supporting elements without competing for attention.
• Accent color — A high-contrast color reserved exclusively for calls to action, links, and interactive states. If your primary and secondary are cool tones, a warm accent creates natural emphasis.
• Neutral colors — Grays, off-whites, and near-blacks for backgrounds, text, borders, and dividers. Most of your interface will use neutrals. Derive them by desaturating your primary hue slightly — a warm gray (with a hint of your brand color) feels more intentional than pure gray.
• Semantic colors — Standardized colors for system states: green for success/confirmation, amber/yellow for warnings, red for errors/destructive actions, blue for informational messages. These should remain consistent regardless of the rest of your palette.

Start with your primary color and use color harmony rules to select secondary and accent colors. Then build a lightness scale for each: typically 9 steps from near-white (50) to near-black (900), following a naming convention similar to Tailwind CSS or Material Design. This gives your team a finite set of named tokens that cover every possible context without ad-hoc color decisions.

The 60-30-10 Rule

The 60-30-10 rule is a time-tested formula for color distribution that creates visual balance and hierarchy. Originally developed for interior design, it translates directly to digital interfaces:

• 60% — Dominant color. This is your background. In most interfaces, it is a neutral: white, off-white, dark gray, or black. It sets the overall mood and gives the eye a resting place.
• 30% — Secondary color. This is your supporting tone — used for cards, sidebars, panels, secondary buttons, and section backgrounds. It creates structure and visual grouping without fighting the background.
• 10% — Accent color. This is your high-impact color — reserved for primary buttons, links, active states, notifications, and the elements that must attract immediate attention. Because it covers so little surface area, it carries disproportionate visual weight.

The rule works because it prevents two common mistakes: using too many colors at equal weight (visual chaos) and using too little contrast (visual monotony). Even complex dashboards with dozens of components feel organized when the underlying ratio holds. Squint at your screen — if you can identify three clear layers of color weight, the rule is working.

Color Psychology

Colors carry cultural and psychological associations that influence perception before a single word is read. While individual reactions vary, broad patterns are well-documented:

• Blue — Trust, reliability, calm, professionalism. The most popular color in corporate branding (banking, tech, healthcare). It rarely triggers negative associations, making it a safe default for B2B products.
• Red — Urgency, energy, passion, danger. Effective for sale banners, error states, food brands, and anywhere immediate action is desired. Overuse creates anxiety.
• Green — Growth, health, nature, success. Standard for financial gains, eco-friendly brands, and confirmation states. Avoid as your only indicator of success (accessibility concern for red-green color blindness).
• Yellow/Orange — Optimism, warmth, caution, creativity. Effective for warnings, friendly brands, and youthful energy. Pure yellow has poor contrast on white backgrounds, so test readability carefully.
• Purple — Luxury, creativity, wisdom, spirituality. Common in premium brands, creative tools, and entertainment. Darker purples feel sophisticated; lighter purples feel whimsical.
• Black — Sophistication, power, elegance, authority. Dominant in luxury brands, fashion, and high-end tech. Creates maximum contrast with white for readability.
• White — Cleanliness, simplicity, space, purity. White space is a design element, not empty space. Generous white space signals premium quality and improves readability.

Use these associations as starting points, not rules. Context matters more than theory — a red button in a medical app communicates differently than a red button on a food delivery app. Test with your actual audience.

Color in UI Design

User interface design places specific functional demands on color that go beyond aesthetics. Each color in a UI system has a job:

Background and Surface Colors

Most interfaces use two to three levels of background: a base background, an elevated surface (cards, modals), and a recessed surface (input fields, wells). In light themes, these progress from white to light gray. In dark themes, from near-black to dark gray. The contrast between levels creates depth and grouping without borders.

Text Colors

Body text needs maximum readability — high contrast against the background, neutral in hue. Headings can be slightly bolder. Muted text (captions, timestamps, placeholders) uses reduced opacity or a lighter shade. Never use colored text for body content unless it is a link.

Interactive Element Colors

Buttons, links, toggles, and inputs all need distinct default, hover, active, focus, and disabled states. Your accent color typically serves as the base for primary actions. Secondary actions use a muted variant. Disabled states reduce opacity to around 40%. Focus rings must be clearly visible — often using the accent color with an outline offset.

Dark vs Light Themes

A dark theme is not simply an inversion of your light theme. Dark backgrounds require different saturation levels — highly saturated colors vibrate uncomfortably on dark surfaces. Reduce saturation by 10-20% and increase lightness slightly for your brand colors when displayed on dark backgrounds. Shadows become less effective in dark themes; use lighter elevated surfaces to create hierarchy instead. Test contrast ratios separately for each theme.

Accessibility and Color

Color accessibility is not optional — it is a legal requirement in many jurisdictions and a fundamental design principle. Approximately 300 million people worldwide have some form of color vision deficiency.

Contrast Ratios

WCAG 2.1 requires minimum contrast ratios between foreground and background colors. Normal text (below 18pt or 14pt bold) needs at least 4.5:1. Large text (18pt+ or 14pt bold+) needs at least 3:1. UI components and graphical objects need at least 3:1 against adjacent colors. The maximum possible ratio is 21:1 (black on white). Use a contrast checker tool to verify every color pair before shipping.

Color Blindness Considerations

The most common deficiency is red-green color blindness (affecting roughly 8% of men). Red and green look nearly identical to these users. Never use red vs green as the only differentiator for success vs error states. Always pair color with a secondary indicator: icons, text labels, patterns, or position. Simulate your palette through color blindness filters — available in Chrome DevTools under Rendering — to verify distinctness.

Never Rely on Color Alone

WCAG Success Criterion 1.4.1 states that color must not be the sole means of conveying information. A form field with only a red border to indicate an error is insufficient — add an error icon and descriptive text. A chart using only color to distinguish data series needs patterns or direct labels. This principle ensures your interface remains usable regardless of color perception ability, screen quality, or environmental lighting.

Color Formats

Once you have chosen your palette colors, you need to express them in a format that CSS, design tools, and code can use. The three primary formats each have distinct advantages:

• HEX (#RRGGBB) — Compact, universally supported, the default in most design tools. Best for static design tokens and brand documentation. Six characters encode red, green, and blue as hexadecimal pairs.
• RGB (rgb(r, g, b)) — Uses decimal integers 0-255 for each channel. Best for programmatic color manipulation in JavaScript, since computed styles return RGB values and channel arithmetic is straightforward.
• HSL (hsl(h, s%, l%)) — Hue (0-360 degrees), saturation (0-100%), lightness (0-100%). Best for CSS theming and generating tint/shade scales, because adjusting lightness or saturation produces predictable, intuitive visual changes.

For a detailed comparison of all color formats including conversion formulas, see the Complete Guide to Color Codes.

Tools and Workflows

Building a palette is iterative. Here is a practical workflow that moves from inspiration to implementation:

Start From Inspiration

Begin with a single color that resonates with your project's mood. This might come from a photo, a competitor's branding, a material sample, or simply a gut feeling about the emotion you want to evoke. One intentional starting point is better than trying to pick five colors simultaneously.

Extract Colors From Photos

Nature photographs, architecture, artwork, and film stills are excellent palette sources because their colors are already harmonious in context. Use a color picker tool to sample dominant and accent colors from inspiring images. Look for the dominant background tone, the mid-tone supporting colors, and the small pops of contrast.

Apply Harmony Rules

Once you have your base color, use the harmony types described above to generate candidates for secondary and accent colors. A palette generator tool automates this — enter your base hue and it calculates complementary, analogous, and triadic options geometrically.

Iterate With Tints and Shades

Each color in your palette needs a full lightness scale. Generate tints (lighter versions) by increasing HSL lightness and slightly reducing saturation. Generate shades (darker versions) by decreasing lightness. A nine-step scale (50 through 900) gives you enough granularity for any UI context — from subtle hover states to high-contrast text.

Test in Context

Apply your palette to actual UI components — buttons, cards, text blocks, navigation — before committing. Colors that look harmonious as swatches can fail in context. Test both light and dark themes. Verify contrast ratios. Check the palette on different screens and in different lighting conditions. Iterate until every combination serves its functional purpose while maintaining the overall aesthetic coherence.

Frequently Asked Questions