Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I described how to select colors when using CSS.
You have a few different options when it comes to selecting colors with CSS.
First you can select a color by its name like red, yellow, green,
You can select a color using its hexadecimal or hex value, which usually starts with a hash symbol followed by a series of letters and numbers.
You can select a color using its RGB value, which is a series of numbers representing how much red how much green and how much blue needs to be mixed together to achieve the color.
And, you can also use an rgba value, which is basically the same as an RGB with an additional number at the end representing the alpha channel. This number can be zero to 1 and it represents opacity.
As you can see here, most of your basic colors have a name attached to them. So, if you want red, type red. If you want blue, type blue.
However, there are also 16 million different colors you can choose from, which is why we have hex values, RGB values, and rgba values.
There are a number of different online resources to help you out here. The key, then, is to know what color you want and then hop on the Internet and figure out what the name you need is, what the hex value you need is, or what the RGB value is that you need.
So, let's take a look at how to use each of these methods.
As you can see here, if I want to select a color by its name, I simply include the name as the value in the color property.
If I wanted to select a color by hex value, I'd simply start with the hash symbol and then I'd look up what letters and numbers I need to add together in order to achieve the color.
RGB is the same, however, we have to remember to start with RGB and put our color values in parentheses and each value needs a comma between them.
To use opacity, then, we type in rgba, we add our parentheses, and we put four values: the red, green, blue, and then the alpha channel value.
There are, of course, a number of other methods used to select colors in CSS but, selecting color by its name, its text value, its RGB value, and its rgba value are the most common.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.