ColorCode

Colors are probably the most effective, obvious way for you to communicate with your audience. You can add colors to several places on your page:

For example, text color, which in CSS is just Color. It’s what we’ve been using so far.

p {
    color: red;
}

background-color: changes the background of that element

p {
    background-color: red;
}

Or border-color: same thing for border.

p {
    border-color: red;
}

So the value can be the color name in English, like red, blue or green.

What if I want a lighter red. There’s no official lighter red! Lighter by how much?

Well then you can use Color values that are more specific. For example HEX values.

Hexadecimal Colors

Every color you can possibly think of has a HEX value. You can get pretty specific with these and in most cases you will. They’re a little weird but you don’t have to remember them, you can use chrome dev tools color wheel to choose exactly the color that you want. Or if you work with a designer they’ll hopefully give you these values.

They start with a # followed by 6 numbers. So this for example is how you set the color to red using HEX. This is HEX for red.

p {
    color: #FF0000;
}

The reason HEX values exist is because there are far more colors available than we can describe in english. So, you can define the color using its HEX value instead of plain english. I’ve been using a website called ColourLovers.com for many years. You can find amazing combinations of colors on there, including their HEX value.

RGB Colors

You can also use RGB values. If you’re a designer you know what I’m talking about. RGB stands for red / green / blue. Each value goes from 0 to 255 and represents each basic color. RED, GREEN, BLUE. You can create all the colors in the world that your eyes could possibly see with RGB.

p {
    color: rgb(10, 10, 255);
}

RGBA Colors

There’s also RGBA and this is a big one, it’s for advanced programmers, so hold on to your butts. That’s red green blue alpha. The Alpha channel is the transparency level of your color. Or the opacity level. Meaning how much can you see through the color. By default all colors are at 100%. So you can’t see through them. So their Alpha value is 1. It goes from 0 to 1. So if you change the alpha value to say .5, that means 50%, .2 means 20%. Again, You can go from 0 to 1. And the default is 1. 100%.

p {
    color: rgba(10, 10, 255, .5);
}

Other Values

There are other ways to specify color like HSL (Hue, Saturation, Lightness). Or HWB (Hue, Whiteness, Blackness). I’ve personally never used either, there might even be other ways but most people use HEX or RGB and so for the purposes of this course we won’t use anything else. You can read more about Colors on W3Schools if you’re that obsessed. Good luck to you.

So anywhere you can add a color you can use any of these values. Now, instead of showing you some lame little example, we’re gonna give colors to your profile page, the one that you built in the HTML Basics course. If you don’t have it, that’s ok, you can either go back and make it or go to ColorCode’s github account and get it. Click on this download button and you can get a ZIP file that has the HTML template. Also, make sure to follow ColorCode on Github so you see the updates. So, my friend, let’s go Color some stuff...