CSS Fundamentals
Manipulate Colors with CSS
Defining colors can be done with hex, hsl, and rgb values. Each one works by telling browsers how to blend colors and lightness together. Let's apply these to our H1 and see how it affects the text color.
Instructor: [00:00] Let's go ahead and install our h1 to be the color red. We'll add that, save it, refresh. We see that everything goes red. Whenever we use the color property, not only it's going to change the text color, it's going to affect text decorations and also be the default color for any borders that are applied.
[00:18] The # here in the color value is telling us that this is the hex value where the first two are red, the second two represent green, and the last two are blue.
[00:27] For example, this is red because red is set to the highest value FF and the other is set to the lowest value of 0Let's change this hex and say RGB (255, 00Save and refresh, and our h1 is still red.
[00:44] When we use the RGB value here, this is indicating the red, green, and blue. We'll define the intensity of each color between the values of 0and 255. Red is still 255 and our other two colors are 00giving us red.
[00:59] Finally, let's remove this RGB and do hsl(0100%,50%). Save and we still have red. Hsl stands for hue, saturation and lightness. This is another way we can define colors in CSS.
[01:14] Hue is this first one here and its degree on the color wheel from 0to 360, 0is red, 120 is green, and 240 is blue. Saturation is the second one here and is a percentage value. 0means a shade of gray and 100% is the full color. Lightness is also percentage. 0is black. 50% is [inaudible] lighter dark. 100% is white.
[01:38] All three of these are valid when working with values that need colors like borders or backgrounds. We can set a blue background to our h1.