- Have you ever heard of upstaging?
That's when a supporting character of a stage production
suddenly decides that they are the star of the show.
They start drawing the crowd's attention to themself
instead of letting it stay on the show's stars
like it's supposed to.
So upstaging is bad.
And it's bad when it happens on stage
and it's also bad when it happens in a color scheme.
And yes, color schemes, they really do resemble
stage productions.
They're often build around one or two starring colors,
a small handful of co-stars, and then there's a bunch
of supporting temps and shades.
And their job is to make sure that the stars look good.
So let's talk about it.
We'll talk about both supporting and starring colors.
And we'll do this in the context of backdrop hues
that are meant to support and foreground colors
that are meant to be the stars of the show.
Attention getting colors usually get noticed
by being brighter than surrounding hues and also
by being notably lighter or darker than nearby colors.
Backdrop colors, on the other hand, they're the flip side.
They generally play their supporting roles by being
less saturated and either darker or lighter
than a palette's starring color.
The pale, muted blue-gray in this sample.
It makes a fine backdrop for a darker and more intense
accent color.
And here's a light, neutral backdrop and it works well
against a dark, vibrant blue.
And this dusty, mid-value teal.
It looks really good behind both a dark and a light hue.
And of course, a backdrop can have more than just
one color going on.
And when it does, we need to pay special attention
to the backdrop's values.
And in most cases, we need to keep the range of values
in those backdrop areas as narrow as possible.
Notice how this backdrop features a pair of cool neutrals
and how one of the neutrals is only slightly lighter
than the other.
Here's a third hue that's a tad darker.
And that's what I mean by a narrow range of values.
A value structure that'll act quietly upon viewer's eyes
while also allowing plenty of room for something
like a light, bright, warm accent color.
Works nicely with a cool accent color, too.
And now we have warmer hues underneath
our cool accent color.
And here's a mix of both warm and cool shades
in the backdrop and both warm and cool colors up top.
Whenever possible, I really like to take time to explore
different warm versus cool color schemes
when I'm considering both backdrop and foreground colors.
And I also like taking a look at lighter backdrop ideas.
Here, as you can see, I've added several darker colors
with various levels of saturation on top
of a light backdrop of muted ivories and warm grays.
Look into mid-value backdrops as well.
One thing about mid-value backdrops, they can allow
for foreground colors that are both lighter and darker.
By the way, I know we've been looking at a lot
of muted backdrop palettes.
Backdrops can be bright, too.
Same rules apply.
Watch the value structure of your overall color scheme
to make sure that things stand out like they're supposed to.
Bright backdrops like these, they might be just the thing
needed if you want to infuse a layout's virtual stage
with feelings of energy, thematic flavor.
And if you're okay with a backdrop that calls for
a fair amount of attention.
And yes, all of this applies to other kinds
of backdrops, too.
Digital effects have been used here to narrow down
the range of a photo's values in the area
where the type sits over top.
And here's a darkened version with light type.
Working carefully with both foreground and background colors
and treating them almost like they are onstage characters,
some starring and some supporting, it's a great way
to approach all kinds of design and illustration projects.
Give it a try and see what kind of performance
you can get from the palettes you create.