Color Theory Basics and How to Build a Palette: Wheel, Complements, 70:25:5

When building a site or a slide deck, have you ever felt that you "always struggle to choose colors" or that "whatever you pick ends up looking mismatched"? Color is often thought of as a matter of taste, but in reality, once you know a few basic rules and patterns, anyone can produce a consistent, polished look. This article covers everything from color basics to actually assembling a palette, in a form you can use right away in web design.

What Color Theory Is: The Three Attributes and the Wheel

Color scheming means combining several colors with intent. The foundation for this is the three attributes that make up a color.

• Hue: the "color" itself, such as red, blue, or yellow. It represents the kind of color.
• Lightness (Value): how bright a color is. It is higher closer to white and lower closer to black.
• Saturation (Chroma): how vivid a color is. Higher is more vivid; lower is more muted and closer to gray.

Arranging hues in a ring gives you the color wheel. Red, orange, yellow, green, blue, and purple shift gradually around the circle; colors next to each other are similar in hue, while colors across from each other are contrasting. It is no exaggeration to say that most color schemes are determined by where on this circle you take your colors. Becoming aware of "near colors" and "far colors" on the wheel is the first step in color theory.

Handling the wheel purely in your head is hard, so it helps to pick one base color in the Color Palette Generator and watch how colors spread out from it.

Color Schemes: Analogous, Complementary, Triadic

Depending on where you pick colors from on the wheel, there are classic "patterns." Knowing the main ones gives you a powerful guide whenever you get stuck.

An analogous scheme uses colors that sit next to each other on the wheel, such as blue, blue-green, and green. Because the hues are close, they naturally feel cohesive and give a calm, refined impression. It is hard to get wrong, so it is the pattern I most recommend when you are still getting used to color.

A complementary scheme pairs two colors that sit directly opposite on the wheel (red and green, blue and orange, and so on). They enhance each other and create strong contrast, which is effective for points you want to draw attention to. However, placing them at the same saturation and the same area makes the eyes flicker, so the ratio and tone adjustments described below are essential.

A triadic scheme uses three colors connected by an equilateral triangle on the wheel. It feels balanced and vivid, suiting logos, illustrations, and other places where you want some flair. There are also variations such as the "split complementary," which splits one side of a complement into two colors, but mastering the three above is plenty to start.

The 70:25:5 Rule: Base, Main, Accent

Just as important as "how many colors you use" is "how much area you give each color." Tuning the proportion of area is a faster route to a tidy design than adding more colors. A commonly used ratio is 70:25:5.

• Base color (about 70%): the color that takes up the most area, such as backgrounds and whitespace. Colors that do not assert themselves too much, like white or a very light gray, work well.
• Main color (about 25%): the central color of the site or brand. Used for headings, navigation, and key parts, it defines the impression.
• Accent color (about 5%): a color used just a little on buttons, links, and points you want to emphasize. Choosing a contrasting color, such as the complement of the main color, makes even a small area stand out clearly.

The key is that an accent works precisely because there is only a little of it. If you increase its area to make it stand out, it becomes unclear where to look. First build a calm foundation with the base and main colors, then add a dash of accent at the end. Keeping this order in mind makes color schemes far more stable.

Aligning Tone: Controlling Lightness and Saturation

Even when you choose hues well, sometimes things just will not harmonize, and the cause is often inconsistent tone. Tone is the "key" of a color determined by the combination of lightness and saturation. When vivid and muted colors, or bright and dark colors, mix without order, cohesion is lost.

Even with scattered hues, things look surprisingly cohesive when the tone is aligned.

Put another way, even if hues differ, matching the levels of lightness and saturation immediately gives the palette unity, for example "make everything pastel (high lightness, low saturation)" or "make everything deep and calm (medium lightness, medium saturation)." When actually adjusting, keeping these two points in mind reduces failures.

• Match saturation: bringing vividness levels close together makes multiple colors feel like a team.
• Use lightness difference for contrast: where readability matters, such as text against a background, deliberately create a large lightness difference. Where you want adjacent colors to look gentle, keep the lightness difference small.

On the web especially, text readability is crucial, and a small lightness difference between background and text hurts legibility. Treat decorative harmony and text readability as separate concerns, and choose carefully where to apply lightness differences.

HEX, RGB, HSL: How Color Is Written on the Web

To work with color on the web, you need to know how to specify colors with numbers. The three main notations are HEX, RGB, and HSL.

HEX and RGB both express color by the intensity of red, green, and blue light. HEX writes that as two hex digits each and is the most widely used in CSS and design tools.

HSL is especially handy for thinking about color schemes. Because you can specify hue, saturation, and lightness directly, the tone adjustments described above become straightforward numeric operations, such as "raise only the brightness while keeping the hue" or "lower saturation to mute it." For an analogous scheme you shift the hue value little by little; to align tone you fix saturation and lightness. Being able to move between HEX and HSL greatly improves efficiency, so it is worth checking how the same color is written in each with the Color Converter.

In Practice: Steps to Build a Web Palette

With the knowledge so far, here is the flow for actually assembling a color palette for a website.

1. Decide on one main color

Choose a color that fits the brand or the impression you want to convey. This becomes the axis of the palette. Use the images colors carry as a reference too: blues feel sincere and intellectual, greens feel reassuring and natural, reds and oranges feel passionate and energetic.

2. Expand colors with a scheme

Starting from the main color, decide whether to keep things analogous or to add contrast with a complement. Using the Color Palette Generator, you can get analogous, complementary, and triadic candidates from a base color all at once, so set the overall direction here.

3. Decide base and accent, then align tone

Decide the base color for backgrounds (white to light gray) and the accent color for emphasis. Finally, review the saturation and lightness of each color to align tone, and ensure enough lightness difference between text and background. Convert the finished colors to HEX with the Color Converter and you can paste them straight into CSS.

With just four ideas, the color wheel, color schemes, the 70:25:5 ratio, and tone, you can produce stable results in color without relying on instinct. Start by choosing a single main color, expand your candidates with the tools, and assemble a palette with your own hands. Moving real colors around and comparing them is the surest way to learn color theory.

Please note that this article is intended to provide general information, and the best color scheme varies with the medium, brand, and accessibility requirements. Make your decision after checking the latest official information and guidelines.