After selecting the HTML elements, it is time for us to talk about what you can do with them, and one of the easiest ways to start is by changing the text color. In this lesson, we’ll explore how to modify text colors in CSS using various methods, including color names, HEX codes, RGB values, and HSL formats.
As we've demonstrated previously, after selecting a <p>
element, you can change the text color by specifying a color
property.
1p {
2 color: red;
3}
Or change the element's background color using the background-color
property:
1p {
2 background-color: darkorange;
3}
The color
property accepts descriptive color names such as red
, darkorange
, and many more.
However, there are many different colors in the world, and not all of them are predefined in CSS. That is why CSS offers more accurate ways of specifying colors, including RGB, HEX, and HSL.
RGB color
RGB stands for Red, Green, and Blue. They are the fundamental colors in computer science, and when mixed together, they can create every color in the world. The RGB color is defined with the function rgb()
:
1rgb(<red>, <green>, <blue>)
The parameters red
, green
, and blue
define the intensity of each color, using integer values between 0
and 255
. 0
is the weakest, and 255
is the strongest. For example, the following example is the same as color: red;
.
1p {
2 color: rgb(255, 0, 0);
3}
If you mix the colors together, you will be able to create all kinds of different colors.
1p {
2 color: rgb(168, 189, 45);
3}
It is recommended that you use VSCode to help you find the desired color because it is difficult to imagine the resulting color just from the numbers.
There is also a sibling function called rgba()
, which takes an extra parameter.
1p {
2 color: rgba(<red>, <green>, <blue>, <alpha>);
3}
The last parameter, alpha
, defines the transparency of the element. It accepts values from 0
to 1
. 0
being completely transparent, and 1
being completely solid.
1p {
2 color: rgba(167, 189, 45, 0.408);
3}
HEX color
HEX colors are specified with a hexadecimal number like this:
1#rrggbb
The hex color code always starts with a #
, and it is essentially a shorthand for the rgb()
formula. Each variable, rr
, gg
, and bb
, accepts a hex value from 00
to ff
, corresponding to decimal numbers from 0
to 255
. For example:
1p {
2 color: #ff0000;
3}
This example is the same as color: rgb(255, 0, 0);
and color: red;
.
Similarly, you can specify an alpha
value to control the transparency of the element.
1#rrggbbaa
aa
also takes values from 00
to ff
, which are remapped to decimal values between 0
and 1
.
1p {
2 color: #a7bd2d68;
3}
This example is the same as rgba(167, 189, 45, 0.408)
. You can verify that with this tool.
HSL color
If you are familiar with graphical design or some other related fields, you probably already know this color model. HSL takes three variables:
1hsl(<hue>, <saturation>, <lightness>)
hue
is the degree on a color wheel, from 0
to 360
. A color wheel looks like this:
Notice that this wheel has no black, white, or gray. That is the job for the parameters saturation
and lightness
.
saturation
takes a percentage value, from 0
to 100
, which determines how much gray should be added to the original color. 0
means the color is completely gray, and 100
means no gray is added.
lightness
is also a percentage value, which determines how much black or white is added to the original color.
Lastly, hsla()
is a similar formula that allows you to define an alpha
value, which controls the transparency of the element.
1hsla(hue, saturation, lightness, alpha)
1p {
2 color: hsla(69, 62%, 46%, 0.408);
3}
This example is the same as #a7bd2d68
and rgba(167, 189, 45, 0.408)
.