Cheatsheets / Learn CSS

Colors
Color Name Keywords
Color name keywords can be used to set color property
values for elements in CSS. h1 {
color: aqua;
}

li {
color: khaki;
}

CSS Color Alpha Values

Alpha values determine the transparency of colors in
CSS. Alpha values can be set for both RGB and HSL colors .midground {
by using rgba() and hsla() and providing a background-color: rgba(0, 255, 0,
fourth value representing alpha. Alpha values can range 0.5);
between 0.0 (totally transparent) and 1.0 (totally }
opaque).
The CSS transparent value can also be used to .foreground {
create a fully transparent element. background-color: hsla(34, 100%, 50%,
0.1);
}

.transparent {
color: transparent;
}

CSS Hexadecimal Colors

CSS colors can be represented in hexadecimal (or hex)
notation. Hexadecimal digits can represent sixteen .red {
di erent values using 0 - 9 and a - f . color: #ff0000;
Hexadecimal colors are composed of 6 characters–each }
group of two represents a value between 0 and 255 for
red, green, or blue. For example #ff0000 is all red, .short-blue {
no green, and no blue. color: #00f;
When both characters of all three colors are repeated, }
hex colors can be abbreviated to only three values, so
#0000ff could also be represented as #00f .
CSS HSL Colors
CSS colors can be declared with the HSL color system
using hsl() syntax. This syntax contains three values: .light-blue {
hue (the color value itself), saturation (intensity), and background-color: hsl(200, 70%, 50%);
lightness. }
Hue values range from 0 to 360 while saturation and
lightness values are represented as percentages.

CSS rgb() Colors

CSS colors can be declared with RGB colors using
rgb() syntax. .hot-pink {
rgb() should be supplied with three values color: rgb(249, 2, 171);
representing red, green, and blue. These values range can }
from 0 to 255.
.green {
color: rgb(0, 255, 0);
}