Color Theory for Designers: Palettes, RGB, CMYK and Contrast

Color is the first thing we notice about a design and one of the biggest influences on how it makes us feel. Used well, it guides the eye, builds identity and sets a mood. Used badly, it confuses, tires the eye or makes text unreadable. In this lesson you'll learn to choose colors with a method, not at random.

How to describe a color

Design apps let you pick colors with the HSB or HSL model (hue, saturation, brightness or lightness). It's the most intuitive way to create variations: keep the hue and change the lightness to get a range of tints and shades of the same color.

The color wheel and color harmonies

The color wheel arranges hues in a circle: primaries, secondaries and tertiaries. From it you can build color schemes that tend to work:

The 60-30-10 rule

A simple way to balance a palette: a dominant color on roughly 60% of the surface (often a neutral: white, cream, gray or navy), a secondary color on 30% and an accent color on 10%, reserved for what has to stand out (buttons, offers, key numbers). If the accent shows up everywhere, it stops standing out.

A warm coffee shop palette split with the 60-30-10 rule: cream dominates, coffee brown supports, and the green appears only where you want people to look.

Color and emotion: handle with care

Colors carry common associations: blue with trust and calm (which is why banks and tech companies love it), green with nature and health, red with energy, urgency or passion, yellow with optimism, black with luxury and sophistication. But those associations depend on culture, context and combination: white is a color of mourning in parts of East Asia, while red means good luck in China. Treat color psychology as a hint, not a rule, and look at what your competitors use so you can stand apart.

Color models: screen vs. print

Contrast and accessibility

Text has to be readable for everyone, including people with low vision or anyone reading a phone in bright sun. The Web Content Accessibility Guidelines (WCAG) measure the contrast between text and background as a ratio from 1:1 (no contrast) to 21:1 (black on white). For level AA they call for at least 4.5:1 for normal text and 3:1 for large text. In the U.S., these guidelines are also the usual benchmark for accessible websites, so clients increasingly ask for them.

Free tools like the WebAIM Contrast Checker or Figma plugins calculate the ratio instantly. The color picker in Chrome's developer tools also shows the contrast of any text on a web page, and its Rendering panel can simulate how the page looks to someone with color blindness. Roughly 1 in 12 men has some form of color vision deficiency, most often red-green, so never communicate with color alone ("errors are shown in red"); add icons, labels or patterns.

How to build a palette, step by step

1. Start from the brief: what should the brand convey? Which colors do competitors use?
2. Choose the primary color and define it in HEX, RGB and CMYK.
3. Choose the accent with a harmony (complementary or split-complementary works well for actions).
4. Build the neutral scale: 5 to 8 grays (or neutrals with a hint of the primary).
5. Create tints and shades of the primary (backgrounds, button states).
6. Check the contrast of every text-and-background pair you plan to use.
7. Test it on real pieces: a social post, a button, a poster. Adjust.

Tools like Adobe Color or Coolors help you explore combinations, and you can also pull palettes from photos that inspire you.

Case study: the palette of a quinoa snack brand

A small Denver snack company founded by a Peruvian-American family (illustrative case) makes puffed quinoa and amaranth snacks. Its first bags were green and kraft brown, "because it's natural." The problem showed up on the first store visit: almost every product in the natural foods aisle was green and brown. On the shelf, the bag disappeared. Some brands prove the opposite approach works: Tiffany's robin's-egg blue or John Deere's green and yellow are so distinctive that you recognize them before you read a word.

The designer followed this lesson's method. The brief boiled down to three words: Andean, energetic, modern. The primary color became a purple inspired by Peruvian purple corn, which no competitor used; the accent became an intense yellow that contrasts strongly in lightness with the purple (and on the traditional painter's wheel, the two are complements); and a warm cream became the dominant neutral. Before approving anything, she checked every text-and-background pair:

The last row teaches the most: the yellow is so light that white text on it nearly vanishes. Rule of thumb: on yellows and other very light colors, use dark text. The result was a bag you can spot from the end of the aisle and a palette that works the same on the package, on Instagram and on the website, because every color had its HEX, RGB and CMYK values defined from day one.

Common color mistakes

Primary (coffee brown):      #7C2D12
Secondary (cream):           #FED7AA
Accent (sage green):         #4D7C0F
Neutrals: #FFFBF5 · #F5EFE6 · #D6CFC4 · #A8A29E · #57534E · #292524

Harmony: brown and cream are analogous (warm); the green adds contrast
as a split-complement and echoes the coffee plant.
60-30-10: very light cream background (#FFFBF5) 60%, brown in headlines
and imagery 30%, green on the "Order here" button and details 10%.
Contrast: brown #7C2D12 on cream #FED7AA = 6.9:1 (passes AA).

Summary

• A color is described by its hue, saturation and lightness.
• Harmonies (monochromatic, analogous, complementary, triadic) and the 60-30-10 rule help you build balanced palettes.
• Emotional associations of color depend on culture and context.
• RGB and HEX are for screens; CMYK and Pantone are for print.
• Check contrast (at least 4.5:1 for normal text) and never communicate with color alone.

Next lesson: Typography: How to Choose, Pair and Set Fonts. You'll learn to choose and pair typefaces and set text that reads well and has personality.