What is color theory?

Color theory is the study of how colors relate to each other and how they affect human perception. It covers the color wheel (how hues are organized), harmony rules (which combinations work), and color psychology (what emotions colors evoke). For designers, color theory provides a framework for making intentional color choices instead of guessing.

What is the 60-30-10 rule in design?

The 60-30-10 rule divides your design into three color proportions: 60% primary (backgrounds, large areas), 30% secondary (navigation, cards, sections), and 10% accent (buttons, links, highlights). This ratio creates visual hierarchy and prevents any single color from overwhelming the design. It originated in interior design and translates directly to web and graphic design.

How do I pick a color palette from a photo?

Use a color extraction tool to pull dominant colors from any image. Upload a photo that captures the mood you want, and the tool identifies the 5-8 most prominent colors. Adjust the extracted colors for screen use (photos often have muted tones that need saturation adjustment for digital design). This is one of the fastest ways to build a cohesive palette.

What colors are safe for colorblind users?

Blue and orange combinations are safe across virtually all types of color vision deficiency. Avoid relying on red-green distinctions alone (affects approximately 8% of men and 0.5% of women). Use value contrast (light vs. dark) as a secondary differentiator alongside hue. Always include non-color indicators like icons, patterns, or labels.

How many colors should a website palette have?

A functional website palette needs 3-5 main colors plus neutrals. Typically: one primary color, one secondary, one accent, plus white/light gray and dark gray/black for text and backgrounds. Add semantic colors (red for errors, green for success, yellow for warnings) as needed. More than 7 main colors creates visual noise.

What is HSL and why does it matter?

HSL stands for Hue (the color angle, 0-360 degrees), Saturation (intensity, 0-100%), and Lightness (brightness, 0-100%). HSL matters because it maps directly to how humans think about color. Adjusting the hue slider rotates through colors. Reducing saturation makes colors more muted. Increasing lightness makes them paler. It is the most intuitive model for building palettes.

Can I create a professional palette without design training?

Yes. Start with a single color you like. Use a palette generator to create color harmonies automatically. Apply the 60-30-10 rule. Test text contrast against backgrounds. That process gives you a functional, theory-backed palette without needing to understand the underlying mathematics. Color theory tools codify the rules so you can apply them immediately.

What is simultaneous contrast?

Simultaneous contrast is the phenomenon where a color appears to shift depending on the colors around it. A medium gray looks darker against a white background and lighter against a black background. The same orange appears more vivid next to blue and duller next to red. This is why you must test palette colors in context, not just as isolated swatches.

Color Theory for Designers — How to Create Perfect Palettes From Scratch

Last updated: April 202610 min readColor Tools

Color theory is the difference between a design that "feels right" and one where something is off but nobody can explain why. You do not need a degree in fine art. You need to understand how the color wheel works, what harmony types mean, and how to apply a palette systematically. This is the practical guide.

The Color Wheel — Your Foundation

The color wheel arranges hues in a circle based on their wavelength relationships. Three properties define every color:

Hue — The color itself. Red, blue, green, yellow. Measured as a degree on the wheel (0-360). Red is at 0 degrees, green at 120, blue at 240.
Saturation — How vivid or muted the color is. 100% saturation is pure, intense color. 0% saturation is gray. Most design colors live between 30-80% saturation.
Lightness — How bright or dark the color is. 100% is white, 0% is black, 50% is the pure hue. Adjusting lightness creates tints (lighter) and shades (darker).

Understanding HSL is the single most useful skill for palette creation. When you need a softer version of your brand blue, you lower the saturation. When you need a hover state, you drop the lightness by 10%. When you need a complementary accent, you rotate the hue 180 degrees.

The 5 Harmony Rules

Each harmony type creates a different visual and emotional feel:

