Skip to content

Graphic Design Fundamentals for Creators and Marketers · Color theory and accessible contrast · lesson 12 of 18 · 7 min

Color in practice: hierarchy, mood and consistency

From palette to real designs

Knowing theory is one thing; using color well across dozens of posts is another. This lesson turns your palette into repeatable decisions.

Color creates hierarchy

Color is a hierarchy lever alongside size and weight:

  • Accent = action or key info. If the accent appears everywhere, it stops meaning anything.
  • Neutrals carry content. Most text should be near-black or near-white depending on background.
  • Muted versus saturated: saturated colors advance; muted colors recede. Use muted backgrounds so content pops.
  • Warm versus cool: warm colors (reds, oranges, yellows) tend to feel closer and more energetic; cool colors (blues, greens) tend to recede and feel calmer.

Color and mood — by context

Instead of relying on universal "meanings", build mood with combinations:

| Desired mood | Typical approach | |---|---| | Calm, trustworthy | Cool hues, moderate saturation, plenty of light neutrals | | Energetic, urgent | Warm, saturated accents, high value contrast | | Premium, minimal | Restrained palette, dark or off-white backgrounds, one refined accent | | Playful, youthful | Brighter triadic combinations, rounded shapes | | Natural, organic | Earthy analogous hues, muted saturation, textures |

Always test with your actual audience and category; conventions vary by market.

Color in photography and imagery

Imagery often contributes the 30% in 60-30-10. Harmonize it with your palette:

  • Choose photos whose dominant colors sit comfortably with your brand palette.
  • Apply a consistent photo treatment — the same warmth, contrast and saturation adjustments, or a consistent preset — across a series.
  • Use duotones or color overlays for graphic consistency when mixing photos from different sources (keep overlays subtle so faces look natural).
  • Watch skin tones: heavy color grading can make skin look unnatural; always check people look like themselves.

Consistency across a series

For recognizability, lock a small set of rules:

Series color rules (example)
Backgrounds:   off-white or deep navy only
Headline:      navy on off-white / off-white on navy
Accent:        coral — max 1–2 uses per slide (key word, CTA)
Charts:        navy, coral, gray (with labels)
Photos:        warm preset "A", saturation −10
Never:         coral text on off-white (fails contrast)

Dark mode and platform backgrounds

Your design will be seen on light and dark app themes. Test how your post looks against both: a pure white design can look like a glaring block in dark mode; a design with transparent edges (such as PNG stickers) can change appearance. Designing with your own solid background and some internal margin keeps things predictable.

Color for data and charts

When you share charts or infographics:

  • Use one highlight color for the data point that matters, with other data in grays.
  • Order colors logically (light to dark for low to high values).
  • Label directly on the chart where possible instead of relying on a legend matched by color.
  • Check accessibility with a color-blindness simulator.

Worked example: making a stat pop

A carousel slide says "Our clients cut editing time by around half" with a bar chart of before/after. (Illustrative figures should be labeled as such, and any real claim must be supported by evidence.)

  • Background: deep navy (60%).
  • Bars: "before" in muted gray, "after" in coral (the one thing to notice).
  • Labels: off-white text directly on bars.
  • Headline: off-white, with the key phrase "around half" in coral.
  • Everything else neutral, so the eye goes straight to the coral elements.

A five-minute color review

Before publishing any design, run this quick review. First, view it in grayscale to confirm the value structure still shows the hierarchy. Second, count how many times the accent color appears — if it is more than two or three, remove some. Third, compare the post with the previous three in your feed to check the photo treatment and palette match. Fourth, check any text-on-color pairing against your approved contrast list. This review takes minutes and catches most color problems before your audience sees them.

Common mistakes

  • Accent color used on every element.
  • Inconsistent photo editing within a series.
  • Designs that only work in one app theme.
  • Rainbow charts where every bar is a different color for no reason.
  • Making numerical claims in graphics without evidence (this is also an advertising-standards issue).

Hands-on: color variables with light and dark modes in Figma

  1. Create a variable collection called Color with two modes: Light and Dark.
  2. Add primitive variables for your raw palette (teal/500, teal/700, neutral/900, neutral/50…).
  3. Add semantic variables that point to primitives and change by mode:
