Color theory basics for designers and marketers
By the 000098 editorial team · Updated · 8 min read
Color theory is a set of practical rules for choosing colors that work together. You do not need art school to use it. Three ideas cover most real-world decisions: the color wheel, the three properties of a color, and how much of each color to use.
The color wheel
A color wheel arranges hues in a circle so that relationships are easy to see. Digital tools use an RGB-based wheel where red sits at 0°, green at 120° and blue at 240°. Our flagship #000098 sits exactly at 240°: pure blue, darkened.
Harmonies that reliably work
- Complementary: two hues 180° apart, such as navy and olive-gold. Maximum contrast; use one as the dominant color and the other as an accent.
- Analogous: neighbours within about 30°. Calm and cohesive; common in nature photography and wellness brands.
- Triadic: three hues 120° apart. Lively and balanced, but needs one dominant color to avoid chaos.
- Split complementary: a base plus the two hues beside its complement. Softer than straight complementary and easier to balance.
- Monochromatic: one hue in several lightness steps. Elegant and very hard to get wrong.
Every color page on this site lists all five harmonies automatically, and the palette generator builds them with one key press.
Hue, saturation and value
Hue is the family (blue, red). Saturation (or chroma) is intensity: vivid versus grayish. Value (lightness) is how light or dark it is. Most palettes that "feel off" fail on value, not hue. A quick test: convert your design to grayscale. If headings, buttons and backgrounds blur into each other, you need more value contrast, regardless of the hues.
Warm and cool
Reds, oranges and yellows feel warm and appear to come forward. Blues, greens and violets feel cool and recede. Designers exploit this by using a cool background with a warm call-to-action button so the button pops.
The 60-30-10 rule
Borrowed from interior design, this rule says roughly 60% of a layout should be a dominant neutral or brand color, 30% a secondary color and 10% an accent. On a website that might be 60% off-white background, 30% deep navy for headers and footers, and 10% bright yellow for buttons and highlights. It is a starting point, not a law, but it prevents the most common mistake: giving every color equal weight.
Context changes color
The same swatch looks different on white than on black, and next to a complementary color it looks more saturated. Always judge a palette in the layout where it will live. The previews on each color page and the contrast checker help you do that before you commit.
A five-minute process
- Choose one base color that fits the message.
- Pick a harmony type that matches the mood (calm = analogous, bold = complementary).
- Add a light and a dark neutral tinted with the base hue.
- Assign 60-30-10 roles.
- Check text contrast and test in grayscale.
Watch: Color theory basics: the color wheel and color harmonies
Video by its creator on YouTube, embedded for reference. 000098 is not affiliated with the channel.
Want this applied to your brand?
Get an accessible palette, tokens and a style guide built for you.
Keep reading
Hex color codes explained: how #000098 and every other code works
A plain-English guide to hexadecimal color codes: what the six digits mean, how to read them, shorthand, alpha and how to convert to RGB.
WCAG color contrast: a practical guide to accessible colors
What contrast ratios mean, the AA and AAA thresholds in WCAG 2.2, how they are calculated and how to fix colors that fail.
Color psychology in marketing: what the evidence actually says
How color influences recognition, attention and perception in branding and conversion, which claims are myths, and how to test colors properly.
How to choose brand colors: a step-by-step system
A repeatable process to pick primary, secondary and neutral brand colors, test them for accessibility and document them in a style guide.