Harmony Type	Wheel Relationship	Visual Feel	Best For	Example
Complementary	Opposite (180 degrees)	High contrast, energetic	CTAs against calm backgrounds	Blue (#2563eb) + Orange (#ea580c)
Analogous	Neighbors (30 degrees apart)	Smooth, cohesive, calm	Nature brands, wellness, editorial	Teal (#0d9488) + Green (#16a34a) + Lime (#65a30d)
Triadic	3 colors, 120 degrees apart	Vibrant, balanced, playful	Creative brands, children, gaming	Red (#dc2626) + Blue (#2563eb) + Yellow (#eab308)
Split-complementary	Base + 2 adjacent to complement	Contrast with less tension	Safe starting point for most projects	Blue (#2563eb) + Orange-red (#ea580c) + Yellow-orange (#f59e0b)
Monochromatic	One hue, varied saturation/lightness	Elegant, sophisticated, minimal	Luxury, editorial, single-brand focus	Navy (#1e3a5f) + Blue (#3b82f6) + Sky (#93c5fd)

The 60-30-10 Rule in Practice

This is the closest thing to a universal formula in design. Divide your palette application into three tiers:

60% — Dominant color: This is your background. White, light gray, or a very light tint of your brand color. It sets the overall tone and gives the eye a place to rest.
30% — Secondary color: Navigation bars, sidebars, card backgrounds, section dividers. This creates structure and visual rhythm. Usually your brand color or a supporting tone.
10% — Accent color: Buttons, links, icons, tags, notification badges, hover states. This is the color that demands action. It should be your most vibrant or contrasting color.

A common mistake designers make: using the accent color for 30% of the page. When everything pops, nothing pops. The 10% constraint is what gives your accent its power.

Color Psychology — What Colors Communicate

Color associations are culturally influenced but remarkably consistent across Western markets:

Color	Primary Association	Secondary Associations	Avoid When
Blue	Trust, reliability	Calm, professionalism, security	Promoting urgency or appetite
Red	Urgency, passion	Energy, danger, appetite, excitement	Building trust or calm
Green	Growth, health	Money, nature, sustainability, permission	Luxury or urgency signaling
Purple	Luxury, creativity	Wisdom, royalty, mystery, spirituality	Budget or mass-market products
Orange	Energy, enthusiasm	Warmth, confidence, affordability	Luxury or medical seriousness
Yellow	Optimism, attention	Happiness, caution, youthfulness	Conveying authority or formality
Black	Sophistication, power	Elegance, mystery, authority	Approachability or warmth
White	Cleanliness, simplicity	Space, purity, modernity	Warmth or coziness

These are tendencies, not rules. Context matters more than any chart. Red means "danger" on a warning label and "delicious" on a restaurant sign. Let your content and audience guide how you interpret color psychology.

Building a Palette From Scratch — Step by Step

Start with one color. Your brand color, a client-provided hex value, or a color that represents the mood of the project. This becomes your base.
Generate harmonies. Use a palette generator to create complementary, analogous, or split-complementary options from your base. Do not commit yet — explore.
Pick your harmony type. Need contrast? Go complementary. Need cohesion? Go analogous. Not sure? Split-complementary is the safest starting point.
Assign roles. Apply 60-30-10. Your lightest color is the dominant. Your brand color is secondary. Your most contrasting color is the accent.
Add neutrals. Every palette needs a near-white and a near-black. Pure white (#FFFFFF) and pure black (#000000) can feel harsh — try #FAFAFA and #1A1A1A for slightly softer extremes.
Test contrast. Check every text-on-background combination for WCAG compliance. A beautiful palette that fails accessibility is a broken palette.
Test in context. Apply the palette to a real layout — buttons, cards, headers, body text. Colors behave differently in isolation than in a full design.

Accessibility — Non-Negotiable

Approximately 300 million people worldwide have some form of color vision deficiency. Your palette must work for all of them:

WCAG AA contrast ratio: 4.5:1 for normal text, 3:1 for large text and UI components
Do not use color alone to convey meaning. Error states need an icon and text, not just a red border.
Red-green is the most common deficiency (deuteranopia/protanopia). Never differentiate two states using only red vs. green.
Blue-orange is the safest high-contrast pair across all types of color vision deficiency.
Test with simulators. Chrome DevTools has a built-in vision deficiency emulator (Rendering tab > Emulate vision deficiencies).

Tools to Build and Test Your Palette

Palette Generator — generate harmonies from any base color
Color Picker — pick your starting color with precision
Hex-RGB Converter — convert between hex, RGB, and HSL formats
CSS Gradient Generator — create gradients using palette colors
Box Shadow Generator — design shadows that match your palette tone
Color Extractor — pull palettes from existing images and photos
Image Resizer — resize design assets after finalizing your palette

Start with one color. Build a complete palette in seconds.

Open Palette Generator

Color Theory for Designers — How to Create Perfect Palettes From Scratch

The Color Wheel — Your Foundation

The 5 Harmony Rules

The 60-30-10 Rule in Practice

Color Psychology — What Colors Communicate

Building a Palette From Scratch — Step by Step

Accessibility — Non-Negotiable

Tools to Build and Test Your Palette

Related Posts

Palette Generator Guide

Palettes for Websites

Best Palette Tools — Reddit

Figma vs Browser Tools