Semantic variable        Light mode        Dark mode
color/bg/default         neutral/50        neutral/900
color/text/primary       neutral/900       neutral/50
color/text/brand         teal/700          teal/300
color/accent/cta-bg      amber/400         amber/400
color/accent/cta-text    neutral/900       neutral/900
color/border/subtle      neutral/200       neutral/700
  1. Apply only semantic variables to designs. Switch a frame's mode to preview the dark version instantly.
  2. Check contrast in both modes — a pairing that passes in light mode may fail in dark mode.

Canva users can get part of the way with a Brand Kit palette and separate light and dark template versions.

Series color rules (example)

SERIES: "Money Mondays" carousel
Background: warm white (light) — never pure white
Headlines: near-black; key number in amber on a near-black chip
Charts: teal for 'you', gray for 'average'; direct labels, no legend-only colors
Photos: warm grade, slightly desaturated so amber accents stand out
Never: amber text on white (fails contrast); more than one accent per slide

Before/after: making a statistic pop

| | Before | After | |---|---|---| | Stat | "68%" in the same teal as the headline, same size | "68%" huge, near-black on a single amber chip; everything else muted | | Background | Busy gradient in three colors | Flat warm white | | Source | Missing | Small source line under the stat (always cite real data; this number is illustrative) |

Summary

Use color as a hierarchy tool, build mood through combinations rather than single "meaningful" colors, harmonize imagery with a consistent treatment, lock series rules, and test in both light and dark contexts.

Video lecture: Color in practice: hierarchy, mood and consistency

Lecture coming soon · 11 chapters · about 8 minutes. Read the full transcript below.

  1. Color in practice
  2. Why rules matter
  3. Color creates hierarchy
  4. Mood through combinations
  5. Photos in your color system
  6. Worked example 1: making a stat pop
  7. Worked example 2: a skincare series
  8. Watch me do it: light and dark variables
  9. Color in charts
  10. Common mistakes
  11. Recap and try this now

Lecture transcript

Color in practice

You've built a palette. It looks great as a row of swatches. Then you start designing real posts, and something goes wrong. The accent shows up everywhere. The charts are confusing. Your posts look great on white and muddy in dark mode. And after ten posts, the series doesn't feel like a series. Knowing color theory is one thing. Using color well across dozens of designs is another. In this lecture, you'll learn how color creates hierarchy, how to build mood through combinations, how to treat photos, how to keep a series consistent, how to handle dark mode, and how to use color in charts. By the end, you'll have series color rules and a light and dark setup you can reuse.

Why rules matter

Why does practice matter more than theory here? Because color decisions are repeated hundreds of times. Every post, every slide, every chart. Without rules, each decision is made from scratch, and small inconsistencies pile up. With rules, you make the decision once. Think of a sports team's kit. There's a home kit and an away kit, and the rules for when to wear which are decided before the season. Players don't choose their shirt color each morning. Your series color rules and dark mode setup are your kits. Decide them once, and every design starts on-brand.

Color creates hierarchy

Let's start with hierarchy. Color is a hierarchy lever alongside size and weight. The accent means action or key information, and if the accent appears everywhere, it stops meaning anything. Neutrals carry most of the content. Most text should be near-black or near-white depending on the background. Saturated colors advance and muted colors recede, so use muted backgrounds and let content pop. And warm colors like reds, oranges and yellows tend to feel closer and more energetic, while cool colors like blues and greens tend to feel calmer and further away. Here's the key idea. Color hierarchy works through restraint. The fewer colors compete, the louder your accent becomes.

Mood through combinations

Now mood. Instead of relying on universal color meanings, build mood with combinations. Calm and trustworthy: cool hues, muted saturation, lots of light neutral space. Energetic and urgent: warm, saturated colors with high contrast. Premium: deep darks or rich neutrals with restrained accents, like gold or a single jewel tone, and generous space. Friendly and playful: brighter, warmer hues with rounded shapes. Natural and wholesome: earthy tones, greens and warm neutrals. Notice that mood comes from saturation, value and space, not just hue. A blue can feel calm or electric depending on how you use it.

