Color part II

I’m at the library today. It’s a little crowded here. Today’s study focused on color using hex, hsl, linear-gradient, border color, and box shadow. Here are some resources, tutorialspoint, and w3schools.

The most common way to apply color is with hexadecimal or hex values. Hex color values begin with a pound sign or hashtag # character and take six characters from 0-9 and A-F. The first pair of characters represents red, the second pair represents green, and the third pair represents blue. The syntax would look something like this:

#ff5733

With hex colors, 00 is 0% of that color, and FF is 100%. So #ff5733 translates to 100% red, 57% green, and 33% blue and is the same as rgb(255, 57, 33).

You can specify a color in HTML and CSS using hsl (hue, saturation, lightness). Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240 is blue. Saturation is the percentage value of the color. 0% would be a shade of gray, while 100% would be the full color. Lightness is also a percentage value of how light or dark the color is. 0% is black, and 100% is white. The syntax would look like this:

hsl(hue, saturation, lightness)

Like with RGB, you can add an alpha channel to the end. And alpha channel tells you how opaque a color will be. Alpha channel is numbered between 0.0 (fully transparent) and 1.0 (not transparent at all).

hsla(hue, saturation, lightness, alpha) 

hsla(9, 100%, 64%, 0.5)

Linear-gradient starts from the top and creates a gradient to the bottom.

.picture {
  background-image: linear-gradient(red, yellow, blue);
}

You can add a degree like 90deg before the color to give more of an angle. 

For border style, I’m using the shorthand technique. You can add more than one border style if you wish.

p {
  border: 5px solid red;
}

box-shadow: offsetX offsetY color;

You can add a blurRadius and spreadRadius value to the box-shadow property:

box-shadow: offsetX offsetY blurRadius spreadRadius color;