Color Flashcards
Colors in CSS can be described in three different ways. . .
Named colors — English words that describe colors, also called keyword colors
RGB — numeric values that describe a mix of red, green, and blue
HSL — numeric values that describe a mix of hue, saturation, and lightness
Before discussing the specifics of color, it’s important to make two distinctions about color. Color can affect the following design aspects:
The foreground color
The background color
In CSS, these two design aspects can be styled with the following two properties. . .
Foreground color is the color that an element appears in. For example, when a heading is styled to appear green, the foreground color of the heading has been styled.
color - this property styles an element’s foreground color.
Conversely, when a heading is styled so that its background appears yellow, the background color of the heading has been styled.
background-color - this property styles an element’s background color.
One syntax that we can use to specify colors is called hexadecimal. Colors specified using this system are called hex colors.
A hex color begins with a hash character (#) which is followed by three or six characters. The characters represent values for red, blue and green.
darkseagreen: #8FBC8F
sienna: #A0522D
saddlebrown: #8B4513
brown: #A52A2A
black: #000000 or #000
white: #FFFFFF or #FFF
aqua: #00FFFF or #0FF
You can include hex colors just as you would include named colors: background-color: #9932cc;, and the letters can be uppercase or lowercase.
There is another syntax for representing RGB values, commonly referred to as “RGB value” or just “RGB”, that uses decimal numbers rather than hexadecimal numbers, and it looks like this:
h1 {
color: rgb(23, 45, 23);
}
In general, hex and RGB color representations are equivalent. Which you choose is a matter of personal taste. That said, it’s good to choose one and be consistent throughout your CSS, because it’s easier to compare hex to hex and RGB to RGB.
Each of the three values represents a color component, and each can have a decimal number value from 0 to 255.
The first number represents the amount of red, the second is green, and the third is blue. These colors are exactly the same as hex, but with a different syntax and a different number system.
The RGB color scheme is convenient because it’s very close to how computers represent colors internally.
There’s another equally powerful system in CSS called the hue-saturation-lightness color scheme, abbreviated as HSL
Hue is the first number. It refers to an angle on a color wheel. Red is 0 degrees, Green is 120 degrees, Blue is 240 degrees, and then back to Red at 360
The syntax for HSL is similar to the decimal form of RGB, though it differs in important ways. The first number represents the degree of the hue, and can be between 0 and 360.
The second and third numbers are percentages representing saturation and lightness respectively. Here is an example:
color: hsl(120, 60%, 70%);
Saturation refers to the intensity or purity of the color. The saturation increases towards 100% as the color becomes richer. The saturation decreases towards 0% as the color becomes grayer.
Lightness refers to how light or dark the color is. Halfway, or 50%, is normal lightness. Imagine a sliding dimmer on a light switch that starts halfway. Sliding the dimmer up towards 100% makes the color lighter, closer to white. Sliding the dimmer down towards 0% makes the color darker, closer to black.
To use opacity in the HSL color scheme, use hsla instead of hsl, and four values instead of three. For example:
color: hsla(34, 100%, 50%, 0.1);
The first three values work the same as hsl. The fourth value (which we have not seen before) is the alpha. This last value is sometimes called opacity.
Alpha is a decimal number from zero to one. If alpha is zero, the color will be completely transparent. If alpha is one, the color will be opaque. The value for half-transparent would be 0.5.
The RGB color scheme has a similar syntax for opacity, rgba. Again, the first three values work the same as rgb and the last value is the alpha. Here’s an example:
color: rgba(234, 45, 98, 0.33);
