Skip to content

Colors

Change text color!

  • Lesson
  • 3 min read
  • 2 of 8 in this chapter

Links3

Text color

To change the color of text, set the color property to the necessary color:

CSS
h1 {
    color: red;
}

The property is the part on the left of the ":", and the part on the right is the value of that property.

Color Names

Colors can be specified using their names, as we did just now. CSS and HTML support 140 different color names, from "red" all the way to "blanched almond". You can check out the full list of colors here: htmlcolorcodes.com/color-names.

It's sometimes convenient to use these basic color names, but when you're creating a brand or just a nice color scheme, you may want to be more specific. HTML and CSS allow other ways to specify colors.

HEX

You can specify a color using its hexadecimal value. This number is in the form #rrggbb, where rr is the hexadecimal value for red (from 00 to ff, this value has the same range as decimal 0-255), gg is the same for green, and bb for blue. So #00ff00 would be green, because both red and blue have a value of zero, and green has the maximum value possible. #ffffff is white, and #000000 is black. This is a shade of teal:

CSS
h1 {
    color: #33706A;
}

coolors.co/generate is a fun site that randomly generates five new colors, with hex codes, every time you press space.

You can also check out htmlcolorcodes.com again for their color picker - it allows you to choose the color you want and gives you its hex value.

RGB and RGBA

Another way to describe colors is with RGB or RGBA values. RGB stands for (you guessed it!) red, green, and blue, and it's written in CSS in the form rgb(0, 0, 0), where each number is replaced with the appropriate value (0-255). rgb(255, 0, 0) is red, rgb(0, 255, 0) is green, and rgb(0, 0, 255) is blue.

RGBA is the same with the addition of a fourth parameter, "alpha", which is transparency. The alpha value ranges from 0 (transparent) to 1 (completely opaque). Here's an example of the difference between RGB and RGBA:

CSS
h1 {
    color: rgb(0, 0, 0);
}

The above would make the text black. But adding a transparency value would make it gray, since the background is white:

CSS
h1 {
    color: rgb(0, 0, 0, 0.5)
}