WEBVTT

00:00:00.080 --> 00:00:04.399
If you're starting as a designer, you don't 
need a lot of colors, just as with fonts.

00:00:04.399 --> 00:00:11.060
If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!'

00:00:11.060 --> 00:00:15.311
that's not really the case. What you really need is a *background color*,

00:00:15.311 --> 00:00:17.837
a *foreground color* and an *accent color*.

00:00:17.837 --> 00:00:21.920
And there are some rules that you 
can then look up on your own later,

00:00:21.920 --> 00:00:26.186
like the *60-30-10 rule*, which is pretty useful.

00:00:26.186 --> 00:00:29.515
But, in general, what you need to really remember from this

00:00:29.515 --> 00:00:33.274
is that you need a *background color*, 
so in my case it's going to be white.

00:00:33.274 --> 00:00:38.195
Then you need a *text color*, which is going to be some sort of black or dark gray,

00:00:38.195 --> 00:00:41.182
and the *accent color for the important actions*.

00:00:41.182 --> 00:00:46.828
And one thing that you can actually tweak here is to have that darker color

00:00:46.828 --> 00:00:50.592
instead of being pure black, 
add a little bit of that accent color.

00:00:50.592 --> 00:00:56.280
So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and

00:00:56.280 --> 00:00:59.281
it's just going to look better together. 
So, that's just one way.

00:00:59.281 --> 00:01:03.280
And you need *three colors* really to pull off most designs.

00:01:03.543 --> 00:01:07.627
And you can start adding colors once you 
feel more comfortable with them.

00:01:07.627 --> 00:01:12.301
But when you're starting, really just the less colors the better because

00:01:12.301 --> 00:01:15.186
it's just much harder that way to screw it up.

00:01:15.186 --> 00:01:21.417
Two of the worst possible color combinations 
are mixing red with either very saturated blue

00:01:21.417 --> 00:01:25.900
or very saturated green. And if you look at it more closely depending on the type of screen

00:01:25.900 --> 00:01:31.161
that you have, you'll see that on the place where they kind of mix together,

00:01:31.161 --> 00:01:33.787
that little line becomes a little bit fuzzy.

00:01:33.787 --> 00:01:36.440
If you look at it a little bit longer, it starts to hurt your eyes

00:01:36.455 --> 00:01:39.186
in some cases on some screens

00:01:39.186 --> 00:01:44.080
because this contrast of those colors 
works really, really bad together.

00:01:44.131 --> 00:01:49.537
So, if you want to make a Christmas app, for example, there are better ways to do it,

00:01:49.537 --> 00:01:55.493
but *generally avoid those color combinations* and *always test your colors if they're clashing that way*.

00:01:55.493 --> 00:02:01.066
So, you can just place one on top of the other and see if that fuzzy line appears on them.

00:02:01.066 --> 00:02:04.667
And that's one way to actually test it – you know – *by eye*, just looking at it.

00:02:04.667 --> 00:02:07.569
If it looks good, then it looks good.