Transcripts
1. Intro: This week, in this module, we are going to create
a color palette specifically to use for UI
or user interface design. First, we'll take a look at
the colors that are actually available to you on your computer screen
in digital design, then we'll take a look at
the various color spaces, the specifications, how you tell your computer which color you would like it to
display, please. Next, we'll look at
which color combinations naturally look together. These are objectively
good color combinations. We'll talk a bit about
why you're probably better off ignoring these color psychology charts you see online that are
probably a bit too, overly simplified, but how color does have a slightly
more subtle meaning. And we should experiment and learn to look for these feeling. Finally, we'll look
at what the purpose of each of the colors is within a piece of user interface
design so that we can help choose ones that
fulfill those purposes. And then finally, we
will actually select our color palette ready to use for a piece of
user interface design. There is a lot to consider when we're choosing
a color palette. And the colors really can make or break the
user-interface design. So let's spend a little bit
of time learning to create a color palette that works
for user interface design.
2. Colour Spaces: We ended our module on how
color works by talking about the color spaces that are available in your
computer programs. And how when you're
building a website, you are dealing with sRGB, standard RGB, which will
normally just be called RGB. You may have noticed in your graphics programs
and sometimes in CSS2 that there's actually different ways
to reference colors. Hsl, hex, HSB, or CSS here. These are all different ways of referencing the exact
same set of colors. So if we look back at this
chart of all the colors, all of these HSL, HSP, they all reference
this same and gamut of colors or same range of colors. So we can translate
from one to the other without losing any
colors in our palette. What that means is deciding whether you reference
your colors in RGB or HSL is
entirely up to you. It's entirely up to
what you work best in. Each of these have
their own advantages and disadvantages. So let's take a little
look at why you might set your graphics program to
one rather than the other. So if we take a look
at this purple color, I've been using quite a lot. We already know that
to define it as RGB, we would look at
how far it is from the corners of that gamma
triangle we took earlier. The exact reference for this
is something like 7976231. If you've ever written any CSS, you'll know that you've
probably write that a little bit more like this. This is referencing
the exact same color in the exact same way. It's just rather than using
three digits for each, it simplifies it and adds a
few letters in there with a, B, C being higher than nine. This is called a hex code. It's just a shortened
version of writing out the RGB values out of 255. The advantages of working
with a hex code are purely that it makes your file
size a little bit smaller. It makes a lot of
sense when you're saving a very
high-definition photograph, but when you're making
a website and you're not actually using
that many colors, you don't really need to
use the hex code so much. The issue with dealing with RGB colors is that it's
not really very intuitive. We're dealing with them
just because those are the three lights in
the computer screen. But if we need to adjust it, it's very hard for
us to know exactly how to maybe
desaturate the color, exactly how we alter
these three numbers. It's far more intuitive
for us to think of HSL, hue, saturation and lightness. Hue is a value out of 360 depending on how many
degrees it is around. The color wheel,
saturation is a percentage with 0 being completely
desaturated or gray, and a 100 being
completely saturated. So a very pure color and
lightness is also a percentage. So it's a number
out of a 100 with 0 being black and a 100% white. Now, throughout this course, we've been referring to
this value as value. And that's because
in some contexts, lightness means something a bit more similar
to a brightness. In the context of
the HSL color space, the L means the exact same thing we've been calling the
value up till now, how much white or black that is. So we have some real
advantage using HSL instead, it's a bit more
intuitive to work with. We can adjust the numbers and we kind of know how the
color will change. But let's look at a
few other advantages. I can very easily create a
set of three colors with a similar value and a similar saturation
with different hues. And they're going to feel about the same importance on a page. So you'll notice all three
of these colors have a saturation of 45
and a likeness of 60. They just have a different hue and they feel about the same. The hue is calculated by
a color wheel like this. 10 would be a perfect
red as with 360, and it just works clockwise
around from there. And one real advantage
with having q as a number is we can really quickly find the
contrast in color. We can just take a 180
degrees away or add it depending on if the number
is above or below a 180. And we can instantly find
our contrasting color. We can also see from
these numbers are really, really easily if they have a contrasting saturation and a contrasting lightness as well. It's also very easy
with HSL for us to get a color which
is the exact same hue. A variation in saturation. Maybe throughout our design, we want different saturated
versions of this color. But remember when we are
choosing our colors were very, very rarely going to adjust the saturation or the lightness
completely on its own. In the example on the screen, the color on the right
looks a little bit too bright and the color on the left looks almost muddy or gray. It doesn't look
particularly nice. We'd probably adjust a
couple of things with both of these colors to make them
work nicer with our palette. Similarly, it can be very, very useful to just adjust the l value and get a lighter or darker
version of the same color. But again, we're never really going to use these exact values and our color palette
because we get colors that don't look
particularly nice. The HSL color space isn't going to fix
all of our problems, but to fix this color on the left and there's
color on the right. At least we've got some numbers that are a bit more intuitive to work with in Figma and in some other
graphics programs, There's also a HSB value. The B stands for brightness, but again, it doesn't
mean brightness. It again means value how
dark or light the color is. The only difference here
is just the dimensions. You'll notice that the
most saturated cyan on the left is in the middle, whereas on the right it's in
the top right-hand corner. In coral draw, Affinity Designer and some
other graphics programs you might see something like
this triangle called H WB or Hugh, White, Black. You'll notice that one
of the corners is white, one is black, and
one is the hue. This is probably an even more intuitive
color space to work with, but let's not talk
about it too much because you can't use this in CSS and it's going
to be a pain for you to transfer
the values across. I would recommend
simply using HSL. There are a few different ways to reference colors
on your website, but they're essentially
going to give you access to the same colors. Rgb is probably going to be a little bit
harder to work with. So maybe we should leave that. Hsl, on the other hand, is going to give us access
to the exact same colors, but perhaps a slightly
more intuitive way of choosing those colors. We still want to avoid getting too lazy when adjusting
these colors. Remember, we rarely want to
just D saturate one color without tweaking the hue and value to make sure
it still looks good.
3. Colour Harmonies: We have already talked about color harmonies quite
a bit in this section, and even a little in
some previous sections. But let's look at this in a bit more detail
and come up with some of the technical
terms you may hear now. So complimentary colors
means the colors that are exactly opposite each
other in the color wheel. And that's because as we know, if we mix all of the light waves from these
two colors together, we have the whole
range of lightwaves. So it will stimulate and relax the cones in our eyes equally as we look
around the design, we also looked at this
example where there's three colors equidistant
around the color wheel. Now these are triadic colors. If we were going to have
three very well-defined, very powerful colors
in our design. We may want to choose them equidistant around
the circle like this, we could choose colors that
are split complimentary. And this again is a
set of three colors, but this time they're
not equidistant. Just one of the colors
is the dominant color, and the other two colors
are the same number of degrees away from
that dominant color, tetrads, colors is when we use two different sets of
complimentary colors. Ideally, there shouldn't
be too close together, but they don't
necessarily need to be equidistant
around the circle. Either. We could choose
colors like this. Oh, we could choose
them more like this. There are plenty of color pickers online
to help you create this initial sets of colors using one of these
mathematical techniques. I'm going to recommend
this one I've just found called HTML color
coordinates.com. And I'm recommending
this because remember, a lot of people have the color, we'll create it incorrectly. And I've checked
this out and not only does it have the
correct color wheel, but also you can quite
easily change between complimentary colors
or triadic colors or any of those other
color harmonies that we just spoke about. I personally find it
easier to just work directly in Figma because Figma has this really nice
feature where I can do maths inside an input box. So let's say, for example, I had chosen this blue
as my dominant color. And I wanted to create a split complementary
color scheme. Well, this blue is 100%
saturated and has a value of 50, so it's right in between
whites and black. And I've simply
chosen that one of my split complimentary colors
will be minus 90 degrees. One will be plus 90 degrees. So I can just add 92 the
hue and subtract 92, the hue for the next color. And we now have
the color scheme. If we were to choose a split complimentary
color harmony like the one on the screen here, because this is only using
1.5 of the color wheel. We're not using any
orange, reds or yellows. We're gonna use
the purple and the green much more in our design. Imagine that we're
trying to have an equal weighting from
all around the wheel. We don't want too much
color from any one side. The next thing is we
never want our colors to be perfectly harmonic. It's a bit too perfect. It removes a bit of
visual interest. So I'm going to tweak
the hues a little bit. And of course, we're never
going to have colors that are completely saturated or are completely at 50 on the lightness
to darkness scale. And then maybe
something like this is the starting point for
creating my color palette. So we just looked at a
few different ways of choosing a harmonious
color palette. But they all essentially
involve choosing colors that are equally spread
around the color wheel. If we select these
based on mathematics in Figma or using a website like
the one I just showed you. We're going to want to
adjust the hue a little bit. We don't want it to be perfect because we
want there to be some visual interest
in our final designs. And of course, if we use a tool like this to
select our colors, they're going to
give us a very, very saturated, very bright colors. We're going to want to adjust the saturation and the value of the colors so that they are a bit more usable
for our websites.
4. Emotions: Way back in art college, I went to a lecture
in color psychology. And I remember being told
that football teams who wear red are more likely to win because they're
more aggressive, they're dominant and they
strike fear in their opponents. However, of course, that
is just psuedo science. In fact, no one has ever won
the Rugby World Cup wearing a red shirts and actually an ice hockey you're more likely
to win if you wear blue. It's just standard
statistical noise. It really shouldn't
be in the newspaper. It's the kind of fluff
you normally hear when people are trying to
find something to say. Like if you search Google
Images for color psychology, you'll see all these
nonsense diagrams of people trying to
decide what the colors mean and their meanings
are normally deceptively vague and they crossover
and make no sense. Of course there's a million
shades of red and they're not all angry and some of them
are actually quite calming. This is just a standard
piece of oversimplification. But that doesn't mean
that colors don't express an emotion or a feeling. In fact, they do probably
more than anything. Mark Rothko made
an entire career out of creating
emotion with colors, but he used a blend of colors. And the emotion of a color
depends on its context, the same as
everything else does. The tiniest bit of color in a web application that
is going to completely change what it
conveys and what it feels and the emotion of
the whole application. But unfortunately, I can't give you a handy little
chart which says, read as aggressive, we need to do a little bit
more work than that. Assume for a second that
we've created a very, very black and white
homepage for a website, and I want to add
just one color. What color would I add? Well, I have this
very relaxing kind of green in the background here. But maybe I want the page
to look more corporates. Well, I could do saturates it. Perhaps I don't necessarily
change the hue all that much. Perhaps I changed
the saturation. You can see that
everything feels different now by
choosing this color, I'm making just as
bolder statement, but I'm making a very
different statement. Or maybe I want it to
feel more creative. So I make it pink. Maybe pinks and
purples feel more creative because they were a
little bit rarer in nature. And so it feels
more alternative. Or maybe it feels more bold
just because it's so bright. It's hard to communicate
how changing this one color and
the background changes how we feel about it. But we can all
agree that it does. As you are out there viewing
websites in the wild, try and think about
what they make. You feel. This thin orange
line, these bold, flat colored shapes, this large, fluorescent green, or
this off colored blue. Although this is partially
subjective and your users may feel something a little
bit different to you. We want to train
ourselves up to be particularly good at
feeling colors the same way a musician is very
good at spotting what different notes feel like in the context of
different songs. And a good way to train us to do this is to
see the colors in a context or in contrast
to a different color, this purplish blue used in the design in
the bottom right. You might think, this looks
quite similar to the one that I used on the opening
credits for this very video. And if I wanted to be on-brand, maybe I would use this blue
as my background color. Or let's for a second, assume I just flooded the whole
page with just this blue. Just look at this for a second. Acknowledge what you've field, but don't necessarily
try and name it. And then I'll point out
that this isn't the blue I used on the
opening credits, but this one is an instantly, I feel something different. Maybe it helps if we look
at them next to each other. The color on the left
feels cleaner to me. It feels a bit perfect. While the one on the right
feels a bit more tactile, like I can actually pick it up a piece of paper and
interact with it. There's a distinct difference
between these two colors that I only noticed when I
put them next to each other. Like how a well-trained
musician can probably hear the difference
between a C and a C sharp. And I can only hear
the difference when they come next to
each other on a song. However, if a song uses a
C-sharp somewhere and suddenly someone changes it to a C. I can instantly here that
the song's not right. I couldn't notice it on its own. But when I hear it in
the context of the song, I can sort of see
that it's wrong. So it's really important we get the feeling of these
colors just right. But the way to do it is
probably to look at them in some kind of context or in
contrast to other colors. So there's lots of over-simplification about
what a color might mean, what red means, and
what blue means. But there's all kinds of
different shades of these, so we can ignore
most of this stuff. But color does make the fastest, strongest
emotional connection. And therefore, it's really
important that we train ourselves to identify
the emotions in colors. The tiniest change in color can massively affect what
emotions it invokes. And it's much easier for us to identify the differences
when we say it in context. Let's do that next.
5. Emotions Exercise: So in the last video, I mentioned that
to help us train ourselves to feel the colors, It's good to see them next,
two contrasting colors. And it's also good to
see them in context. Now, I've gone ahead and chosen some contrasting words and
then tried to find colors that fit them and put them
next to each other to see if the angry color I have on the left feels angry next to the calm color I
have on the right, I have, of course, specifically
not chosen a cliche, red and blue to be
angry and calm, but I believe I've found an angry color and a
calm color, nontheless. As another example, I
chose two more words, creative and organized in a way to sort of way those feel like contrasting
words to me. And I've chosen these
two colors that I feel communicates
those two words. I have a few more examples
of contrasting colors, but I'm going to make you
guess which is which? So for this, I have chosen
the words fun and serious. Which one do you think
I decided was fun? Yes. Is a little bit obvious perhaps, but by creating the two contrasting
emotional colors together, it makes it far easier for me
to select a color for fun. The next set of words I
chose was loud and quiet. And I ended up choosing these two colors are a
couple of more examples. I chose the words
nature and technology, and these are the two
colors I ended up with. And I chose the
words young and old. And these are the two
colors I ended up with. So you'll first half of this exercise is to
think of an adjective or a describing word that helps explain a branding message you might have in your website. Maybe you're making the
website for a bank, and therefore the word
might be security. Then think of the contrast
thing word for security, the contrasting
word would be risk. And then try and identify good colors that communicate
both of these words, security and risk,
and put them in a contrast and composition
like the one on the screen. Try and do at least one of these where you don't
change the hue, you just play with the
lightness and saturation. This stops us using those
tired ideas like red is passion as a crutch and makes us actually
look at the colors. This doesn't just make it easier to find the
color here after. As an added bonus, it helps you find
colors that you would really want to avoid. If you're trying to avoid
your website looking risky, you want to avoid
the colors that you might associate with risk. Once we're happy we have identified a good
emotional color. Let's look at how it
looks in a range. So this is the pink I chose
for creative earlier. I might have some darker and lighter tones
throughout my website. So let's try and create
a little bit of a range. Of course, I've added
a little bit of red to the darker shades
and a little bit of yellow to the lighter shades. I've done the same thing
with my fun color. And as a final example, I have created a range
with my calm color to this isn't to say that
this whole range will make it into my
final color palette. Just now I have some options to play with when I figured
out what colors I need. And I can try my calm
colors in the context of an actual design
now and see which one's going to look good
as this background color, for example, or which of my
creative colors look good? Of course, we're going to have a more complicated
design than this, but we want to try the
colors out in the context of the design to make
sure they still feel how we wanted them to feel. Your exercise for this video
is to choose an emotion or describing word that you want your website to communicate. Then think about what the contrasting word
is and find a color for both of these words by choosing and tweaking
these two colors together, we're going to see it in
contrast with its opponent and it's going to really help
us choose the exact shade. And finally, once we're
happy with our color, Let's create a range. So we have the darker versions
and the lighter versions. And then just try them out in the context of a website
to make sure they look good and make sure that they feel the emotions that were
supposed to be feeling.
6. Colour purpose: For us to pick the exact color
palette that we are going to use for our
web application. It's worth us
thinking about what the purpose of each of the
colors is going to be. So let's look at
this design that I created a little bit
earlier and look at all the colors that are on this already and what are
they being used for? First of all, we of course
have our blacks and whites. Or in this case,
I've got a dark navy blue and the light bluish gray. Unless I'm trying to create
a very formal style or creates a very specific
point with black and white, I'm very rarely going to use a perfect black and
a perfect white. They're almost
always going to have a little bit of
some hue in there. There can be a very
desaturated hue that it either has a very
high or very low value. There's also going
to be a lot of them, a lot more than you'd think. Actually, if you
look at this design, I've got about six blacks and
whites within this design. And this is just
one page as well. There may even be a use
for me having a few more. Remember, most of the
colors in your website, I'm going to be
very desaturated. You're going to
have very, very few really saturated bright colors. So actually these
blacks and whites or very desaturated blues, that they are a really important because there
most of the website. Yet people often don't really even think about
these colors that much because it's very hard to get a decent
looking color palette. People will often just use a color palette they
found somewhere else and probably even forget about the ones that are in the
background and foreground, like this set of colors here. Next up, we have those
really obvious colors. The ones that you are
always thinking about, the branding ones and
the call to action ones. So I have a big bright orange
call to action button. It's the most salient
thing on the website. It's really standing out
and saying click on me. The purpose of this color is to catch your eyes
straight away. And then we've got the
branding blue here. The purpose of this color
is to create a consistent, coherent branding
message throughout. We might also use this as a
secondary color for buttons. We want it to stand out
less than the orange. I've also chosen
this blue because it contrasts quite nicely
with the orange. And so if our eyes got a bit too used to
looking at the orange, we can give it a
different bright color. So that's mostly it for our really obvious branding
colors in this whole design. If we had a more
complicated application, we may have a third branding
color that we use elsewhere. But the purpose of these colors is they stand out the most and they create the most personality
for our application. And lastly, we have
our accent colors. Now, these are being used
here behind lozenges and status is on the page so that we can
remember the stapes. We can remember things like how many unread
messages we've got. We don't need them
to jump out at us, but we do need to find them
when we're looking for them. Often, these could
be a variation of our primary and
secondary colors or something that contrasts
nicely with them. But we're almost always
going to have a bright red, a bright green, and
a bright yellow in this accent color set. And that's because
the one thing that is universal in our understanding
of color on the web is that everybody now
knows warning messages are red and success
messages are green. However, we can adjust red
and green a little bit. It needs to be obvious that it's the warning red and
the success red. But in this example
I've given here, I've played with them a little. I've made them not too
saturated, not too bright. But I think there's still quite
obviously the success and the warning colors and the yellow is often
used for information. So these are my accent colors. They're going to
be used sparingly, sometimes just for a little
bit of visual flair. And sometimes they draw a
little bit of attention, but not as much as our
call to action buttons. So we have three distinct kinds of colors throughout
this application, we've got our blacks and whites that are very rarely
black and white. We have our primary
and secondary colors, and we have our accent colors. Once we know what
our colors are, we also should take some time checking which ones
work together. Some colors are just not going to work on top
of other colors. And we might want to
make a note of this so people don't go and
accidentally use them. Now because color looks
relative to its surroundings. The only way of
checking this is to actually look with our eyes. So similar to like we did with the Joseph Alberta's exercises, you can create a
smaller box inside a larger box and check how the colors look
inside of each other. So, for example, this
orange on this gray, or even the gray on the orange, it looks really good. I can see very clearly the
distinct difference in colors. This very light gray
with this orange, this looks absolutely fantastic. I think these colors can both go on top of or
inside of each other. However, this other gray with this orange, it doesn't work. It's very hard to see the
defined line between them. It looks a little blurry almost. It's quite painful for
my eyes to be honest. There is plenty of contrast between the orange
and the grey hues. But the values and the saturations are
not that different. There's just not enough
contrast between those. So I probably want to
make sure everyone knows that we can't use these
two colors together. This orange can't go on
this gray background, and we can't have this gray
text on an orange button, will want to do this same test with every color combination. It's okay if one
color doesn't work with another as long
as we make a notes, but we wanna make sure
also that most of our colors work with most
of our other colors. So we have three distinct
groups of colors. We have our blacks and whites, we have our primary colors, and we have our accent colors. Most people making
most websites aren't really thinking about all these different
kinds of colors. And yet most of our website
is our blacks and whites. So we want to make sure we
get all of these Looking good when we have our
whole color palette, we want to check they work
on top of each other. And the only way to do
that is to actually put them on top of each other and
check that they look good.
7. Summary: We finally created
a color palette. It might change as we design our pages in our application and will no doubt find that some colors are less
useful than we thought, or that we need
another color when we start to design
individual pages. The important thing
is that we have an agreed color palette with
our team or our clients. And if it changes, we can have a conversation
about that. At the time. The colors convey the
emotions of our brand, but are largely
very desaturated. So we'll have a subtle
emotional impact on the user of our
web application. While some of our colors
are very saturated, but will be very sparingly
used around the design. These will stand out and grab
people's attention easily. Amongst all the desaturated
colors are colors have a purpose which will stay the same throughout the
application design, making it easy for users
to navigate around future pages once they have an unconscious understanding
of what each column means. We're now ready to apply
our colors to our design. But first, let's choose some appropriate images and illustrations to
use in our design.
Rob Sutcliffe, UI Designer / Developer
