Scribd
Upload
41 views

Learn CSS - Colors Cheatsheet - Codecademy

The document discusses different methods for specifying colors in CSS including color name keywords, hexadecimal colors, RGB colors, HSL colors, and alpha values to specify transparency. It provides examples of using color name keywords like aqua and khaki, hexadecimal color codes like #ff0000 and #00f, RGB values like rgb(0, 255, 0), and HSL values like hsl(200, 70%, 50%) to style elements. The document also demonstrates using rgba() and hsla() to declare colors with alpha transparency values between 0 and 1, as well as the transparent value to create a fully transparent element.

Uploaded by

Maria Claudia Vasquez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
41 views

Learn CSS - Colors Cheatsheet - Codecademy

The document discusses different methods for specifying colors in CSS including color name keywords, hexadecimal colors, RGB colors, HSL colors, and alpha values to specify transparency. It provides examples of using color name keywords like aqua and khaki, hexadecimal color codes like #ff0000 and #00f, RGB values like rgb(0, 255, 0), and HSL values like hsl(200, 70%, 50%) to style elements. The document also demonstrates using rgba() and hsla() to declare colors with alpha transparency values between 0 and 1, as well as the transparent value to create a fully transparent element.

Uploaded by

Maria Claudia Vasquez
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Cheatsheets / Learn CSS

Colors

Color Name Keywords


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

li {
color: khaki;
}

CSS Color Alpha Values


Alpha values determine the transparency of colors in .midground {
CSS. Alpha values can be set for both RGB and HSL colors
background-color: rgba(0, 255, 0, 0.5);
by using rgba() and hsla() and providing a fourth value
representing alpha. Alpha values can range between 0.0 }
(totally transparent) and 1.0 (totally opaque).
The CSS transparent value can also be used to create a .foreground {
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) .red {
notation. Hexadecimal digits can represent sixteen
color: #ff0000;
different values using 0 - 9 and a - f .
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, no
.short-blue {
green, and no blue.
When both characters of all three colors are repeated, color: #00f;
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 .light-blue {
using hsl() syntax. This syntax contains three values: hue
background-color: hsl(200, 70%, 50%);
(the color value itself), saturation (intensity), and 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() .hot-pink {
syntax.
color: rgb(249, 2, 171);
rgb() should be supplied with three values representing
red, green, and blue. These values range can from 0 to }
255.

.green {
color: rgb(0, 255, 0);
}

Print Share

You might also like