Color theory essentials

0:00 Color theory essentials

Picture two posts for the same bakery. The first uses eight bright colors, a different combination every time. Pink headlines, green buttons, purple borders, orange backgrounds. The second uses a warm cream background, a deep chocolate brown for text, and a single raspberry accent on the one thing that matters. Which bakery looks more professional? Which one would you remember in a feed? Almost everyone picks the second. Color is one of the fastest ways to create mood and recognition, and one of the easiest ways to look amateur. In this lecture, you'll learn the three properties of color, the color models you'll meet, harmonies, the sixty thirty ten guideline, and how to build a small, working palette in twenty minutes.

0:53 Why color matters

Why does color theory matter for a beginner? Because color decisions compound. Every post you publish either strengthens a recognizable look or adds noise. Consistent color is one of the strongest brand cues there is. People recognize a brand's color before they read its name. And color affects everything else in the design: hierarchy, readability and mood. Think of color like seasoning in cooking. A few well-chosen spices make a dish memorable. Every spice in the cupboard makes it confusing. The goal isn't to know every color rule. It's to make a few confident choices and repeat them.

1:36 Three properties

Every color has three properties. Hue is the color family, like red, blue or green, and it drives identity and mood. Saturation, sometimes called chroma, is intensity. Vivid colors work for accents, muted ones for backgrounds. And value, or lightness, is how light or dark a color is. Here's the key idea. Value matters most for legibility. Two colors with very different hues can have almost the same lightness, like a medium red and a medium green. Put text in one on the other, and it's hard to read, even though the colors look different. The quick check: convert your design to grayscale. If the hierarchy disappears, your values are too close.

2:25 Color models

Now the color models you'll meet. RGB is red, green and blue light, used for screens, and hex codes, like hash one A seven three E eight, are just RGB written compactly. HSL and HSB describe colors by hue, saturation and lightness or brightness, which is more intuitive when you're adjusting colors by hand. CMYK is cyan, magenta, yellow and black ink, used for print. Printed colors can look different from the screen, so brands often specify print values separately, sometimes with a spot color system like Pantone. For social media and the web, you'll work in RGB and export in the sRGB color space.

3:11 Harmonies

Let's talk harmonies, which are proven ways to combine hues. Analogous colors sit next to each other on the wheel, like teal, blue and navy, and feel calm and cohesive. Complementary colors sit opposite each other, like blue and orange, creating strong contrast and energy, best used as a main color plus an accent. Split complementary uses one color plus the two neighbors of its opposite, which gives contrast with less tension. And monochromatic uses one hue in several tints and shades, which looks elegant and minimal. You don't need to memorize these. Tools like Adobe Color or Coolors generate them. But knowing the names helps you choose intentionally.

3:58 The 60-30-10 guideline

Here's the most useful practical rule: sixty thirty ten. Roughly sixty percent of your design uses a dominant color, usually a neutral background. About thirty percent uses a secondary color, like your brand's primary for shapes or panels. And about ten percent uses an accent, reserved for the most important element, like the call to action or the key number. It's a guideline, not a law, but it prevents the most common problem: every color fighting for attention. The accent only works because it's rare. If your accent covers half the design, it's not an accent anymore.

4:40 Worked example 1: a food blog palette

Worked example one, simple. A halal food blogger's feed uses eight saturated colors, different on every post. Nothing leads, and the grid looks random. We build a palette. Primary: a warm olive, which feels natural and fresh. Accent: saffron, which is appetizing and culturally relevant to the content. Neutrals: a warm off-white background, a near-black for text, and two grays. The rule: saffron only on the single most important element in each post. Then the grayscale test: the headline and background now have a clear value difference. After ten posts, the grid is recognizable, appetizing and calm.

5:22 Worked example 2: a fintech palette

Worked example two, a business scenario with illustrative details. A new fintech app in the UAE wants a palette for social ads and app screens. The team first screenshots six competitors. Almost all use blue. So blue would make them invisible. They choose a deep teal as primary, which still feels trustworthy but stands apart, and a warm amber as accent for calls to action, always with dark text on it. They add tinted neutrals, a near-black with a hint of teal and a warm white. Then they create tints and shades of teal by changing lightness, so they have light backgrounds and dark text versions. Finally, they save everything as named color variables in Figma, so designers and developers use exactly the same values.

6:16 Watch me do it: a 20-minute palette

Watch me do it. I'm building a palette in twenty minutes. First, I pick the anchor: a teal that fits a calm, trustworthy brand. I open a palette tool and explore harmonies from it. I like a split complementary with warm amber. Next, neutrals: a near-black and a warm white, both tinted slightly toward teal, plus two grays. Then tints and shades. I take the teal and create five steps by changing lightness only. I design a sample post using sixty thirty ten: warm white background, teal panel, amber button. I convert it to grayscale. The hierarchy holds. Finally, I save each color as a variable with a role-based name, like color primary five hundred and color neutral nine hundred.

7:08 Color meaning is contextual

Let's talk about color meaning, because it's contextual. People often say red means danger, green means go, blue means trust. Those associations exist, but they change by culture, industry and context. Red is celebration and luck in some cultures, and often signals sales in retail. Green has strong associations with Islam and with Pakistan and Saudi Arabia's national identity, so using it can carry meaning in those markets. White is associated with mourning in some cultures and with weddings in others. So don't rely on a color meaning chart. Test your palette with your actual audience, and build mood through combinations of color, light and imagery.

7:54 Recap and try this now

Let's recap. Every color has hue, saturation and value, and value drives legibility, so use the grayscale test. Know RGB, hex and HSL for screens and CMYK for print, and export sRGB for social. Use harmonies to choose intentionally, and use sixty thirty ten so the accent stays meaningful. Build a small palette with one primary, one accent and a few neutrals, create tints and shades by changing lightness, and save everything as named styles or variables. Try this now. Create a palette for your brand with one primary, one accent and four neutrals. Build a sample post using sixty thirty ten, then convert it to grayscale and check your value contrast.