Scribd
Upload
13 views

Improved Styling With CSS: Learn CSS: Colors Cheatsheet - Codecademy

The document discusses different methods for specifying colors in CSS, including: - Color name keywords that can be used to set color property values. - Alpha values in rgba() and hsla() that determine transparency between 0.0 and 1.0. - Hexadecimal color notation using # followed by 6 hexadecimal digits or 3 digits. - HSL colors declared with hsl() containing hue, saturation, and lightness values. - RGB colors declared with rgb() containing red, green, and blue values from 0-255.

Uploaded by

Maimunah Iskhander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Improved Styling With CSS: Learn CSS: Colors Cheatsheet - Codecademy

The document discusses different methods for specifying colors in CSS, including: - Color name keywords that can be used to set color property values. - Alpha values in rgba() and hsla() that determine transparency between 0.0 and 1.0. - Hexadecimal color notation using # followed by 6 hexadecimal digits or 3 digits. - HSL colors declared with hsl() containing hue, saturation, and lightness values. - RGB colors declared with rgb() containing red, green, and blue values from 0-255.

Uploaded by

Maimunah Iskhander
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

21/7/23, 11:44 PM

Cheatsheets / Improved Styling with CSS

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

.transparent {
color: transparent;
}

about:srcdoc Page 1 of 2
21/7/23, 11:44 PM

CSS Hexadecimal Colors


CSS colors can be represented in hexadecimal (or .red {
hex) notation. Hexadecimal digits can represent
color: #ff0000;
sixteen di!erent 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
.short-blue {
#ff0000 is all red, no green, and no blue.
When both characters of all three colors are color: #00f;
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 .light-blue {
system using hsl() syntax. This syntax contains
background-color: hsl(200, 70%, 50%);
three values: 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

about:srcdoc Page 2 of 2

You might also like