- Let's talk digital color.
So, there's a bunch of different ways
that we can do color using
CSS and for our websites.
The first one you
learned is just literally
saying the word.
Make it black, make it
white, make it green.
At some point, your
vocabulary is gonna run out.
I mean, there's a lot of
different words you can use.
I think there's like,
chocolate, it doesn't even
look like chocolate.
But you get the point.
Pink, right?
Or light pink, or dark pink, or all
these kind of things.
But at some point there's
millions of colors, right?
Available to our eyes.
And, we wanna describe those.
The way we do that is with numbers.
The most common way to do it
is with something called hexadecimal code.
And it's this six digit code,
you can see there's six here,
six digit code which represents color.
Now this one here is gonna be red.
Check that out.
See that works.
You don't need to memorize these codes.
They're available to you,
and in this video I'm
gonna show you three ways
that you can find these codes around
and start using them.
Also, black would be all zeros,
one two three four five six.
A few of them I have memorized,
cause I've done it before.
But, the rest we're gonna look up.
So there's a few different ways.
The one would be, we'll start
with the most complex first.
The one would be if you have Photoshop.
So if you have Photoshop,
many designers use Photoshop
as a tool for designing,
you can pull in an image, you click here,
and you use the color picker.
Even if you don't have Photoshop,
it's just interesting
to know how this works.
You use the color picker,
and then you can basically
just pick stuff here.
And notice how this represents
the thing that you choose.
If you are using Photoshop's,
get rid of this only web colors.
That feature hasn't really been useful
since 1995 or something.
All of these colors are
available on the web
and so, you can use all these colors,
and see I get this very
distinct hexadecimal code.
Such that, if I were to grab that,
and pull it into my project,
you gotta put the hash before it.
Well, we get that there.
Of course, I wanted it instead on my,
we want it here.
Let's do that.
And then we have it.
So Photoshop is the first way.
Now, if you don't have Photoshop,
cause it does cost like
$9 a month or something.
If you don't have Photoshop,
and you don't want it,
screw you Adobe,
then we don't need to get it.
There's a way using the Mac
that you can do almost that same effect.
And, it's called the Digital Color Meter.
So you can use spotlight to search for it,
or it's in your utilities folder.
But you can find it on your computer,
and it has that same effect built into
the Mac.
Yes, it's Mac only, this
isn't available on Windows.
But, all you have to do is use this
and it becomes a picker,
and you can see when
you highlight over it,
I get the numbers.
Now there's a little bit
more complexity with this
but I'll explain it in brief.
If you're using this,
you need to make sure
that you are displaying
values as hexadecimal
so you get that number.
And then also, the kinda
weird thing about this
is when you highlight over it,
notice what it says there.
Zero zero zero zero zero.
It's those last numbers,
in this case you gotta
put all those together.
So 75c156
would be this one.
And it's pretty close to this.
75c1f6
is what that is.
Cause actually, this is red,
that's the range of red,
this is the range of green,
RGB, red, green, and then these are
the range of blue.
And, that's how it makes it,
and that's more or less
what it is telling us
using this color picker.
The amount of red, the amount of green,
the amount of blue.
You gotta add them all together.
Alright, cool, blowing your mind, right?
The third way that you can,
I'm gonna close that out,
the third way, and probably
the most applicable way
for everyone, cause you
just need your browser,
is this site called Colour Lover,
so people that love color.
And when you come here, they will show you
different color palettes.
I'm not good at choosing
colors for a site.
It's a very designer,
left brain kind of thing
that I'm not, right brain kind of thing
that I'm not really all that good at.
So, if I come here, I can get some ideas
for color palettes.
If I typed in something
like cookie monster,
I want the feeling of a cookie monster.
You will see there are even color palettes
that people have put together and shared
that they were inspired
by the monster himself.
So we can see and choose one that we like.
I think the one that I chose, I don't see,
I don't know where it is,
but I believe it's called Nom Nom Nom.
And it's on here somewhere.
And if you were to find Nom Nom Nom,
wherever that one is,
you will find this exact color
that I ended up choosing for this project.
So that's kind of the mystery behind
where these colors came from.
Again I'm not a designer,
but I know how to use some hacky tools
to make stuff.
So check that out, Colour Lovers.
You can search around there.
You'll get a color palette.
And when you do, if you click on it here,
notice they'll break them all down
by their hex code, so there you go.
Okay.
So, go ahead and do that.
I want you to add this
color to the background here
like that.
And in the next video, we're
gonna finish up this project.
And then I'll give you your
challenge for the week.
Okay, see you in a bit.