Scribd
Upload
19 views2 pages

Getting More Advanced With Design - Colors Cheatsheet - Codecademy

Colors

Uploaded by

kimato suyaka
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
19 views2 pages

Getting More Advanced With Design - Colors Cheatsheet - Codecademy

Colors

Uploaded by

kimato suyaka
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

Cheatsheets / Getting More Advanced with Design

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 HSL Colors


CSS colors can be declared with the HSL color system
using hsl() syntax. This syntax contains three .light-blue {
values: hue (the color value itself), saturation (intensity), background-color: hsl(200, 70%, 50%);
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() 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);
}

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 .short-blue {
all 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 Color Alpha Values
Alpha values determine the transparency of colors in
CSS. Alpha values can be set for both RGB and HSL .midground {
colors by using rgba() and hsla() and background-color: rgba(0, 255, 0,
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 to .foreground {
create a fully transparent element. background-color: hsla(34, 100%, 50%,
0.1);
}

.transparent {
color: transparent;
}

You might also like