Photos in your color system

Photos are part of your color system too. A feed where one photo is cool and blue, the next warm and orange, and the next oversaturated will feel inconsistent, even if your graphics are perfect. So choose a photo treatment and apply it every time. Maybe a warm grade with slightly reduced saturation, so your accent color stands out against it. Save it as a preset in your photo editor. And think about color when choosing images. A photo with lots of red will fight a red accent. Pick images whose dominant colors sit comfortably with your palette, or place them on neutral backgrounds.

Worked example 1: making a stat pop

Worked example one, simple. A personal finance creator wants a statistic to pop on a carousel slide. Originally, sixty-eight percent is in the same teal as the headline, at the same size, on a busy three-color gradient. Nothing pops. The fix: a flat warm-white background. The headline in near-black at a normal size. And the number, huge, in near-black on a single amber chip. Everything else is muted. Now the eye goes straight to the number. And one more thing. A small source line sits under the statistic, because data needs a source. The number here is illustrative, but on a real slide, it must come from a real, cited study.

Worked example 2: a skincare series

Worked example two, a business scenario with illustrative details. A Dubai-based skincare brand runs a weekly educational carousel series and also shows the same content in its app, which supports dark mode. The problems: some slides use pure white backgrounds that glare, others use the brand's light pink as text, which fails contrast, and in dark mode, dark text vanishes. The designer writes series color rules: a warm white background, never pure white; headlines in near-black; the brand pink only as a background chip with dark text; charts with the brand color for the product and gray for the average, with direct labels. Then she builds light and dark modes with semantic color variables, and checks contrast in both. The series finally looks like one family everywhere.

Watch me do it: light and dark variables

Watch me do it in Figma. I create a variable collection called color with two modes, light and dark. First, primitives: my raw palette, like teal five hundred, teal seven hundred, neutral nine hundred and neutral fifty. Next, semantic variables that point to those primitives and change by mode. Background default is neutral fifty in light mode and neutral nine hundred in dark mode. Text primary flips the other way. Brand text is teal seven hundred in light and a lighter teal in dark, because the dark version needs to be lighter to pass contrast. Now I apply only semantic variables to my design, switch the frame to dark mode, and it updates instantly. Then I check contrast in both modes.

Color in charts

Let's talk about color in charts and data, because this is where color carries meaning. Use your brand color for the thing you want people to focus on, like this year or your product, and neutral grays for comparisons. Limit the number of colors in one chart. Label data directly on the chart instead of relying on a color legend. Remember color vision deficiency, so never use red versus green as the only difference. Use lightness differences, patterns or labels. And keep colors consistent across charts. If teal means you in one chart, it should mean you in every chart in the series.

Common mistakes

Common mistakes. Using the accent everywhere. Pure white backgrounds that glare, and pure black that feels harsh, when slightly tinted neutrals feel better. Inconsistent photo treatments. Brand colors used as text when they fail contrast. Designing only for light mode. Rainbow charts with a legend. And inventing new colors for every campaign. Try a five-minute color review before publishing. Can you name the role of every color? Is there only one accent? Does it pass contrast in the modes where it will appear? Does it match the series rules?

Recap and try this now

Let's recap. Color creates hierarchy through restraint: neutrals carry content, and the accent marks the one thing that matters. Build mood with combinations of saturation, value and space. Give photos a consistent treatment. Write series color rules, set up semantic color variables with light and dark modes, and check contrast in both. Use color in charts to focus attention, with direct labels and no color-only meaning. Try this now. Write a series color rules block for your content, like the example in the lesson, including at least one never rule based on a contrast check. Then apply it to your next three posts.

Key takeaways

  • Color hierarchy works through restraint: neutrals carry content; one accent marks the key element.
  • Build mood with combinations of hue, saturation, value and space rather than single-color 'meanings'.
  • Give photos a consistent treatment and choose images that sit comfortably with the palette.
  • Use semantic color variables with light and dark modes, and check contrast in both.
  • In charts, use the brand color for focus, grays for comparison and direct labels instead of color-only legends.

Try it

Write a 'series color rules' block for your content like the example, including at least one 'never' rule based on a contrast check, and apply it to your next three posts.