Scribd
Upload
25 views

Learn CSS - Colors Cheatsheet - Codecademy

The document provides information about different ways to specify colors in CSS including color keywords, RGB and HSL values, hexadecimal colors, and alpha transparency. It includes examples of color property values using these different methods.

Uploaded by

ahmedahmedlaidi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

Learn CSS - Colors Cheatsheet - Codecademy

The document provides information about different ways to specify colors in CSS including color keywords, RGB and HSL values, hexadecimal colors, and alpha transparency. It includes examples of color property values using these different methods.

Uploaded by

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

15/11/2023 18:32 Learn CSS: Colors Cheatsheet | Codecademy

Cheatsheets / Learn CSS

Colors

Color Name Keywords

Color name keywords can be used to set color h1 {


property 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
background-color: rgba(0, 255, 0, 0.5);
colors 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). .foreground {
The CSS transparent value can also be used to create
background-color: hsla(34, 100%, 50%,
a fully transparent element.
0.1);
}

.transparent {
color: transparent;
}

https://www.codecademy.com/learn/learn-css/modules/learn-css-colors/cheatsheet 1/2
15/11/2023 18:32 Learn CSS: Colors Cheatsheet | Codecademy

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 .short-blue {
red, 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 .light-blue {
using hsl() syntax. This syntax contains three values:
background-color: hsl(200, 70%, 50%);
hue (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 .hot-pink {


rgb() 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

https://www.codecademy.com/learn/learn-css/modules/learn-css-colors/cheatsheet 2/2

You might also like