Color Theory Basics: The Color Wheel, Harmonies, and How to Build a Palette

Color theory is a practical system for understanding how colors relate to one another and how combinations of hue, saturation, lightness, temperature, and contrast affect a design. A color wheel makes those relationships easier to see, while color harmonies provide repeatable ways to choose colors that work together. You can use these principles to build palettes for websites, branding, illustration, packaging, interfaces, and other visual work.

What is color theory?

Color theory describes the relationships between colors and provides methods for combining them. It helps answer practical questions such as which colors create strong contrast, which colors feel closely related, and how several colors can be organized into a usable palette.

The color wheel is one of the simplest ways to visualize these relationships. Colors are arranged around a circle so you can see which hues sit beside each other, which sit opposite each other, and which form larger geometric relationships.

Color theory is not a fixed formula for making a design look good. Context still matters. A combination that works for a poster may not provide enough contrast for website text, and colors that look balanced on a screen may behave differently when printed.

Hue, saturation, and lightness

Three useful properties for describing a color are hue, saturation, and lightness.

Hue is the basic color family, such as red, orange, yellow, green, blue, or violet. For example, #FF0000 is a red hue and #0000FF is blue.

Saturation describes the intensity of a color. A highly saturated blue looks vivid, while reducing its saturation moves it toward a more muted gray-blue.

Lightness describes how light or dark the color appears. Increasing lightness moves a color toward white, while decreasing it moves toward black.

This means a palette does not need many different hues to create variety. One blue hue can produce a complete range of pale blues, midtones, and dark navy colors by changing saturation and lightness. A color scale does exactly this from a single input.

RYB and RGB color wheels

The traditional artists' color wheel uses the RYB model: red, yellow, and blue as its primary colors. Mixing those colors produces the familiar secondary colors orange, green, and violet.

Between the primary and secondary colors are tertiary colors. On a traditional RYB wheel, these include combinations such as red-orange, yellow-orange, yellow-green, blue-green, blue-violet, and red-violet.

Digital screens work differently. They produce color using RGB, which uses red, green, and blue light as its primary components. In additive RGB mixing, red and green produce yellow, green and blue produce cyan, and blue and red produce magenta.

This distinction matters when applying color theory. The traditional wheel remains useful for understanding artistic relationships, while digital design ultimately represents colors through screen-oriented systems such as RGB, HEX, HSL, and related models. See hex color codes explained for how those values work.

Warm and cool colors

Warm colors generally include reds, oranges, and yellows. Cool colors generally include blues, greens, and violets.

Temperature is relative rather than absolute. #FF4500 is clearly warm compared with #2563EB, but two different blues can also feel warmer or cooler when placed beside each other.

Mixing warm and cool colors can create separation and visual emphasis. Using mostly colors from one temperature range can create a more unified palette.

Six common color harmonies

Color harmonies use positions on the color wheel to identify structured color relationships. The harmonizer generates all six from a starting color so you can compare them side by side.

Complementary

Complementary colors sit opposite each other on the color wheel. They create strong color contrast, such as blue paired with orange.

Because the relationship can be intense, one color can serve as the dominant color while the other is reserved for accents.

Analogous

Analogous colors sit next to each other on the wheel. A palette might combine blue, blue-green, and green.

Because the hues are closely related, analogous palettes tend to create less hue contrast than complementary combinations. Differences in lightness and saturation can help individual elements remain distinct.

Triadic

A triadic harmony uses three colors spaced evenly around the wheel. Red, yellow, and blue form a familiar example on the traditional RYB wheel.

Three strong hues can compete for attention, so it is often useful to make one dominant and use the others more selectively.

Split complementary

Split complementary harmony starts with one color, then uses the two colors adjacent to its direct complement. It keeps much of the contrast of a complementary palette while introducing another hue.

This gives you three color families to work with instead of two.

Tetradic

A tetradic harmony uses four colors arranged as two complementary pairs. It provides considerable variety but also requires more decisions about hierarchy.

Rather than giving every color equal visual weight, choose a dominant color and use the remaining colors for secondary elements and accents.

Monochromatic

A monochromatic palette uses variations of one hue. Differences come primarily from saturation and lightness rather than from changing the underlying hue.

For example, a blue palette could combine #DBEAFE, #3B82F6, and #1E3A8A. This approach can create clear hierarchy without introducing several unrelated hues.

Using the 60-30-10 rule

The 60-30-10 rule is a simple method for distributing colors rather than choosing them. Roughly 60 percent of the design uses a dominant color, 30 percent uses a secondary color, and 10 percent uses an accent.

For a website, the dominant color might appear across backgrounds and large surfaces. The secondary color could support cards, navigation, or illustrations, while the accent appears on buttons and other important details.

Treat these percentages as a starting framework, not a mathematical requirement.

Contrast and accessibility

A palette can look harmonious and still be difficult to read. Color harmony describes relationships between colors, while accessibility also depends on sufficient contrast between foreground and background colors.

For example, two pale analogous colors may work visually but perform poorly when one is used for small text over the other. Check important text and interface combinations with a contrast checker rather than judging them only by eye. The thresholds are explained in WCAG color contrast explained.

Contrast should also influence palette construction. Include sufficiently light and dark colors so the palette can support text, backgrounds, borders, controls, and different interface states.

Do not rely on color alone to communicate important information. Labels, icons, patterns, or other visual cues can help distinguish states such as errors, warnings, and successful actions.

How to build a color palette

1. Start with one base color that fits the project, for example a blue such as #2563EB. If you only have a photo or a logo, pull the base color from it with image to palette.
2. Use the color wheel to examine its position and nearby or opposing hues, then use the harmonizer to compare complementary, analogous, triadic, and other relationships.
3. Choose a harmony based on what the design needs. If you need a restrained palette, start with monochromatic or analogous colors. If you need stronger hue separation, explore complementary or split complementary relationships.
4. Adjust saturation and lightness to create usable variations. A palette needs more than several equally strong colors. Add lighter options for backgrounds and darker options for text or high-emphasis elements.
5. Use the palette generator to organize the selected colors into a working set. If you need an intermediate color between two choices, blend them in the color mixer.
6. Assign roles to the final colors, such as background, primary, secondary, accent, text, and border. Apply the 60-30-10 principle where it makes sense, then test important foreground and background pairs with the contrast checker.
7. Test the palette in the actual design. Color relationships can change when colors move from isolated swatches to large backgrounds, small buttons, typography, photographs, or illustrations.

FAQ

What is color theory in simple terms?

Color theory is a way of understanding how colors relate and how they can be combined. It covers concepts such as the color wheel, color harmony, saturation, lightness, temperature, and contrast.

What are the main types of color harmony?

Six commonly used harmonies are complementary, analogous, triadic, split complementary, tetradic, and monochromatic. Each describes a different relationship between colors on the color wheel.

Is RGB the same as the traditional color wheel?

No. Traditional artists use an RYB wheel based on red, yellow, and blue, while screens use the additive RGB model based on red, green, and blue light. The models therefore produce different primary and secondary color relationships.

How many colors should a palette have?

There is no required number. A practical palette often contains a base color, supporting colors, an accent, and lighter or darker variations needed for backgrounds, text, and interface elements.