Color theory is the set of principles that explains how colors relate to each other, how they're perceived by the human eye, and how they can be combined harmoniously. Whether you're creating a logo, choosing a website's colors, decorating a space, or developing a visual identity, understanding these principles makes all the difference in the final result.
What is the color wheel
The color wheel is the visual representation of colors organized in sequence, showing how they relate to one another. Originally created by Isaac Newton in 1666, when he projected sunlight through a prism and observed the resulting spectrum, the model was refined over the centuries by theorists like Johann Wolfgang von Goethe and Josef Albers.
The wheel is divided into 12 main positions and serves as the basis for identifying any type of color harmony: just look at the colors' relative position on the wheel to know whether they complement each other, are analogous, or form a triad.
🎨 Practical tip: use ImageTools' Color Palette Generator to see every harmony explained in this article in action — complementary, analogous, triadic, square, and monochromatic — in real time.
Color classification
Primary colors
Primary colors are ones that can't be obtained by mixing other colors. In the pigment model (used in paint, printing, and art), the primaries are red, yellow, and blue. In the light model (used in screens, monitors, and lighting), the primaries are red, green, and blue — the basis of the RGB system.
Secondary colors
Secondary colors result from mixing two primary colors in equal proportions:
- Orange — red + yellow
- Green — yellow + blue
- Violet — blue + red
Tertiary colors
Tertiary colors arise from mixing a primary color with an adjacent secondary color on the color wheel. They are: yellow-green, yellow-orange, red-orange, red-violet, blue-violet, and blue-green. In total, the 3 primaries + 3 secondaries + 6 tertiaries form the 12 positions of the traditional color wheel.
Color properties
Every color can be described by three fundamental properties:
| Property | What it defines | Example |
|---|---|---|
| Hue | The color itself — the position on the color wheel | Red, blue, green |
| Saturation | The color's intensity or purity | Vivid green vs. grayish green |
| Lightness | How light or dark the color is | Light blue vs. navy blue |
This combination of three values is what allows any color to be precisely described — and it's exactly the HSL (Hue, Saturation, Lightness) model used in digital design and web development tools.
Color temperature
Colors are divided into two major temperature groups:
- Warm colors — reds, oranges, and yellows. They evoke energy, warmth, urgency, and movement. They're visually more "advancing," meaning they appear closer to the observer.
- Cool colors — blues, greens, and violets. They convey calm, trust, professionalism, and distance. They're "receding" — they appear farther away.
This perception of temperature is widely used in branding: banks and tech companies tend toward blue (trust), while food brands prefer red and orange (appetite and energy).
💡 Fun fact: McDonald's, Burger King, and KFC deliberately use red and yellow — these colors stimulate appetite and create a sense of urgency, which is ideal for the fast-food segment.
Color harmonies
Harmony is a combination of colors that produces a visually pleasing result. Color theory defines five main types of harmony, all based on the colors' position on the color wheel.
Complementary harmony
Uses two opposite colors on the color wheel — for example, blue and orange, or red and green. Contrast is maximized, creating a high-impact visual. It's the most commonly used harmony in calls to action, banners, and pieces that need to grab attention quickly. The risk is overdoing it: using both colors in equal proportions can be aggressive. It's best to use one as the dominant color and the other as an accent.
Analogous harmony
Uses neighboring colors on the color wheel — usually three consecutive colors, like blue, blue-violet, and violet. The result is harmonious and natural, with no visual tension. It's widely used in designs that need to convey calm, elegance, or cohesion. Natural landscapes tend to have analogous palettes.
Triadic harmony
Uses three equidistant colors on the color wheel, forming an equilateral triangle. Red, yellow, and blue are the classic primary triad. This harmony is vibrant and balanced at the same time — it offers variety without losing cohesion. It's widely used in visual identities for brands that want to convey creativity and diversity.
Square (tetradic) harmony
Uses four colors that form a square or rectangle on the color wheel. It's the most complex harmony and offers the greatest color variety, but requires careful balance — usually one of the four should be dominant and the others used in smaller proportions.
Monochromatic harmony
Uses variations in saturation and lightness of a single color. For example, a blue in five shades: very light, light, medium, dark, very dark. The result is sophisticated, cohesive, and elegant. It's widely used in digital interfaces and premium brands that value visual restraint.
Try every harmony in practice
Choose a base color and instantly see the complementary, analogous, triadic, square, and monochromatic palettes with HEX, RGB, and HSL codes ready to use.
Generate color palette for freeThe 60-30-10 rule
One of the most practical guidelines in color theory applied to design is the 60-30-10 rule. It defines how to distribute colors in a composition to ensure visual balance:
- 60% — dominant color. Sets the overall tone of the piece. Usually a neutral or softer color.
- 30% — secondary color. Creates contrast with the dominant color without competing for attention.
- 10% — accent color. The most vibrant color, used on elements that need immediate attention: buttons, icons, calls to action.
This ratio isn't a rigid law, but it works as a reliable starting point for any type of project — from a social media post to a company's visual identity.
Color psychology
Colors trigger emotional responses and cultural associations that directly influence how a brand or design is perceived. Although these associations vary between cultures, some are widely shared in the Western context:
| Color | Common associations | Brands that use it |
|---|---|---|
| Red | Energy, urgency, passion, appetite | Coca-Cola, Netflix, YouTube |
| Blue | Trust, security, technology, calm | Samsung, Facebook, PayPal |
| Green | Nature, health, growth, sustainability | Natura, Starbucks, Whole Foods |
| Yellow | Optimism, attention, warmth, creativity | McDonald's, IKEA, Snapchat |
| Orange | Enthusiasm, approachability, youthfulness | Amazon, Fanta, Harley-Davidson |
| Purple | Luxury, creativity, spirituality, mystery | Cadbury, Hallmark, Twitch |
| Black | Elegance, sophistication, power, exclusivity | Apple, Chanel, Nike |
| White | Purity, simplicity, cleanliness, minimalism | Apple, Tesla, Muji |
Color models: RGB, CMYK, HEX and HSL
In the digital and print worlds, colors are described by different mathematical models, each suited to a specific context:
- RGB (Red, Green, Blue) — used on screens, monitors, and any digital media. Each channel ranges from 0 to 255. White is (255, 255, 255); black is (0, 0, 0).
- HEX — the hexadecimal representation of RGB, widely used in CSS and web design. White is #ffffff; black is #000000.
- HSL (Hue, Saturation, Lightness) — describes color by hue (0–360°), saturation (0–100%), and lightness (0–100%). It's the most intuitive model for adjusting colors and creating harmonies.
- CMYK (Cyan, Magenta, Yellow, Key/Black) — used in printing. Colors are mixtures of inks, so the model is subtractive: higher values = more ink = darker color.
💡 For digital design: work in HEX or RGB. For printing, convert to CMYK before sending to the print shop — the same colors can look quite different between the two models.
How to create a professional color palette
With color theory concepts in hand, creating a palette follows a logical process:
- Define the main color. This color represents the essence of the brand or project. Take color psychology and the target audience into account.
- Choose the type of harmony. For a more sober design, go with monochromatic or analogous. For more impact, use complementary or triadic.
- Apply the 60-30-10 rule. Distribute the palette's colors in the correct proportions across the composition.
- Test in context. See the palette applied to the actual product — dark background, light background, mobile version. Many palettes that look good in the abstract fail in application.
- Validate the contrast. Make sure text over background has a minimum contrast of 4.5:1 per the WCAG accessibility guidelines.
ImageTools' palette generator automates steps 2 and 3: choose the base color and the type of harmony, and the palette is generated with HEX, RGB, and HSL codes for each shade.