Transcripts
1. Adative & Subtractive: In most countries, England
is definitely one of them. When you're in school around
the age of five or six, your teacher will tell you, these are the primary colors, red, blue, and yellow. They will teach you
that you can't make these three colors
from any other colors. And that you can mix these three colors to
make any other color. Quick question. Which of those
three facts do you think your teacher was
lying to you about? These three colors are
the primary colors. You can't make
these three colors from mixing any other color. And you can make all
other colors from these. Well, unfortunately,
your teacher was lying to you about all
of those things. If you've spent any time
working with a computer, you're probably
aware that it has three different lights
inside the monitor, red, blue, and green ones. These are often referred to as the primary colors of
light, whereas red, blue, and yellow might
be thought of as the Brian primary colors when
using paint, for example. Another way to think
of this might be that the lights are additive
primary colors. As in you start
with a black screen and you add light
to create colors. Red, blue, and yellow are often incorrectly called
subtractive primary colors, as in they start with the
natural white light from the sun or some artificial
white light from a light bulb. And every object that, that light hits
subtracts color from it. We'll talk about this
a little bit more throughout the rest of
this module and later you'll understand why it's bad to incorrectly think of red, blue, and yellow as being
the primary colors. They are not. If you look at these two sets of primary colors for more than a
couple of seconds, you probably quickly realize
it's pretty unlikely that both sets of primary
colors would have almost the exact
same colors in them. Let's look at just the red, blue, green for a second. Now, these are definitely
the colors that are in your monitor right now
that you are looking at. This does not mean that we can create any color on a
screen of a computer. We can't, we actually can't
even create that many, but we can create probably
several billion colors. And that's plenty for
us to be working with. Primary colors cannot be
used to create all colors, and we can actually
create them from mixing some other colors. However, we use these
three lights in a computer screen simply
because they can create the most amount of colors from just three lights to get the primary colors
with paint or ink. Or we have to do is overlay these three lights and you'll get something that
looks like this. These three colors are probably quite familiar to you
because they are, of course, the three colors
you put in a printer. And of course you put these three colors in
a printer because they can print the largest
range of colors with inks. Now, right now, your computer monitor
where the red part is, is just showing the red lights and where the green part is, it just has the green lights on. But when the yellow light is, it just has the red and
green in equal measures. Similarly, if we print it out these three circles on a piece of paper
using our printer, the bottom right circle would
just use the yellow ink. The bottom-left circle would
just use the magenta ink and the space in-between
would just use the magenta and yellow
in equal measures. The section in the dead
center would use a yellow, magenta and cyan. And that's why we put a black ink cartridge
in our printed to, because it would get
pretty expensive to use all three inks every time we
want to print some black. To understand this further, we need to understand
exactly how light works, and that's what we're going
to talk about in this module. In the next module, you'll understand
why it could be particularly bad
for your designs if you didn't understand what the primary colors were for now, all you need to know is that these other Subtractive
primary colors, and these are the
additive primary colors. And perhaps it's okay that your primary school teacher
taught you the primary colors wrong because who wants to teach a five-year-old the
word magenta, cyan. There are two kinds of
primary colors that are Subtractive primary colors
where you start with a white light and as
it bounces off paint, ink or objects,
they subtract color from the white and you see the
colors that bounce off it. There are additive primary
colors where you start with a black screen and you
add colored light, which is what the person sees. You can create primary colors from some other colors
in some situations, and you can not create all other colors from
these primary colors. The Subtractive primary colors are the ones you put
in your printer, cyan, magenta and yellow. And the additive ones are the ones in your
computer screen, red, green, and blue.
2. Waves: You may recognize this as the album cover from Pink
Floyd's Dark Side of the Moon. But it is also a light prism. Now if you shine a
white light in one end, a whole rainbow of colors
comes out the other end. Also a slightly different angle, we call this refraction. When this was first discovered, people thought it was
to do with impurities in the glass switch
would somehow add colors to the prism. Then Isaac Newton tried something quite
interesting with this. He said, what about if I put a different prism the other
way up just after this? And Isaac Newton
discovered that if you put the second prism in the
exact correct position, it will actually combine
all of the colors back together into one
single white light. Except he didn't
really know why yet. He still actually
thought light was like particles or something. We got a much better
understanding of how light works in around 1801, when a guy called
Thomas Young did a very simple experiment. He had a room, but you could do this with a box if you wanted. And he cut two very simple
slits into a sheet. The rooms completely dark. And when he shined a torch in or he actually used
candlelight at the time. He expected that'd be two
slits of lights at the end, two lines of light. But actually what
happened was that there was a whole
range of lights, different brightnesses
at the back of the room. You can replicate this experiment
quite easily just using a box and a torch and a
couple of cuts in the box. What's he of course discovered, which we all know now is
that light is a wave. The reason why e hat
many lines at the back, even though he cut
two lines in the box, is very similar to how
if you have ripples, some areas of a wave may cancel each other out and
other areas may create a stronger wave
like here where you can see these two
ripples crossing over. Now, what we perceive as
being different colors is simply different lengths of this wave that stimulate
different parts of our eye. We'll look out later. For example, a blue wave is
much shorter than a red wave. And if we go and add in a whole bunch of
different wavelengths, you'll see that
they are basically all the colors of the rainbow, with a violet being very shortwave and red
being very long wave. Of course, most of the waves in a beam of light
are not showing here. There are many, many, many bonds which
are shorter than violet and we call these
ultraviolet waves. And there are many, many, many waves that are
longer than red. And we call these
infrared waves, but these all traveled
together and we just don't notice the
ones we can't see. It's pretty rare that a
single point of our eye will be hit by a single
wavelength at a time. Actually, a lot of
these waves will all be riding together like this. What your eye would see here
is probably pretty close to white if all these
wavelengths were together. When we see a color, we're almost always seeing a range of different
wavelengths. For example, this
shade of pink doesn't actually have a
wavelength itself. It is only when you
have many wavelengths, and the majority are longwave red ones and very
shortwave violet ones, which both sort of combined
to create this pink. If I was how the
light wave works. Why did Isaac Newton's
pyramid splitter white light into all
the different colors? Well, that pure white light that you get from
a light source or the sun is actually all these different
wavelengths combined. They're all coming together. Now let's assume that they
come through a glass window. If we look at just the red and the violet
to start off with, as they hit the glass, they're going to slow down. As they leave the glass, they're going to speed
back up the longwave, the red wave is going to slow down less than
the violet wave. It's going to hit less
particles in the glass. I'm oversimplifying,
but let's say because it's moving
around a lot less, it's making less contact
with glass particles. This doesn't make too much of a difference as it comes
through a glass window because the angle enters the glass and the angle it leaves
are the same. And the fast red light wave will simply just catch
up with some of the slower violet light
waves ahead of it. And you're, I will
still see pink. Forgive the slight crudeness
of this diagram here. But if the lightwaves spurts, you hit an angled
piece of glass, it's going to change
the direction of the lightwaves
ever so slightly. Because it's going
to slow down at the top sooner than it
slows down at the bottom. Imagine if you're in a car
on one side of the car is going faster than
the other, it turns. And because the angle, these two lightwaves
leave the glass is not the same as the
angle they enter. They're never going
to rejoin each other. And this is where this
seemingly trivial tangent may become useful to
you as a UI designer, the purple color is going to refract more
than the red color. We'll talk about this
more in a moment. But hopefully this at least explained how this
pyramid works. Light is a wave and what we perceive as different
colors is actually just different
lengths of waves were almost never seeing a
single wave at a time. The colors that we see are a combination of
different waves. And there are various
things that can happen to a beam of light to add a wavelength or subtract
a wavelength or refract a wavelength independent of the other waves in
that beam of light. As designers, we're trying to make an environment and that looks natural to
people that they feel comfortable looking at. And to do that, we need to understand how
these light works.
3. Trichromatic Process: We know that light is a wave, but how does that
help us in any way? If were out walking
in the middle of a woods and we see this leaf. Why is it green? If I look at this one, very, very tiny spot and
I'll just enlarge it. It is currently
appearing this green. Where does this come from? Well, the actual physical plant absorbs some of the light
waves coming from the sun. If we imagine for a second that the light is under
direct sunlight, it's been hit by all a whole range of
different lightwaves. If we have a chance here with all the different
wavelengths along the x-axis and how much is absorbed by
this leaf along the y-axis, we might get
something like this. That is to say this leaf is
absorbing quite a lot of longwave red lights and a lot of shortwave blue
and purple lights, but the leaf is
not absorbing lots of this mid-range green light. Now if this is the
amount of light It's absorbing of different
wavelengths than the amount it's reflecting of wavelengths will be
the exact opposite. Notice that I'm not saying
it doesn't absorb any of the longwave red light or any of the short-wave
blue and purple light, I'm saying it's
absorbs less of that. If we go back to the
woods in the middle of the night and we
have a red torch, or flashlights as some
of you may call it, and we shine it on
that same leaf, it will appear red because
it's still reflects some red, just less red than green. It will also reflect a range of different reds in
different areas of the leaf because different
bits of the leaf will reflect on absorb
different wavelengths. Now, what happens inside
our eye is even more amazing them what happened
inside that leaf just now, our eye has millions
of receptors that also absorb
and reflect light. They can identify
what the wavelength of the different light
coming into it are. They also have millions
of receptors that identify how much
light is coming in, how intensities, or
we might think of as how light or dark it is. Let us look at those
receptors that can identify the wavelength. We have three different
kinds of cones in our eyes, and they can identify different
wavelengths of light. There's one which identifies
just the shortwave lights, anything in this range here. Then one that identifies
the mid-range light, this kind of range here. And then one that can identify longwave light like this
sort of range hair. Sometimes these are called blue, green, and red receptors. That's not quite true. As you can see, we're not
actually particularly good at identifying
different kinds of reds, but we're really good
at greens and yellows. Because what these cones can identify crosses over
quite a lot in the middle. Now if we look at
that light wave that was bouncing off that leaf, and we decided that what was reflected from the leaf looked
a little bit like this. When we look at this
green in the top-left, our mid-range cones are
almost completely stimulated. They are saying, yes, this is definitely this color range. Long-wave receptors are saying it's kind of this area. Yeah. And our shortwave receptors
are saying, yeah, there's not much of this
shortwave light coming in. Now if there's simply
less lightwaves overall, then we'll just know
that it's darker or more will know
that it's lighter. But what about if
it's kind of the same green but it just
looks more green. The same green, the
same brightness, but it just feels cleaner. What about this green? Well, we'll get into this
more in the next module, but this is just a
more saturated green. It's the same shade of green
is just more saturated. We're seeing it better. We're seeing kind of the
same range of lightwaves when we look at this
new saturated green, but we're seeing a
different distribution. It's purer. If we ever had a completely
flat distribution here, it would appear gray or I would not know what color it is
and it just looks gray. This new green is
very, very clear. The more dominant
one light wave, the less gray it appears, the more saturated the color is. Now let's get back to
our original green. Let's stick with this
for a second and then look at what our eye does next. Well, I simply get some kind of binary data from each of these
three kinds of receptors. Let's oversimplify this
a bit and say maybe the short-wave receptor
says, I'm 20% stimulated. The medium range one says 90%, and the long-range
one says 80 per cent. From this point on, we lose
a lot of the nuance data. We no longer know the shape
of the curve and we don't know the exact amount of different wavelengths
that we're getting. This does mean that I completely
different curve could potentially appear to be
the exact same green. Then there's a fault score. Our eye has some rods
in as well and these just identify how
intense the light is. There's way more
rods than cones. And so we're way
better at identifying how light and dark things are than the exact color of them. So let's say that our
rods simply tell us as a 40% intensity rating
for this bit of light. And that means a 100% would be white and 0% would be black. And we're somewhere
between those two. At this point r, i just
has these four scores, but this isn't what it
sends to the brain. It translates these
a little bit. What our brain receives is
these three calculated values, which is what is the
green to red ratio? What is the blue
to yellow ratio, and what is the
light to dark ratio? Of course, you might wonder
how is there a yellow? It requires some calculation, may be, it adds
the green and red. But remember none of
these three receptors were exactly picking
up one color anyway. In fact, the long-wave receptor mostly picked up
mid-range colors. So all of these
calculations have a bit of room for inaccuracy. And this is where
colorblindness comes in, where one of these isn't
calculated correctly. However, the light to dark
value doesn't require a lot of calculation and had the
most rods in the first place. So this is really,
really accurate. These three new
values are sent to our brain and that's how we
think we're seeing color. Everything in the
world reflects and absorbs different amounts
of different wavelengths. Are, I have some
receptors that can identify which wavelength range different bits of
the lighter in. It then does some calculations and send this to the brain. There's also receptors that just identify how light and
dark the light is, how intense it is. And these are much,
much more accurate.
4. Chromaticity: We know we can create a
pretty wide range of colors, just using red, green,
and blue lights. If you went into a completely
dark room and you Sean, three different
lights onto the wall, red, green, and blue. In the center, you
would get white. That's because white
is what we see when we get the whole
range of lightwaves. And it's a high-intensity because all these lights are on, full power on it. If I turned down
the green light, if I lowered the intensity
of the green light, I would get a light magenta in the middle here
because we would no longer have all the
lightwaves in equal balance. Likewise, if I lowered the blue, we're going to get a light
yellow in the middle. And if I lower the red, we're going to get a
light cyan in the middle. If I lower the intensity of
all three of the lights, we would get a gray
in the middle. Now if we play around with the intensity of
these three lights, we will get an awful
lots of gray and we will get an awful lot of
the same colors. When you open a graphics
program and you tweak the numbers to change
the color of something. You don't want most
of the colors to be gray or most of the
colors to be the same. So back in the 1920s and 1930s, some people did a
series of experiments changing the
intensity of each of these lights individually
and plotting them on a 3D chart based on what
colors people could perceive to identify
where the range of perceivable colors that
you can create with red, green, and blue are, of course, there are three axes, so the results are a 3D shape. And notice the shape
is pretty irregular, our perception
works different at different levels of intensity. And changes to intensity in the three different lights
isn't even perceived the same. We could now convert
this child's into some kind of 3D coordinates that are graphics programs
and our websites could remember to
reference colors. But only a small range
of the spaces in this chart are perceivable
and unique colors. Luckily, we noticed that if you look at it at the right angle, you can flatten the whole thing down and get all of the colors. People tried to split
this up in various ways. But generally we noticed
that it's still not super useful because if
we use these coordinates, again, most of the
colors are repeated. For example, if I took the coordinates for
this spots here, I would get the exact
same color that I got for this spot here. What most computer software
tended to do was to simply take a regular
shape from hair. This does mean that
we are missing out on a whole bunch of unique
and perceivable colors. But there's plenty
of options in here. Remember, you can't
actually creates all colors from red,
green, and blue. You can just create a lot of colors from red,
green, and blue. A problem arose here though, because different software
and different companies started using different sections of the colors and referencing the coordinates
in different ways. For example, if you've
ever printed design, you'll know it's a
little bit tricky. You'll set your
graphics program to use CMYK colors, cyan, magenta, and yellow
because we know that those are the primary
colors for print. But yet when you
print the document, it still doesn't
look like it did on your screen because
it was represented on your screen using lights and it was represented on
the paper using ink. But also because the
section of colors that CMYK uses isn't even the same section of colors that our website uses. There are some colors
that literally just don't exist on paper, that do exist on your
screen and vice-versa. Luckily, though, websites all use the same colored standard, and it's called S, RGB
standard, red, green, blue. This triangle is roughly the colors that can be
shown on a website. Let's say I wanted to show
this orange on a website, I would get three coordinates
from the three corners. And those coordinates
are between 0255. This orange is comfortably
in the red corner, so it's 255 red, it's a long way from
the blue corner, so it's only 80 blue. And it's a bit closer
to the green corner, so it's around a 150 green. I can now use these three
numbers in any website or any graphics program
and recreate this exact same orange
that I want to display. Now because we created that 3D perception charter
earlier and then flattened it. We're not incrementing the
intensity of the light in equal increments
when we go from 78 to 79 and from 79 to 80, because 255 isn't even
that bigger number. When we go from 79 to 80, we're actually jumping over quite a few colors that
we're not even using. But we can create well over
16 million colors using sRGB. Srgb is now the standard way of referencing colors using red, green, and blue light. And it gives you access
to 16 million colors. It uses three
coordinates for red, green, and blue between 0255, each increment in these
coordinates does not uniformly increase the
intensity of light, but instead is incremented based on human perception using that original 3D chart that was created back in the 1930's.
5. How Color Works Summary: Light is a wave. And when the length
of that wave changes, we perceive it as
a different color. We very rarely see a
light wave on its own. It's normally mixed
with other wavelengths, which is how we can
see a color like purple that doesn't have
a wavelength of its own. It's a mixture of very
long and very short waves. If we have a mix of lots of lightwaves with no dominant
wave, we see great. When there is more
lightwaves together, it appears closer to white. And when there is less, it
appears closer to black. We'll talk about the
specific names for these in the next section. When the lightwaves
hits our eye, they stimulate the rods to different amounts depending
on how many waves there are. They stimulate three
kinds of codes to different degrees depending
on how long the waves up. We interpret this
as seeing color. Different objects
in the world appear one color because they absorb certain lightwaves and
they reflect others while things on your
screen appear one color, it's because the red, green, and blue LEDs show at different intensities to create something that looks
like that color. They add the lightwaves. We call this additive. While the absorbing of
lightwaves we call subtractive.
6. Values: When you think back to art
class, when you were younger, when you first learn to draw, you probably learned
how to draw. Okay. In black and white, if
you're anything like me, you probably couldn't draw quite as well as these
pictures on the screen. But at least it made
intuitive sense to you. When they area is darker, you push the pencil harder
and you get a darker color. When the area is lighter, you don't put the pencil on it at all and you leave it white. What you're dealing with
here is called value. It's how dark or
light the area is. And I see my, its
complete intuitive sense. And if it's wrong, it really
messes with our head. We can spot when value
is wrong very quickly, as you will see very shortly. The problem we had with art
class when we were younger. When we start to try and make
these drawings be in color. If you're anything like me, the thoughts of trying
to create the picture on the right is just dawn
sink and terrifying. I could never draw something
that looks that good. And that's because
back in art class, just like many of you, when I started
thinking about colors, I stopped thinking so
much about the value, like the picture on the
left where I'm thinking about the darkness
and the lightness. And I started thinking much more about something called hue. You can think of hue as the colors that you
have a name for. You could look at this
picture and say this is pink, this is blue, this is white. Although we looked
at this picture much closer and we realize
there's many, many different skin tones and dark browns and light whites
all throughout the face. The values vary massively, even if the hue doesn't so much. In fact, I'm going to
argue that the hue doesn't matter at all when you're
creating a color painting. What you can see on
the screen right here is a section of a
color wheel showing the orange and red and green and blue and all the colors
that you have a name for. The ones that I'm gonna suggest in your early art classes, you were thinking about
a little bit too much. Now, the values on
the other hand, this part that goes across the
wheel from black to white, how dark or light the color is. The tones, if you like, is far, far more important. If you were to go
back to art class and try and paint a
realistic painting. And that's why most
of us never really get past drawing in
black and white. We take out a set of
paints and we start thinking too much about
the hue of each paint. We start thinking too much about the names red, blue, green, and not enough about
how we need to mix them with black and white to
get the different values. The only time an
artist thinks about hue is to make something
more interesting, to add some emotion
to a picture. You could paint a
human face just using blue paints and it can still
look totally realistic. It can look physically possible. One of the reasons for
that is realistically you've seen a blue human
face at some point. You've seen someone in a room where most of the
light bulbs were blue, and so therefore the light reflecting off their
face was blue. And so their face just
appeared to be in a blue hue. But all the values
of their face, how lights and
dark each area was relative to the other
areas never changed. Lights and dark always
mean the same thing, but the hue can
drastically change depending on what
else is in the room. And as your later learn just simply what color is next to it. The problem is when we
start thinking about hue, we stop thinking about value. If you ever went back to art
class, remember that one? Take out a single paint
and try and mixing it with white and
mixing it with black. These are called tones. If you add more white to it, you would call it a tint. And if you add more black to it, you would call it a
shade of that hue. The hue is what you
normally think of when you traditionally
think of what color is it? Green, blue, red, yellow, etc. Although this is important, the value is far more important for making our design
look physically possible, which will make our
users feel more comfortable that they're
looking at a real thing. Value is how light or
dark the color is. We sometimes call
this brightness. But for the sake of this
course and working with color, we're going to call it value. You can take any hue
you're working with an add white to it to make a
tint of that color. Or you could add black to it to create a shade of that color. And for your homework, for your first task, I want you to try creating
a design or drawing an illustration where you limit the number
of hues you use, but you drastically
changed the values. This will force
you to think about the value of the colors
of your choosing. You could open up a design
program if you have one, or you could take out
some colored pencils and just limit it to maybe three hues
at first and see if you can create a realistic
looking illustration, just changing the values.
7. Values Exercises: The first thing we
would want to learn to do when learning to work with color is learning to identify and work with
different values. On the screen right now
are 11 different colors, but all 11 colors are
the exact same hue. They just have different values. They are lighter or
darker in the same hue. See if you can
identify the order. Look at these 11 colors now, note they all have a
letter on them and then rearrange the letters to
go from white to black. So pause the video, take a look, and
then play again. And I will show you the answers. Here are the answers. How did you do? My guess is you probably
did quite well. It's relatively intuitive to
spot the different values between different colors when they are the exact same hue, which is why we were
so good at doing black and white
drawings with a pencil, but not so good when we
started adding paint. You may also notice when
I put all these colors next to whichever that
they do affect each other, we're going to talk about
that a little later. They start looking
almost like gradients. And actually the white
looks like a slight gray. And that's purely
because of how it's affected by the
colors next to it. We'll cover this in
another video very soon. But now I want to
up the challenge. I'm going to shuffle these
values around again, but this time I'm going
to bring the hues back and they're all going
to be different hues. Have another go at sorting
them into order of value, how much white or black they have and see how you
get on this time. So pause the video and play it back and I will show you
the answers in a second. How did you get on this time? My guess is that even if
you got as many correct. As you got last time, you probably still spent
more time looking at it, trying to make sure
that they were cracked. And yet they are still
the exact same values in the exact same order as we
had with the last exercise. This exercise can be
really useful to help train your eyes to
spot values better. That's gonna be one of
the most important things with learning about color. For those reasons, I've created a PDF which you can
click through over this exact same exercise
a few more times rather than me going over it again and again on this video, you can download that
from the resources. And just to finish
up this video, I want to show you how this list of 11 colors in different hues. It looks pretty dark hair, it looks like the values
overall are quite high. But once I put them
in value order, they look quite low. It's suddenly looks
quite light on the page. The values of these colors appear different just
because of the order. Trying to identify
the value order of different colors is a
really, really useful exercise. It's gonna help training
our eyes to spot this subtle
differences in values which are gonna make all the
difference in your design. So in this very short video, we had a go at doing just that. And now I want you to
download the PDF from the resources and
have a go at doing the exact same thing
a few more times.
8. Brightness: I hope you managed
to order a few of those values from
the last exercise, but you probably
got a few wrong. It's a very difficult exercise. Normally to make it a little
bit easier for users, even artists and even
photography will actually draw the values out to
the far ends and make the mid tones either
darker or lighter. If you take a photograph, especially if you leave your camera on the
default settings, it will likely make the slightly dark colors
even darker and the slightly light
colors even lighter and create extra
contrast in the photo. Our cameras do this
partially just because it's a recent trend and we like the way that high
contrast photos look. But it also feels
good to us because we can interpret and
understand the image faster. It also means that our eyes
have been sort of trained on unnatural value in images and we probably want to
carry on that. Trend. Uses are used to seeing
things with high contrast. By now you've probably been
wondering why I keep using the word value when the word brightness makes much more sense in
this situation, we're talking about how
bright the color is, right? Well, maybe, but unfortunately brightness when we're
talking about color, it can often mean something
a bit more perceptual. How perceptually bright
it appears to be to us. That's why that last activity I gave you is actually
a little bit cruel. You're very used
to being able to spot if something's
brighter or not, but not so much if it has
a higher or lower value. To help explain, I've created
a very simple charts here. Along the x-axis,
the huge changes and along the y-axis,
the value changes. You'll probably notice
just by looking at this, that there's three clear stripes down at three bright stripes where it appears to have a higher value as you go
across from left to right, despite the fact that I'm quite clearly saying it doesn't. And those three colors are
cyan, magenta, and yellow. There's a certain importance to those colors that we'll
talk about later. You may have already
noticed that there are the three colors you
put in your printer. But for now, let's just take these three colors
and add back in the three colors that fit perfectly in the middle in
between the spaces of them, which is red, green, and blue, and plot them on
this graph if it was for brightness instead
of four value. Now, I've slightly exaggerated this for the sake of this chart, but you can see that these six colors which all
have the exact same value, have quite different
brightnesses. Now remember what that
means is that they have the same amount of white or
black added to the basic hue, but they appear different
levels of brightness to us, our perception is different. If I add all the
different brightnesses of these who's back in, you'll notice a few things. First of all, we have
three significant peaks, yellow, cyan and magenta, and three troughs,
red, green, and blue. But you'll also
notice it doesn't make a handy square anymore. And that's why you don't see
this in a graphics program. We'll talk about this
more in a little bit, but you can't create
a numeric system to reference colors
in this new chart because you might get a spot
where there isn't a color if we repeat the exercise
from the last video, but this time we look at
a series of colors and try and order them based
on perceived brightness. And let's be fair,
you can't possibly get this wrong because
it's perception about the way we quantify brightness is
based on a series of experiments using
hundreds of people at assessing how bright
something appears to them. If you'd like to try and arrange these in order of
perceived brightness, give it a go, try writing
down the letters now. But you should find this far
easier because there aren't any dark yellows and there
aren't any bright blues. Here are the answers coming up. Now. Now if you did have any
trouble with these at all, it was realistically
probably because of the colors in the middle. The difference in perceived
brightness between each of these and each of their
neighbors is exactly the same. But we're still going
to find the areas in the middle a little bit
harder to identify. And this could
partially be because artists and even your
camera settings, we'll try and avoid
showing these mid grounds. These are the sort of colors that perhaps would be avoided. When we talk about the
brightness of the color, it's not quite the
same thing as value, it's adjusted for perception. Cyan, magenta and yellow
naturally appear brighter to us, and red, green, and blue
naturally appear darker to us. When we choose colors using a graphics program or even CSS, we cannot choose them
based on brightness, mainly because it's
much harder to create a system to
choose colors this way. We'll talk about this
much more later. But that does mean that using our graphics
programs or CSS, we can quite easily choose colors that are just
going to look bad. For example, a dark yellow is not going to look
particularly nice, or even just anything in the middle of the
brightness range, which might not give us that high contrast look
that we've all learned to love and may also
make our design a bit more confusing
and hard to perceive.
9. Brightness Examples: Here is a range of reds. Now they're all the
exact same hue, but they aren't
different values. If I use a special color picker for choosing reds of
different brightnesses, it gives me much less choice. There's literally these three
slight variations, Really. That's I can assume is because people just simply
do not perceive the color in the top
left and the color and the top right is even
really been the same color. But one thing we can definitely tell is that the color and the very top left and the
color on the very top right just don't look
particularly nice. We probably don't want
to be using them. Earlier I said, you can't really make a dark yellow edges. It doesn't look nice. Well, what you
would want to do in that situation is make
a slightly brown, yellow, and then
it can look nice. What I can do with this range of reds is the ones
with lower value, I can add a bit of blue hue. And the ones with
a higher value, I can add a little
bit of a yellow hue. This means that not only
is the value the same, but it actually looks
a little bit more and less bright at the extremes. And we end up with some colors that don't just
look a bit nicer, but are a little bit more
comfortable to perceive. Whenever you create a Color
Range with the same hue, it's going to look pretty
bad at the extremes. With the high-value colors. You're going to want
to mix a little bit of a very bright hue in there. And with the low value colors, you're going to want to
do the opposite and put a less bright hue mixed
in with that color. Let's say I'm designing this simple toggle switch
for a web application. I want my toggle switch
to look 3D so that people know instantly that it's something that
they can interact with. I'm going to add a
little shadow inside so it shows that this gray
area is indented and a little bit of lights on the little red circle thing that you can see that
it's sticking out a bit. I'm basically imagining there's a light source at the
top left of the screen. These are the additional
colors I've used. I've used a higher value
version of the red and a lower value version
of the bluish gray. Now, when we talk
about how light works, you'll realize that this
doesn't look natural. That's not how light naturally
bounces around at all. But you can definitely agree it doesn't look natural and it probably doesn't look that
good for a couple of reasons. One, the red now just has
some more white in it. In a way it kind of
looks like when you're printers running out of ink. Now the lowest value thing
on the page is a shadow creating a lot of contrast in a place where I
really don't want it. I can get around both
of these problems by adjusting the hue a little. The red is now a little
bit higher value read, but it has some
yellow mixed then, and the gray is now a little
bit of a lower value gray, but it actually has
some blue mixed in. I now have something
with a bit of a 3D look, so I know I can
interact with it, but it actually looks
a little bit more natural and easier to perceive. I'm going to start working on a homepage for a website that's
I'm never going to build. Here's a very, very
basic stats and let's see if we can
make some improvements. Well, this bright orange for this starter course and
the sign-up button, they're the same color as these, 1234 at the bottom. They've got the same brightness. And I would like
these numbers to have a lower brightness so that
they jump out slightly less. I'm going to lower
the brightness by not just adding
some black in color, but also making them a
slightly more brownie orange. Now the buttons are still not quite the most important
thing on the page. I think the heading text is probably overwhelming
them a little bit. I'm just going to
actually reduce the whites of the heading texts. The purple color is not
particularly bright, but just the sheer size of the letters combined
with the brightnesses, given them a bit too
much importance on the page to make my buttons really stand out
and to make it so people instantly know
they can click on them. I'm going to add
a little shadow, but as we did earlier, I'm going to put a bit
of blue in the shadow, so it's not really
overwhelming on the page. And I'm going to
add a little bit of yellow in the highlights. Now that's great. My buttons are
really standing out. Now there's one thing I just can't stand about
this design though. It's got a kind of gray in the background behind this
character on the right. There's like a gray blob and
I'm really don't want to large area of gray
and just looks dull. What I could do is make a much brighter color so that it's not
super overwhelming, but it just gives a bit of
color to the back of the page. If we just double-check
our brightness chart, we can see that cyan is
a pretty bright color, only second to yellow. Now, we're using
yellow as highlights, so we're not really
going to use it as a background color. Let's put a bit of very light cyan in the
background here instead. Finally, I'm just going to use my eye really quickly now that everything's a
different color to realign things a
tiny little bit. I've now got a design which
I'm not super happy with. We're gonna make
some improvements in the next few videos. But right now I think it's far, far better than the
original design. I haven't changed the layout. I haven't changed any content. I haven't changed the typefaces, and I've only really tweaked to the colors of very,
very small amount. At the start of this video, you saw me create
a red color range where for the darker reds, I put in a small amount of blue. And for the lighter reds, I put in a small
amount of yellow, pick a different color, maybe green, and try
and do the same thing. See if you can create a
color range that looks a little bit more
natural and nice by simply adding in a slightly
brighter color into the lighter greens and adding in a slightly darker color
into the darker greens. If you have a previous
design you've worked on, pick that up now or pick one
of the ones you've done from a previous video
and give it a go with the actual colors
in a design as well. Especially looking
for elements that are either black, white, or gray. Try and mix a little bit of some other HEW in
with these colors.
10. Color Matching: Let's assume I've logged into my web application now and for some reason it's an
expenses dashboard, but maybe it looks a
little bit like this. Now I want to try and make
this look a bit more uniform. Try and improve the
design in here. One thing an artist
might do when painting a portrait is perhaps
just use cold colors. The idea here is every
color on the page. I've just added a
slight blue tint to it. I've just mixed a bit of blue hue into each
of these colors. Or alternatively,
I might just add a hot tent to everything. Well, I just mix a little bit of orange into everything
and it makes the whole thing look uniform is certainly doesn't make buttons
or anything stand out, but it makes the
colors feel like they perhaps belong to
the same palette. The reason this could look particularly good
if we were painting a composition is that you
very rarely just have white light in an area unless you're outside
and direct sunlight. But even then at specific
times of the day, you don't just have white
light as your source. These mountains in this
picture aren't actually blue. It's just the sun is
lower in the sky, is passing through
more atmosphere. And we know that blue comes from shorter wavelength lights and shorter wavelength light
will be displaced more. And so therefore there'll
be more blue light bouncing around. The area around to the sun appears more red simply because the red light waves are
longer and so they will diffuse less and then more likely to come
straight towards you. Now if you are looking
in the other direction, depending on whether you were in the direct sunlight or not, the things you were looking
at would either appear more bluish overall or
more reddish overall. Painters may talk about giving a painting a warmer hue over all, or a colder hue overall, because it's going to unify things and still make
them look natural. As we said, it's perfectly
natural to paint a blue face because
at some point you've just seen a face in just
blue lighting and that's what they looked like with the two compositions
I just showed you. I mentioned that it doesn't really make anything stand out. If everything had a bluish tint, it doesn't make our
orange buttons stand out. So this perhaps isn't
a useful technique. But let's look at another
picture of some mountains. If we look at this
mountain range here, you might notice the mountains
on the right appear more blue and the ones on the left appear a bit more
red and yellow. They're the same mountain range. The lights off the mountains on the right is simply
passing through more air with more displaced lights
bouncing around already. This presents an interesting
point to us as designers. This image has quite
a range of colors. It's got all the lights
we might possibly want. And yet things that are
shorter wavelength, like purple, blue, and cyan, simply appear further away. Colors like red and orange
have potentially traveled through less air and
therefore are closer to us. And here's a handy diagram with all the colors in
wavelength order, with the shorter
wavelength on the left and the longer
wavelength on the right. To make something
appear further away, we can simply make
it more purple or blue to make it appear closer, we could make it red or orange. Referring to these colors as cold colors are warm
colors is a bit in cracked and the whole concept of warm and cold colors has
been quite heavily debunked. But the idea that longer wave colors appear
closer to you is very real. If we look back at our simple design I
was creating again, it probably makes more sense
to use those blue tints in the background colors and use those red tints in the
foreground colors. If I show you this same design
with a gray background, gray is simply very
impure lights. It will just appear
somewhere in the middle. But if I make it a bit cyan, similar to that picture of
those mountains from earlier. It perhaps makes that
background looked like it's pushed
back a little bit without using any shadows or highlights or anything
just flat color, I can add a sense of
depth to my design. And likewise with my
bright orange buttons, because they're already orange, they feel a bit pulled
out from the page. It just feels closer to us. And maybe these buttons don't actually need a
drop shadow at all. As long as they're a
longwave light color. A common mistake I see people making that I
can demonstrate with these three buttons here is this one that says active
on the far left. As we talked about before, it perhaps feels
a bit pulled out towards us because
of the orange color. With the second button
on the other hand, it's worth remembering
that color is relative to the
colors around it. Just like we said, that if you added a blue
tint to everything, our brain would kind of normalize
the colors a little bit by having the bright orange
saying the word inactive. But then a slightly
orange background will actually push the
slightly orange background further back because of
the contrast between the bright orange texts and
the light orange background, brain normalizes, assuming there's just more
orange light knocking around. This second button, therefore, feels almost a
little bit indented. But on another level it feels a little disorientating because that light oranges then
on top of the gray. This second button
simply doesn't feel like part of a
natural composition. And the final button,
the gray one, kind of just feels
a bit like it's not sticking in or sticking out. It doesn't have any depth to it. Maybe my inactive
button is gray, but it has a tiny bit
of orange in that gray. In our last video, we
added a bit of blue into the shadow and a little
bit of yellow into the highlights of
one of our buttons. These were pretty
convenient color choices because obviously
blue is colder and is therefore going to
feel a little bit further away and perhaps adds even more depth than a drop shadow or a
highlight normally would. For these reasons, we can
probably lower the intensity of those shadows and those
highlights a little bit and still get that
3D sense so people easily identify it as a button
spots it and click on it. This means we can get away with a slightly less
intense drop shadow, but we might want to avoid using the same drop shadow intensity on buttons of different colors. The color of our
inactive button here suggests it's further away a little bit indented
even perhaps, whereas the drop shadow suggests
it's the same distance. And this is a little
bit disorientating. If we ever look at a landscape
under perfect white light, the things further
away from us will appear to have more blue in them and the things
closer to us will appear to have more red in them. This is simply because the shorter wave of blue
light is displaced more. We can use this to
our advantage when creating a UI
because we can give something an element
of depth and 3D without using any
drop shadows at all, if we like, we can simply use colors to make things look
different distances from us. So we can make things appear
like they stick out from the page a little bit simply by using a red or orange color. And we can make
something feel more like a background simply by
using a blue or purple.
11. Saturation: So far we've talked about three different
attributes of color, the hue, the name, it might have blue,
green, yellow, cyan, magenta, or read the value how much white or black is
mixed in with that color. And we've talked
about the brightness which is perceptual. Yellow, cyan, and magenta feel brighter than
red, blue, and green. There is one other attributes that you've probably
noticed from your graphics programs
when you're picking a color that is saturation. If you look at the picture now, I am slowly desaturating these
colors that the same hue, that the same value. But I'm lowering the saturation. If we instead pick a single hue, Let's pick a red and we look
at it with a chart with value versus saturation
on the x and y-axis, we might see
something like this. We can think of the word saturation has been a little
bit like the word purity. These five colors here
have the exact same hue. They've got the exact
same value as in the same amount of black
and white in them, but they're still quite
different colors. And that's because of
how pure the lighters, the red at the top in
the middle is a very, very pure form of light. Most of the wavelengths in
here are a similar length that would show if rand with very few variations
in the wavelength, whereas the gray
at the bottom has almost an equal mix of all the different wavelengths that are perceivable
by your eye. Your eye interprets it as gray, which you could also
sort of think of gray as your eye can't quite figure
out what color it is. From what I've said so
far in this course, you might be forgiven
for thinking that I want you to avoid grays. I don't I want you to
use lots of grays. Probably a lot more than
you're currently using. In fact, too much
very saturated color is kind of hard
work for your eye. And we can use saturation
as a form of contrast. Let's for a moment just look at a few different paintings
from the art world. Again, this painting here has very, very desaturated colors. And yet none of these colors
are completely desaturated. You can clearly see the
blues and greens and reds in this color palette without any saturated
colors here at all, these actually looks
kind of colorful, but when we look at
the pallet on its own, looks almost like
just a load of grays. However, this color
palette would obviously be of limited use to us as a user interface designer because nothing stands out. There's nothing bold that says Click on me or look at this. This doesn't help us build a visual hierarchy
in our compositions. Maybe a color palettes more
like this one would be more useful at where
all of the colors are really, really saturated. Everything is very dominant. And we know that there's
this bright orange that we probably would want
to click on or look at. And everything's competing
for our attention. Problem here is that when
everything looks saturated, they sort of wash each
other out a little bit simply by being next
to a saturated color, a color just appears
less saturated. And of course not everything
can grab our attention. We only want certain
elements to stand out. A big problem I see beginner designers make is the same problem that we made in all old art classes
where we just think about the hue differences
between colors. Really, we would never use
a color palette to design a UI where all of the colors
are really saturated. If anything, for
user-interface design, this color palette is actually
worse than the last one. We would probably want
to use a color palette more similar to this
one from this painting, where most of the
colors are quite desaturated with the
occasional bright red in that. Realistically even this painting wouldn't be great for our UI. We'd want this red to
be even more saturated, but it wasn't easy
trying to find a painting with a
similar color palette to what we might use in UI. If you find a color picker online or in a
graphics application, or if you search the internet
for nice color palettes, you'll get something
that looks a little bit like this on the screen. Five incredibly
saturated colors. The hues might
contrast quite nicely. They might have all
been set up that way, but probably they're
all a bit too saturated to be useful
for you as a UI designer. When I first started designing,
Like many designers, I would grab a color
palette like this and apply these colors as they
are to my designs. And they would naturally look like that Matisse
painting from earlier. Everything's far
too saturated and therefore they're
washing each other out and nothing stands out. And it can be a bit
hard work to look at and identify what
everything is on the screen. Let's say I found
this color palette online with these five colors. Now this could be good
for some purposes. It's not going to be
useful for my UI design. I'm going to need to desaturate at least
half of the colors. Now this doesn't look great, these five colors
next to each other, but they're going to
look a lot better when I apply them to a design. Saturation is not
the same as value. It's not how light
or dark it is, it is how pure it is it is
how grey or colorful it is. When we first pick colors for
our user interface designs, it can be tempting to pick
far too saturated colors. These not only wash
each other out, they're not
particularly practical for building a visual hierarchy. The ideal color palettes that we would choose for
design is going to have a lot more desaturated
colors than we first expect. And the only way to
prove that is by putting the colors in a design
and seeing how they look. Let's do that next.
12. Saturation Examples: Here is a simple dashboard
that I've created. Now, I would say some
of the colors in here are a bit too saturated, not as bad as some
things I've created and definitely not something
I've seen before. But there's some
colors which just don't need to be this saturated. Before we get into that, I might point out that each of the sections on this design, I've got a thick black outline which is quite overwhelming, distracting, probably
a bit too much contrast in places
where we don't need it. I have, of course Don this
because I didn't have access to many
desaturated colors. If I had a desaturated
color in the background, I would no longer needs the black lines.
Something like this. Gray instantly
looks a lot better. I can remove those black
lines and it's still clearly separates the different
areas in my page. Now rather than using
a complete gray, I can use a very saturated blue. We know that's going to make
it feel a bit further away. And it's going to
make our whole design feel a bit less gray, which isn't always
super nice to have. In hindsight, I might have not desaturated this background
color quite enough, but you can see how
that's probably a bit nicer than that
gray we had before. Let's see if we can desaturate some more things because
right now I have some weird lozenge things here that probably look
more like buttons. They're a bit too in your face. Over here I have some
numbers which are pretty, pretty much just states that we want to
keep on the screen. So the user doesn't forget how many emails they have on
Open and things like that. We have some various charts and other bits of information
which are in very, very saturated colors right now, but they don't
actually need to be. You can see all of
these areas on our less saturated or these icons, lozenges and different pieces
of information on the page, we can just desaturate
those quite a lot. Now currently all of my text is the same value and
same saturation. I could desaturate and lower the value quite a bit
of some of this text. And it's going to help create that hierarchy a little
bit on the page as well. Maybe some of this branded purple color I'm
using for headings, maybe that's a bit
too saturated too. Let's lower that. It looks almost like a black color now,
but it's just a very, very desaturated version
of that original purple. You can see that this design
is still looks colorful. It's still has a certain
amount of depth to it. Things feel close to us
or far away from us. It almost feels 3D, but everything's a lot less
saturated now it's easier on the eye and it's
easier for us to make certain things
stand out more. This means that
if we really want to draw attention
to something and say this is the first thing
we think you should look at. We can make that color
really saturated, like our call to
action buttons or this bright yellow I've
just put here. And maybe I've gone too
far with this yellow too. But it explains my point that now we can make this
really stand out. So it's the first thing people look at if that's what we want, we only have this
option available to us by desaturating
everything else. Now we can use a bit
of extra color to add some additional depth to wear or draw more attention
to certain things, or just to make it
a bit more stylish, maybe I want to make it
obvious that something's 3D. I can now add a bit of
color into a drop shadow. I could section this by having a bit of color
in the background. I could make these charts here have interesting
gradient color in them. These are options I now
have available because I have a bit of spare color I
can use throughout the site, which I couldn't have done on the original designs
because all the colors we're all ready to saturated
it already looked in March. If we look at the
actual color palettes of some of the colors
I've added and used. As I've changed this design, you can see that they're
really desaturated. In fact, if we look at them out of the context
of the design, will look at them on their
own, on the side here, they actually look
far too desaturated. They look like they're
not going to work at all well in the design. And that's why we
always want to be using our colors in the context of a design to see
how they look. We might never approve the color palettes on the rights or as part of our color palette. But we'd probably approve
the design on the left, which looks a lot better
when we see them in context. As an exercise. Now I would like you to take
something you've already designed or go and find an existing design
online somewhere. And try and D saturate
some of the colors, but try and avoid making
anything completely gray. See if you can get the
design to still look good. Whilst there's only one or
two very saturated colors. And many, many desaturated,
almost gray colors.
13. Contrast: Let's assume we have a onboarding screen
for our mobile app, maybe something that looks
a little bit like this. The first thing you might
think is actually this texts little bit hard to read. And obviously one of the things that would make
texts hard to read is if there's not a lot of
contrasts between the color of the text and
the background color. We could of course, remove this background color and then there will
be more contrast. The background is white now so that the text stands out more. We can read it easier. The paragraph texts, we
could just make that darker. And then there's more
contrast here too. But we don't just create
contrast with lights and dark. We can create a hue contrast. Now blue and yellow are
contrasting colors. So I could have a
yellow background with blue tax or a blue
background with yellow text. And this will make it
stand out even more. It means I can have a slightly more
interesting color palette whilst still making
my text easy to read and the whole thing
quite easy to perceive and for us be able to spot the difference between
different areas. Now of course, we have
a problem where all of the colors are
overly saturated, so they're going
to wash each other out a little bit and
it's going to be quite hard work
for our eyes with all this saturated
color coming at us. Luckily, we have one other
kind of color contrast, which is saturation contrast. So I could D saturate the
background and then have very saturated text and it would look
something like this. Now if I just show you the saturated and the desaturated
backgrounds here, you can see that one of them
is a lot easier on the eye, and I would argue is probably
a bit easier to read too. These three different attributes that are color has value, hue and saturation can all
be used to create contrast. But why is contrast
so important to us? We know it's going to
make our sophomore visually interesting to look at. We know it's going
to make it easier to perceive where text is
and stuff like that. But actually it's valuable to us for an entirely
different reason to. This is the Union Jack,
the British flag. And if you stare at this spot in the middle for 30 seconds, I'll just leave it on the
screen whilst I speak. Just keep your eyes
on that black dot. At some point you've
probably done this visual trick before, but let's do it anyway. Keep your eyes on
the black spots. And then boom, what
just happened? Well, after I removed the
flag from the screen, you probably saw this
flag for 2.5th maybe because all the
cones in your eyes got so used to looking at
the colors that were there. They were tired of looking at
those colors and they were more susceptible
to these colors. They were tired of looking at the yellow light so that when
they got all of the lights, which they're guessing
when they see white, they're just seeing the blue. Remember white has all
the colored lights in it. And the bit that was looking
at the yellow is now tired. So it's more likely that
your eye will see blue. Think of it like if you
took your body to the gym and you did a load of exercise that involved using your arms. Your arms would be tired. It probably makes
more sense to do a running exercise next
is gonna be less painful, but you'd also going to
be better at doing it. Likewise, if your eyes have just been looking
at a lot of yellow, it makes more sense to
look at some blue next. Not only is it going to
be more comfortable, you're going to be
better at perceiving it. If I split the design
down the screen now, half of your eye is
doing leg exercises and the other half is
doing arm exercises. And because your eye doesn't
stay particularly still, it jumps around a little bit. Your different bits of your eye are switching between the two, therefore not getting too
stressed from one or the other. The exact contrasting
colors of the three on the left is the three colors
currently on the right. If we wanted to make the British flag incredibly
comfortable to look at, we might actually just
make it like this. Now I've seen people actually
draw it like this before. Or alternatively
to make sure I'm upsetting all the people
in the UK equally. We could also make
it look like this. One thing you'll
probably notice with both of these new
flag designs I've created is laid
down actually look a million miles away
from what does exist. In fact, this flag
here just looks like the red parts being
in the sun a bit too long. We'll create more visual
interests by not having the colors exactly
contrast with each other. Because, mainly because
most other designers have at some point in history
just don't exactly that. It's kind of lazy. But of course in
the world of flags, probably the reason that
this isn't the flag is just all the colors wanted to have an equal amount
of importance. And so therefore the color in the middle should be
much more saturated. We know that people
naturally like looking at contrasting colors because they always take photos of this. Everyone on the beach will currently have their camera out snapping away at
this exact scene. We already know
because of the way that light refracts
that it's giving us the shortwave lights around the sides and the
long-wave lights in the middle of
the picture here. And it's perfectly splitting out the contrasting colors for us. This makes it quite
nice for our eye. It makes it visually
interesting and it makes it objectively beautiful. We can easily spot which colors contrast
because they should be directly opposite each
other on a color wheel. As I may have already mentioned, these color wheels
are almost always. Wrong. If you just go to Google Images and
put him color wheel, you'll get one that looks a bit like the one on the screen, which is completely incorrect. We can see here that
the yellow we put in our printers and
the blue lights that we have in our screen that we know our exact
contrasting colors are not opposite each
other on this color wheel. Instead, yellow is opposite
this maroon color. If you ever want to
check for sure whether two colors perfectly
contrast each other, you can overlay them and
you should always get gray, because we know that
gray is when there's a perfect mix of all
different colors. If I overlay the
yellow and the blue, I get eight, the perfect gray. There's no color in this gray at all, completely contrasting. If I overlay the two colors that are opposite each other
in this color wheel, the yellow and the purple, I get this kind of color. I can do the same
effect if I create a gradient between two colors. If they exactly
contrast each other, the color in the middle of the gradient will
always be gray. Why are there so many incorrect color
wheels in the world? Well, one of the reasons is
because some people have an incorrect idea of what
the primary colors are. Remember, some people haven't
learned anything about color since they were five
years old and they think red, yellow, and blue are the
primary colors for paint. By forcing these three colors to be equidistant around a circle, they incorrectly
creating a color wheel. We of course know that the
primary colors are cyan, magenta, and yellow
because we've all seen the inside
of a printer before. If you make cyan, magenta and yellow equidistant
around the color wheel, you end up with this. And you'll notice that
of course, red, blue, and green are also equidistance
around this color wheel. And of course, our color wheel has those two
contrasting colors, yellow and blue,
opposite each other. Contrast makes it
easier for us to identify things on the page. It makes it easy for text or icons to stand out
from their background. It makes it clear that a different section of the page is different
to the last one. And it just makes it visually more interesting to
look at the design. But it also makes it objectively more beautiful
because it allows the cones and rods
and our eyes to be stimulated and then to rest as they look
around the design, we can create contrast between two colors by having
one very saturated and one very desaturated
by one having a very high value as in
having a lot of white in it, and one being a
very lower value, having a lot of black in it. And we can create contrast
using different hues. We can find hues that
contrast because they are opposite each other
on a color wheel, a lot of design
software will have a color wheel in there
somewhere in the color picker. But be very careful with these color wheels
because a lot of them are not
particularly accurate. You should have the yellow and blue directly
opposite each other. That's the kind of
ikea yellow and the IK Blue should be
direct opposites.
14. Contrast Examples: Here is a designer created
on an earlier video. And I feel, as I scroll down the page, It's a bit monotonous. All the background is white, so maybe we should just add a background into
this header section. Let's make it purple. I instantly looks a lot better. All this contrast between the header section and
the lowest sections now tells us straightaway that this top bit is
something different. But we might want to
switch around a few of the colors in here as well. See right now I have a big orange button
saying start a course. But personally I feel like this yellow color is
jumping out at me first. That's grabbing the
most attention. Well, let's look at these
three colors separately, the purple, the orange,
and the yellow. And let's also completely saturate them so that
what we're looking at is the actual hue and
we're not looking at various different
levels of saturation. Now, we can see where all of
them are on a color wheel. So this is where those
three colors are. A few things to know. Obviously, there's more
contrast between the yellow and the purple than there is between the orange
and the purple. So the yellow hue will naturally stand out
more than the orange. But also all of our colors
are a bit more on one side. If we ever wanted to add a
fourth color to the mix, would want to choose
something around here. If we had a composition made up entirely of purple, yellow, and orange, this bluey green is gonna be the thing
that really stands out. Now, yeah, that green does
nicely stand out on this page, but there's something
about that yellow that's just screaming
at me still. Maybe it's because if I look at these colors on this brightness
chart we've got here, we can see that actually
the biggest contrast in brightness is between the
yellow and the purple. And we simply can't make any of the colors as bright as
we can make a yellow. Maybe we just make
the buttons yellow. Now, those buttons
really stand out. Now, another option
would of course be to keep the buttons orange, but just don't
have the yellow on the illustration or anywhere
else on the page like this. Now instead I can
use the yellow, but instead I'll
use the yellow as a very desaturated version
as a background here. Overall, I am pretty happy with this design now I've just
made a few changes to make the colors contrast
better and make sure those buttons stand
out at the top. And here is, of course, the comparison
with the original. Not too much to recap here
because this was more of a demonstration of what
we were just talking about. But we can use
contrast to help us make things stand out more and
make things feel separate. And we can use contrast, not just with the hue, but also with the brightness, the value, and of
course, the saturation.
15. Summary: We have just explored the
main attributes of color, hue, saturation and
value or brightness. Value and brightness
effect the same thing. How much black or
how much white is in the color except
brightness is perceptual, while value is uniform. Your graphic software and CSS aren't going to be able
to deal with brightness. You can use design
software or CSS to define hue
saturation or value, but not brightness,
because this is perceptual and the brightness range is very different for
different hues. A blue hue only has
low brightness. Well, a yellow hue only has
access to high brightness. We can use hue saturation and value or brightness
to create contrast. In our design, the value will create the most
contrast and give them most definition simply
because we have far more rods in our
eye then we have cones. Getting the lights
and dark right in our design is by far the most important than getting
hue or saturation, right? We can design first in black and white and gray
scale first if that helps to ensure it looks good. As we already know
from the last section, each of these
attributes of a color, its hue, saturation, and its value will be affected
by the colors around it. And next to it, a
saturated color. We'll make the color next to
it appear less saturated. Red color. We'll make the color next
to it appear more blue. And a dark color. We'll make the color next
to it appear lighter. Now we know how light works, and we know how to classify
and talk about color. And we already know intuitively how the context
of the color changes it. It's finally time to
create our color palette.
Rob Sutcliffe, UI Designer / Developer
