SPACEBAR to move forward through slides.
SHIFT & SPACEBAR to move backwards through slides.
LEFT ARROW & RIGHT ARROW to move through sections.
ESC to see overview and ESC again to exit.
F to enter presentation mode and ESC to exit.
The <'color'>
property sets the foreground color of an element’s text content.
It also sets the color of the text decoration unless the <'text-decoration-color'>
property has been defined.
The CSS <'color'>
property is defined with the following syntax:
<'color'> =
<color> | inherit
<'color'>
is a property data type - identified by the quotation marks around the word.
This property data type is used to define the color of text content.
p { color: red; }
<color>
is a non-property data type - identified by the absence of quotation marks around the word.
This non-property data type is used to define whereever color is needed by property data types.
/* The color non-property data type */
<'color'> = <color>
<'background-color'> = <color>
<'border-color'> = <color>
The <color>
non-property data type was originally defined in CSS 1.
It has been expanded in the CSS 2.1, CSS Color Module Level 3 and CSS Color Module Level 4 specifications.
This slide deck will focus on how the <color>
non-property data type is defined in the CSS Color Module Level 3 and 4 specifications.
In the CSS Color Module Level 3 specification, the <color>
non-property data type is defined as:
<color> =
<hex-color> |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<named-color> |
<deprecated-system-color> |
currentcolor |
transparent
Let’s look at each of these options in detail.
As of CSS Color Module Level 3 the <hex-color>
syntax is still:
<hex-color> =
#[ rgb | rrggbb ]
This means you can use a hash symbol '#'
immediately followed by either 3 or 6 hexadecimal characters.
Hexadecimal characters include the numbers (0-9)
and letters (A-F)
, which can be written in upper or lower case.
For six-digit notation, the first pair of digits represents the red channel.
The second pair represents the green channel, and the last pair represents the blue channel.
p { color: #FFAA00; }
The 3-digit notation is a shorter variant of the 6-digit notation.
The first digit represents the red channel. The second digit represents the green channel, and the last digit represents the blue channel.
p { color: #FA0; }
Open this HTML file in an editor:
exercises-start/exercise-214-02-01.html
Write a CSS rule to style example1
with a background-color
value of #FFA500
.
.example1 {
background-color: #FFA500;
}
Write a second CSS rule to style example2
with a background-color
value of #0FF
.
.example2 {
background-color: #0FF;
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-01.html
As of CSS Color Module Level 3 the <rgb()>
syntax is:
<rgb()> =
rgb(
[ <percentage>#{3} | <number>#{3} ]
)
This means you can use three percentage values or three numeric values between the brackets in "rgb()"
, each seperated by a comma.
The first value represents the red channel, the second value represents the green channel, and the last value represents the blue channel.
For percentage notation, the three values must between 0%
(black) and 100%
(white).
/* Black */
p { color: rgb(0%, 0%, 0%); }
/* White */
p { color: rgb(100%, 100%, 100%); }
For numeric notation the three values must be between 0
(black) and 255
(white).
/* Black */
p { color: rgb(0, 0, 0); }
/* White */
p { color: rgb(255, 255, 255); }
Open this HTML file in an editor:
exercises-start/exercise-214-02-02.html
Write a CSS rule to style example1
with a background-color
value of rgb(255, 165, 0)
.
.example1 {
background-color: rgb(255, 165, 0);
}
Write a second CSS rule to style example2
with a background-color
value of rgb(100%, 65%, 0%)
.
.example2 {
background-color: rgb(100%, 65%, 0%);
}
Note that while the first rule uses numeric notation and the second rule uses percentage notation, they both produce the same color.
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-02.html
As of CSS Color Module Level 3 the <rgba()>
syntax is:
<rgba()> =
rgba(
[ <percentage>#{3} | <number>#{3} ]
, <alpha-value>
)
This means you can use three percentage values or three numeric values and one alpha value, each seperated by a comma.
These comma-separated values are all placed between the brackets in "rgba()"
.
The first value represents the red channel, the second value represents the green channel, and the third value represents the blue channel.
The fourth value represents the alpha channel, a number value between 0
(fully transparent) and 1
(fully opaque).
/* Black - fully opaque */
p { color: rgba(0, 0, 0, 1); }
/* Black - fully transparent */
p { color: rgba(0, 0, 0, 0); }
For percentage notation the three values must between 0%
(black) and 100%
(white).
/* Black */
p { color: rgba(0%, 0%, 0%, 1); }
/* White */
p { color: rgba(100%, 100%, 100%, 1); }
For numeric notation the three values must be between 0
(black) and 255
(white).
/* Black */
p { color: rgba(0, 0, 0, 1); }
/* White */
p { color: rgba(255, 255, 255, 1); }
Open this HTML file in an editor:
exercises-start/exercise-214-02-03.html
Write a CSS rule to style example1
with a background-color
value of rgba(255, 165, 0, .5)
.
.example1 {
background-color:
rgba(255, 165, 0, .5);
}
Write a second CSS rule to style example2
with a background-color
value of rgba(100%, 65%, 0%, .5)
.
.example2 {
background-color:
rgba(100%, 65%, 0%, .5);
}
Note that while the first rule uses numeric notation and the second rule uses percentage notation, they both produce the same color.
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-03.html
As of CSS Color Module Level 3 the <hsl()>
syntax is:
<hsl()> =
hsl(
<hue>,
<percentage>,
<percentage>
)
This means you need hue, saturation and a lightness values, each seperated by a comma.
The first value is for Hue and must be an integer value between 0
and 359
.
The second value is for Saturation and must be defined as a percentage value between 0%
and 100%
.
The third value is Lightness and must be defined as a percentage value between 0%
and 100%
.
p { color: hsl(280, 100%, 50%); }
Open this HTML file in an editor:
exercises-start/exercise-214-02-04.html
Write a CSS rule to style example1
with a background-color
value of hsl(39, 100%, 50%)
.
.example1 {
background-color:
hsl(39, 100%, 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-04.html
As of CSS Color Module Level 3 the <hsla()>
syntax is:
<hsla()> =
hsla(
<hue>,
<percentage>,
<percentage>,
<alpha-value>
)
This means you need hue, saturation, lightness and alpha-transparency values, each seperated by a comma.
As with hsl()
, the first value is for Hue and must be an integer value between 0
and 359
.
The second value is for Saturation and must be defined as a percentage value between 0%
and 100%
.
The third value is Lightness and must be defined as a percentage value between 0%
and 100%
.
The fourth value represents the alpha channel, a number value between 0
(fully transparent) and 1
(fully opaque).
p { color: hsla(280, 100%, 50%, 1); }
Open this HTML file in an editor:
exercises-start/exercise-214-02-05.html
Write a CSS rule to style example1
with a background-color
value of hsla(39, 100%, 50%, .5)
.
.example1 {
background-color:
hsla(39, 100%, 50%, .5);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-05.html
CSS 1 introduced 16 color keywords:
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
1 | aqua | #00FFFF |
0,255,255 |
|
2 | black | #000000 |
0,0,0 |
|
3 | blue | #0000FF |
0,0,255 |
|
4 | fuchsia | #FF00FF |
255,0,255 |
|
5 | gray | #808080 |
128,128,128 |
|
6 | green | #008000 |
0,128,0 |
|
7 | lime | #00FF00 |
0,255,0 |
|
8 | maroon | #800000 |
128,0,0 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
9 | navy | #000080 |
0,0,128 |
|
10 | olive | #808000 |
128,128,0 |
|
11 | purple | #800080 |
128,0,128 |
|
12 | red | #FF0000 |
255,0,0 |
|
13 | silver | #C0C0C0 |
192,192,192 |
|
14 | teal | #008080 |
0,128,128 |
|
15 | white | #FFFFFF |
255,255,255 |
|
16 | yellow | #FFFF00 |
255,255,0 |
As of CSS Color Module Level 3, 131 new keywords were added:
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
1 | aliceblue | #f0f8ff |
240,248,255 |
|
2 | antiquewhite | #faebd7 |
250,235,215 |
|
3 | aquamarine | #7fffd4 |
127,255,212 |
|
4 | azure | #f0ffff |
240,255,255 |
|
5 | beige | #f5f5dc |
245,245,220 |
|
6 | bisque | #ffe4c4 |
255,228,196 |
|
7 | blanchedalmond | #ffebcd |
255,235,205 |
|
8 | blueviolet | #8a2be2 |
138,43,226 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
9 | brown | #a52a2a |
165,42,42 |
|
10 | burlywood | #deb887 |
222,184,135 |
|
11 | cadetblue | #5f9ea0 |
95,158,160 |
|
12 | chartreuse | #7fff00 |
127,255,0 |
|
13 | chocolate | #d2691e |
210,105,30 |
|
14 | coral | #ff7f50 |
255,127,80 |
|
15 | cornflowerblue | #6495ed |
100,149,237 |
|
16 | cornsilk | #fff8dc |
255,248,220 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
17 | crimson | #dc143c |
220,20,60 |
|
18 | cyan | #00ffff |
0,255,255 |
|
19 | darkblue | #00008b |
0,0,139 |
|
20 | darkcyan | #008b8b |
0,139,139 |
|
21 | darkgoldenrod | #b8860b |
184,134,11 |
|
22 | darkgray | #a9a9a9 |
169,169,169 |
|
23 | darkgreen | #006400 |
0,100,0 |
|
24 | darkgrey | #a9a9a9 |
169,169,169 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
25 | darkkhaki | #bdb76b |
189,183,107 |
|
26 | darkmagenta | #8b008b |
139,0,139 |
|
27 | darkolivegreen | #556b2f |
85,107,47 |
|
28 | darkorange | #ff8c00 |
255,140,0 |
|
29 | darkorchid | #9932cc |
153,50,204 |
|
30 | darkred | #8b0000 |
139,0,0 |
|
31 | darksalmon | #e9967a |
233,150,122 |
|
32 | darkseagreen | #8fbc8f |
143,188,143 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
33 | darkslateblue | #483d8b |
72,61,139 |
|
34 | darkslategray | #2f4f4f |
47,79,79 |
|
35 | darkslategrey | #2f4f4f |
47,79,79 |
|
36 | darkturquoise | #00ced1 |
0,206,209 |
|
37 | darkviolet | #9400d3 |
148,0,211 |
|
38 | deeppink | #ff1493 |
255,20,147 |
|
39 | deepskyblue | #00bfff |
0,191,255 |
|
40 | dimgray | #696969 |
105,105,105 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
41 | dimgrey | #696969 |
105,105,105 |
|
42 | dodgerblue | #1e90ff |
30,144,255 |
|
43 | firebrick | #b22222 |
178,34,34 |
|
44 | floralwhite | #fffaf0 |
255,250,240 |
|
45 | forestgreen | #228b22 |
34,139,34 |
|
46 | gainsboro | #dcdcdc |
220,220,220 |
|
47 | ghostwhite | #f8f8ff |
248,248,255 |
|
48 | gold | #ffd700 |
255,215,0 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
49 | goldenrod | #daa520 |
218,165,32 |
|
50 | greenyellow | #adff2f |
173,255,47 |
|
51 | grey | #808080 |
128,128,128 |
|
52 | honeydew | #f0fff0 |
240,255,240 |
|
53 | hotpink | #ff69b4 |
255,105,180 |
|
54 | indianred | #cd5c5c |
205,92,92 |
|
55 | indigo | #4b0082 |
75,0,130 |
|
56 | ivory | #fffff0 |
255,255,240 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
57 | khaki | #f0e68c |
240,230,140 |
|
58 | lavender | #e6e6fa |
230,230,250 |
|
59 | lavenderblush | #fff0f5 |
255,240,245 |
|
60 | lawngreen | #7cfc00 |
124,252,0 |
|
61 | lemonchiffon | #fffacd |
255,250,205 |
|
62 | lightblue | #add8e6 |
173,216,230 |
|
63 | lightcoral | #f08080 |
240,128,128 |
|
64 | lightcyan | #e0ffff |
224,255,255 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
65 | lightgoldenrodyellow | #fafad2 |
250,250,210 |
|
66 | lightgray | #d3d3d3 |
211,211,211 |
|
67 | lightgreen | #90ee90 |
144,238,144 |
|
68 | lightgrey | #d3d3d3 |
211,211,211 |
|
69 | lightpink | #ffb6c1 |
255,182,193 |
|
70 | lightsalmon | #ffa07a |
255,160,122 |
|
71 | lightseagreen | #20b2aa |
32,178,170 |
|
72 | lightskyblue | #87cefa |
135,206,250 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
73 | lightslategray | #778899 |
119,136,153 |
|
74 | lightslategrey | #778899 |
119,136,153 |
|
75 | lightsteelblue | #b0c4de |
176,196,222 |
|
76 | lightyellow | #ffffe0 |
255,255,224 |
|
77 | limegreen | #32cd32 |
50,205,50 |
|
78 | linen | #faf0e6 |
250,240,230 |
|
79 | magenta | #ff00ff |
255,0,255 |
|
80 | mediumaquamarine | #66cdaa |
102,205,170 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
81 | mediumblue | #0000cd |
0,0,205 |
|
82 | mediumorchid | #ba55d3 |
186,85,211 |
|
83 | mediumpurple | #9370db |
147,112,219 |
|
84 | mediumseagreen | #3cb371 |
60,179,113 |
|
85 | mediumslateblue | #7b68ee |
123,104,238 |
|
86 | mediumspringgreen | #00fa9a |
0,250,154 |
|
87 | mediumturquoise | #48d1cc |
72,209,204 |
|
88 | mediumvioletred | #c71585 |
199,21,133 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
89 | midnightblue | #191970 |
25,25,112 |
|
90 | mintcream | #f5fffa |
245,255,250 |
|
91 | mistyrose | #ffe4e1 |
255,228,225 |
|
92 | moccasin | #ffe4b5 |
255,228,181 |
|
93 | navajowhite | #ffdead |
255,222,173 |
|
94 | oldlace | #fdf5e6 |
253,245,230 |
|
95 | olivedrab | #6b8e23 |
107,142,35 |
|
96 | orange | #ffa500 |
255,165,0 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
97 | orangered | #ff4500 |
255,69,0 |
|
98 | orchid | #da70d6 |
218,112,214 |
|
99 | palegoldenrod | #eee8aa |
238,232,170 |
|
100 | palegreen | #98fb98 |
152,251,152 |
|
101 | paleturquoise | #afeeee |
175,238,238 |
|
102 | palevioletred | #db7093 |
219,112,147 |
|
103 | papayawhip | #ffefd5 |
255,239,213 |
|
104 | peachpuff | #ffdab9 |
255,218,185 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
105 | peru | #cd853f |
205,133,63 |
|
106 | pink | #ffc0cb |
255,192,203 |
|
107 | plum | #dda0dd |
221,160,221 |
|
108 | powderblue | #b0e0e6 |
176,224,230 |
|
109 | rosybrown | #bc8f8f |
188,143,143 |
|
110 | royalblue | #4169e1 |
65,105,225 |
|
111 | saddlebrown | #8b4513 |
139,69,19 |
|
112 | salmon | #fa8072 |
250,128,114 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
113 | sandybrown | #f4a460 |
244,164,96 |
|
114 | seagreen | #2e8b57 |
46,139,87 |
|
115 | seashell | #fff5ee |
255,245,238 |
|
116 | sienna | #a0522d |
160,82,45 |
|
117 | skyblue | #87ceeb |
135,206,235 |
|
118 | slateblue | #6a5acd |
106,90,205 |
|
119 | slategray | #708090 |
112,128,144 |
|
120 | slategrey | #708090 |
112,128,144 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
121 | snow | #fffafa |
255,250,250 |
|
122 | springgreen | #00ff7f |
0,255,127 |
|
123 | steelblue | #4682b4 |
70,130,180 |
|
124 | tan | #d2b48c |
210,180,140 |
|
125 | thistle | #d8bfd8 |
216,191,216 |
|
126 | tomato | #ff6347 |
255,99,71 |
|
127 | turquoise | #40e0d0 |
64,224,208 |
|
128 | violet | #ee82ee |
238,130,238 |
No. | Color | Name | Hex | RGB |
---|---|---|---|---|
129 | wheat | #f5deb3 |
245,222,179 |
|
130 | whitesmoke | #f5f5f5 |
245,245,245 |
|
131 | yellowgreen | #9acd32 |
154,205,50 |
Open this HTML file in an editor:
exercises-start/exercise-214-02-06.html
Write a CSS rule to style example1
with a background-color
value of orange
.
.example1 {
background-color: orange;
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-06.html
CSS2 allowed authors to specify colors in a manner that integrates them into the operating system’s graphic environment.
As of CSS Color Module Level 3, these System Colors were defined as deprecated.
This means that these colors may become obsolete (unusable) in future versions of CSS.
So, you should avoid using these colors where possible.
p { color: ActiveBorder; }
p { color: ActiveCaption; }
p { color: AppWorkspace; }
p { color: Background; }
p { color: ButtonFace; }
p { color: ButtonHighlight; }
p { color: ButtonShadow; }
p { color: ButtonText; }
p { color: CaptionText; }
p { color: GrayText; }
p { color: Highlight; }
p { color: HighlightText; }
p { color: InactiveBorder; }
p { color: InactiveCaption; }
p { color: InactiveCaptionText; }
p { color: InfoBackground; }
p { color: InfoText; }
p { color: Menu; }
p { color: MenuText; }
p { color: Scrollbar; }
p { color: ThreeDDarkShadow; }
p { color: ThreeDFace; }
p { color: ThreeDHighlight; }
p { color: ThreeDLightShadow; }
p { color: ThreeDShadow; }
p { color: Window; }
p { color: WindowFrame; }
p { color: WindowText; }
Open this HTML file in an editor:
exercises-start/exercise-214-02-07.html
Write a CSS rule to style example1
with a background-color
value of Highlight
.
.example1 {
background-color: Highlight;
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-07.html
CSS1 and CSS2 defined the initial value of the border-color
property to be “the value of the color
property”.
However, there is no corresponding keyword, which means that there is no way to specify a border-color
to match the color
.
/* border-color issue */
p {
color: red;
border-width: 1px;
border-style: solid;
border-color: "value of color property";
}
CSS3 allows us to the currentColor
keyword for this purpose.
/* currentColor example */
p {
color: red;
border-width: 1px;
border-style: solid;
border-color: currentColor;
}
Open this HTML file in an editor:
exercises-start/exercise-214-02-08.html
Write a CSS rule to style example1
with a color
value of orange
.
Add a declaration to this rule that is border: 1px solid currentcolor
.
.example1 {
color: orange;
border: 1px solid currentcolor;
}
Write a second CSS rule to style example2
with a color
value of blue
.
Add a declaration to this rule that is border: 1px solid
- without a color value present.
.example2 {
color: blue;
border: 1px solid;
}
Note that in both cases the border is the same color as the text.
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-08.html
CSS1 introduced the transparent
value for the background-color
property.
/* CSS1 transparency */
p { background-color: transparent; }
CSS2 allowed the transparent
value to be applied to the border-color
property.
/* CSS2 transparency */
p { border-color: transparent; }
CSS3 allows the transparent
keyword to be applied to any property that accepts a color value.
/* CSS3 transparency */
p { color: transparent; }
Open this HTML file in an editor:
exercises-start/exercise-214-02-09.html
Write a CSS rule to style example1
with a color
of transparent
.
.example1 {
color: transparent;
}
Note that the text has now become invisible.
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-09.html
In the CSS Color Module Level 4 specification, the <color>
non-property data type is defined as:
<color> =
<hex-color> |
<rgb()> |
<rgba()> |
<hsl()> |
<hsla()> |
<hwb()> |
<lab()> |
<lch()> |
<gray()> |
<device-cmyk()> |
<color-mod()> |
<named-color> |
<deprecated-system-color> |
currentcolor |
transparent
Let’s look at the options that have changed from Level 3 or have been introduced in Level 4.
In CSS Color Module Level 4, 4 and 8-digit hex colors have been added, to specify alpha-transparency.
<hex-color> =
#[ rgba | rrggbbaa ]
For 8-digit notation, the first six digits are interpreted identically to the 6-digit notation.
The last two digits, interpreted as a hexadecimal number, specify the alpha channel of the color.
For example, 00
represents a fully transparent color, and ff
represents a fully opaque color.
/* Full transparent */
p { color: #FFAA0000; }
/* Full opaque */
p { color: #FFAA00FF; }
The 4-digit notation is a shorter variant of the 8-digit notation. This notation is expanded in the same way as the 3-digit notation.
The last digit specifies the alpha channel of the color and is interpreted as a hexadecimal number.
For example, 0
represents a fully transparent color, and f
represents a fully opaque color.
/* Full transparent */
p { color: #FA00; }
/* Full opaque */
p { color: #FA0F; }
Open this HTML file in an editor:
exercises-start/exercise-214-02-10.html
Write a CSS rule to style example1
with a background-color
value of #FFA50077
.example1 {
background-color: #FFA50077;
}
Write a second CSS rule to style example2
with a background-color
value of #0ff7
.example2 {
background-color: #0ff7;
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-10.html
In CSS Color Module Level 4, rgb()
and rgba()
are now aliases of each other (both have an optional alpha value).
Both rgb()
and rgba()
have a new syntax consisting of three space-separated arguments and an optional slash-separated opacity.
<rgb()> =
rgb(
[ <percentage>{3} | <number>{3} ]
[ / <alpha-value> ]?
)
<rgba()> =
rgba(
[ <percentage>{3} | <number>{3} ]
[ / <alpha-value> ]?
)
The <alpha-value>
now accepts <percentage>
as well as <number>
.
<alpha-value> =
<number> | <percentage>
Here are some examples using the rgb()
version only:
/* Three values only */
p { color: rgb(100% 100% 100%); }
p { color: rgb(255 255 255); }
/* Alpha transparency as a number */
p { color: rgb(100% 100% 100% / .5); }
p { color: rgb(255 255 255 / .5); }
/* Alpha transparency as a percent */
p { color: rgb(100% 100% 100% / 50%); }
p { color: rgb(255 255 255 / 50%); }
Note that this exercise will only work if you are using the very latest browsers such as Chrome Canary or Firefox nightly.
Open this HTML file in an editor:
exercises-start/exercise-214-02-11.html
Write a CSS rule to style example1
with a background-color
value of rgb(255 165 0)
Note that there are no commas between each of the values.
.example1 {
background-color:
rgb(255 165 0);
}
Write a second CSS rule to style example2
with a background-color
value of rgb(100% 65% 0%)
.example2 {
background-color:
rgb(100% 65% 0%);
}
Write a third CSS rule to style example3
with a background-color
value of rgb(255 165 0 / .5)
Note that there is a slash separating the three RGB values and the alpha-transparency value.
In this case, the alpha-transparency is set with a number value.
.example3 {
background-color:
rgb(255 165 0 / .5);
}
Write a fourth CSS rule to style example4
with a background-color
value of rgb(255 165 0 / 50%)
Note that in this case, the alpha-transparency is set with a percentage value.
.example4 {
background-color:
rgb(255 165 0 / 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-11.html
In CSS Color Module Level 4, hsl()
and hsla()
are now aliases of each other (both have an optional alpha).
Both hsl()
and hsla()
have a new syntax consisting of three space-separated arguments and an optional slash-separated opacity.
<hsl()> =
hsl(
<hue>
<percentage>
<percentage>
[ / <alpha-value> ]?
)
<hsla()> =
hsla(
<hue>
<percentage>
<percentage>
[ / <alpha-value> ]?
)
Both hsl()
and hsla()
functions now accept <angle>
as well as <number>
for hues.
<hue> =
<number> | <angle>
Here are some examples using the hsl()
version only:
/* Hue as a number */
p { color: hsl(280 100% 50%); }
/* Hue in degrees */
p { color: hsl(280deg 100% 50%); }
/* Alpha transparency as a number */
p { color: hsl(280 100% 50% / .5); }
/* Alpha transparency as a percent */
p { color: hsl(280 100% 50% / 50%); }
Note that this exercise will only work if you are using the very latest browsers such as Chrome Canary or Firefox nightly.
Open this HTML file in an editor:
exercises-start/exercise-214-02-12.html
Write a CSS rule to style example1
with a background-color
value of hsl(39 100% 50%)
Note that there are no commas between each of the values.
.example1 {
background-color:
hsl(39 100% 50%);
}
Write a second CSS rule to style example2
with a background-color
value of hsl(39deg 100% 50%)
Note that hue
value is written as an angle.
.example2 {
background-color:
hsl(39deg 100% 50%);
}
Write a third CSS rule to style example3
with a background-color
value of hsl(39 100% 50% / .5)
Note that there is a slash separating the three HSL values and the alpha-transparency value.
In this case, the alpha-transparency is set with a number value.
.example3 {
background-color:
hsl(39 100% 50% / .5);
}
Write a fourth CSS rule to style example4
with a background-color
value of hsl(39 100% 50% / 50%)
Note that in this case, the alpha-transparency is set with a percentage value.
.example4 {
background-color:
hsl(39 100% 50% / 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-12.html
<hwb()>
describes colors with a starting hue, then a degree of whiteness and blackness to mix into the base hue.
The syntax of the hwb()
function is:
<hwb()> =
hwb(
<hue>,
<percentage>,
<percentage>
[, <alpha-value> ]?
)
The first argument specifies the hue, and is interpreted identically to hsl()
.
Hue can be defined as an <angle>
or a <number>
.
<hue> =
<number> | <angle>
The second argument specifies the amount of white to mix in, as a percentage from 0%
(no whiteness) to 100%
(full whiteness).
The third argument specifies the amount of black to mix in, also from 0%
(no blackness) to 100%
(full blackness).
The fourth argument specifies the alpha channel of the color. If omitted, it defaults to 100%
.
Here are some examples using hwb()
:
/* Hue as a number */
p { color: hwb(280, 100%, 50%); }
/* Hue in degrees */
p { color: hwb(280deg, 100%, 50%); }
/* Alpha transparency as a number */
p { color: hwb(280, 100%, 50%, .5); }
/* Alpha transparency as a percent */
p { color: hwb(280, 100%, 50%, 50%); }
Note that this exercise will probably not work in even the latest browsers such as Chrome Canary or Firefox nightly at this point.
Open this HTML file in an editor:
exercises-start/exercise-214-02-13.html
Write a CSS rule to style example1
with a background-color
value of hwb(39, 0, 0)
.example1 {
background-color:
hwb(39, 0, 0);
}
Write a second CSS rule to style example2
with a background-color
value of hwb(39deg, 0, 0)
Note that hue
value is written as an angle.
.example2 {
background-color:
hwb(39deg, 0, 0);
}
Write a third CSS rule to style example3
with a background-color
value of hwb(39, 0, 0, .5)
Note that in this case, the alpha-transparency is set with a number value.
.example3 {
background-color:
hwb(39, 0, 0, .5);
}
Write a fourth CSS rule to style example4
with a background-color
value of hwb(39, 0, 0, 50%)
Note that in this case, the alpha-transparency is set with a percentage value.
.example4 {
background-color:
hsl(39 100% 50% / 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-13.html
CSS allows colors to be directly expressed in Lab.
The syntax of the lab()
function is:
<lab()> =
lab(
<number>
<number>
<number>
[, <alpha-value>]?
)
The first argument (l)
specifies the CIE Lightness. (l)
is constrained to the range between 0
and 100
.
A value of 0
would produce the darkest possible color, and a value of 100%
would produce the lightest possible color.
The second argument (a)
specifies the green to red color spectrum.
A positive number would produce a redder color, and a negative number would produce a greener color.
The third argument (b)
specifies the blue to yellow color spectrum.
A positive number would produce a yellower color, and a negative number would produce a bluer color.
The second (a)
and third (b)
values are theoretically unbounded. However, in practice, they do not exceed positive or negative 160
.
There is an optional fourth alpha value, separated by a comma. If omitted, it defaults to 100%
.
Here are some examples using lab()
:
/* Three values only */
p { color: lab(75 24 79); }
/* Alpha transparency as a number */
p { color: lab(75 24 79, .5); }
/* Alpha transparency as a percent */
p { color: lab(75 24 79, 50%); }
Note that this exercise will probably not work in even the latest browsers such as Chrome Canary or Firefox nightly at this point.
Open this HTML file in an editor:
exercises-start/exercise-214-02-14.html
Write a CSS rule to style example1
with a background-color
value of lab(75 24 79)
.example1 {
background-color:
lab(75 24 79);
}
Write a second CSS rule to style example2
with a background-color
value of lab(75 24 79, .5)
Note that in this case, the alpha-transparency is set with a number value.
.example2 {
background-color:
lab(75 24 79, .5);
}
Write a third CSS rule to style example3
with a background-color
value of lab(75 24 79, 50%)
Note that in this case, the alpha-transparency is set with a percentage value.
.example3 {
background-color:
lab(75 24 79, 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-14.html
CSS allows colors to be directly expressed in lch.
The syntax of the lch()
function is:
<lch()> =
lch(
<number>
<number>
<number>
[, <alpha-value>]?
)
The first argument (l)
specifies the CIE Lightness. (l)
is constrained to the range between 0
and 100
.
A value of 0
would produce the darkest possible color, and a value of 100%
would produce the lightest possible color.
The second argument (c)
specifies the chroma or relative saturation of the color.
This (c)
is an unsigned number, theoretically unbounded (but in practice does not exceed 230
).
The third argument (h)
specifies the hue and is constrained to the range between 0
and 360
.
There is an optional fourth alpha value, separated by a comma. If omitted, it defaults to 100%
.
Here are some examples using lch()
:
/* Three values only */
p { color: lch(75 82 73); }
/* Alpha transparency as a number */
p { color: lch(75 82 73, .5); }
/* Alpha transparency as a percent */
p { color: lch(75 82 73, 50%); }
Note that this exercise will probably not work in even the latest browsers such as Chrome Canary or Firefox nightly at this point.
Open this HTML file in an editor:
exercises-start/exercise-214-02-15.html
Write a CSS rule to style example1
with a background-color
value of lch(75 82 73)
.example1 {
background-color:
lch(75 82 73);
}
Write a second CSS rule to style example2
with a background-color
value of lch(75 82 73, .5)
Note that in this case, the alpha-transparency is set with a number value.
.example2 {
background-color:
lch(75 82 73, .5);
}
Write a third CSS rule to style example3
with a background-color
value of lch(75 82 73, 50%)
Note that in this case, the alpha-transparency is set with a percentage value.
.example3 {
background-color:
lch(75 82 73, 50%);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-15.html
The gray()
functional notation simplifies a fully desaturated color so that only a single numerical parameter is required.
The syntax of the gray()
function is:
<gray()> =
gray(
<number>
[, <alpha-value>]?
)
The first argument specifies the shade of gray.
The second optional argument specifies the alpha channel of the gray. If omitted, it defaults to 100%
.
Here are some examples using gray()
:
/* Gray value only */
p { color: gray(50); }
/* Alpha transparency as a number */
p { color: gray(50, .5); }
/* Alpha transparency as a percent */
p { color: gray(50, 50%); }
Note that this exercise will probably not work in even the latest browsers such as Chrome Canary or Firefox nightly at this point.
Open this HTML file in an editor:
exercises-start/exercise-214-02-16.html
Write a CSS rule to style example1
with a background-color
value of gray(30)
.example1 {
background-color: gray(30);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-16.html
The device-cmyk()
function allows authors to specify a color for print-based media where CMYK is required.
The syntax of the device-cmyk()
function is:
<device-cmyk()> =
device-cmyk(
<cmyk-component>#{4} ,
<alpha-value>? ,
<color>?
)
<cmyk-component>
requires four comma-separated values written in order for cyan, magenta, yellow, and black components.
These values can be specified as numbers or percentages value.
<cmyk-component> =
<number> | <percentage>
The fifth argument specifies an optional alpha channel of the color. If omitted, it defaults to 100%
.
The sixth argument specifies an optional fallback color.
This argument is used when the user agent cannot accurately transform the CMYK color to RGB.
Here are some examples using device-cmyk()
:
/* CMYK values as numbers */
p { color:
device-cmyk(40, 50, 20, 60); }
/* CMYK values as percents */
p { color:
device-cmyk(40%, 50%, 20%, 60%); }
/* Alpha transparency as a number */
p { color:
device-cmyk(40, 50, 20, 60, .5); }
/* Alpha transparency as a percent */
p { color:
device-cmyk(40, 50, 20, 60, 50%); }
/* Fallback color */
p { color:
device-cmyk(40, 50, 20, 60, .5, red); }
Note that this exercise will probably not work in even the latest browsers such as Chrome Canary or Firefox nightly at this point.
Open this HTML file in an editor:
exercises-start/exercise-214-02-17.html
Write a CSS rule to style example1
with a background-color
value of device-cmyk(40, 50, 20, 60)
.example1 {
background-color:
device-cmyk(40, 50, 20, 60);
}
Write a second CSS rule to style example2
with a background-color
value of device-cmyk(40%, 50%, 20%, 60%)
Note that in this case the CMYK values are written as percentage values.
.example2 {
background-color:
device-cmyk(40%, 50%, 20%, 60%);
}
Write a third CSS rule to style example3
with a background-color
value of device-cmyk(40, 50, 20, 60, .5)
Note that in this case the alpha-trasparancy value is written as a number.
.example3 {
background-color:
device-cmyk(40, 50, 20, 60, .5);
}
Write a fourth CSS rule to style example4
with a background-color
value of device-cmyk(40, 50, 20, 60, 50%)
Note that in this case the alpha-trasparancy value is written as a percentage.
.example4 {
background-color:
device-cmyk(40, 50, 20, 60, 50%);
}
Write a fifth CSS rule to style example5
with a background-color
value of device-cmyk(40, 50, 20, 60, .5, red)
Note that a fallback color has been added as the last value.
.example5 {
background-color:
device-cmyk(40, 50, 20, 60, .5, red);
}
Check your work against the finished HTML file:
exercises-finished/exercise-214-02-17.html
When specifying a color scheme for a site, authors often want to produce an array of colors that are related to a core color.
The color-mod()
function takes an existing color and applies zero or more “color adjusters” to it.
This specifies how the color is manipulated in some way.
The computed value of a color-mod()
function is the color produced by applying all the <color-adjuster>
arguments to the base color.
The syntax of the color-mod()
function is:
<color-mod()> =
color-mod(
[ <color> | <hue> ]
<color-adjuster>*
)
This means you can define a base color
or a hue
with zero or more <color-adjuster>
arguements.
/* Using a base color */
p { color:
color-mod(pink red(20); }
/* Using a base hue as a number */
p { color:
color-mod(50 red(20); }
/* Using a base hue as an angle */
p { color:
color-mod(20deg red(20); }
/* Multiple color-adjusters */
p { color:
color-mod(50 red(20) green(20)); }
The syntax for <color-adjuster>
is very complex as there are a wide range of options.
For this reason, the options will be explored one at a time.
<color-adjuster> =
[ red( | green( | blue( | alpha( | a( ]
['+' | '-']?
[ <number> | <percentage> ]
)
The base color in the following example is set to a color
value of pink
.
This base color can be adjusted by the red
, green
, blue
, alpha
channels. There is also a shorthand alpha channel option (a)
.
p { color: color-mod(pink red()); }
p { color: color-mod(pink green()); }
p { color: color-mod(pink blue()); }
p { color: color-mod(pink alpha()); }
p { color: color-mod(pink a()); }
The adjustment values can be positive or negative numbers or percentage values.
p { color: color-mod(pink red(20)); }
p { color: color-mod(pink red(+ 20)); }
p { color: color-mod(pink red(- 20)); }
p { color: color-mod(pink red(20%)); }
<color-adjuster> =
[ red( | green( | blue( | alpha( | a( ]
'*'
<percentage>
)
The red
, green
, blue
and alpha
channels can be multiplied by a percentage value.
p { color: color-mod(pink red(* 20%)); }
p { color: color-mod(pink green(* 20%)); }
p { color: color-mod(pink blue(* 20%)); }
p { color: color-mod(pink alpha(* 20%)); }
p { color: color-mod(pink a(* 20%)); }
<color-adjuster> =
rgb(
['+' | '-']
[<number> |
<percentage>]{3}
)
This method allows you to adjusts the base color in the red
, green
, and blue
channels simultaneously.
Three numbers or percentage values are required.
The first value adjusting the red channel, the second value adjusting the green channel, and the third value adjusting the blue channel.
p { color:
color-mod(pink rgb(20 15 5)); }
p { color:
color-mod(pink rgb(20% 15% 5%)); }
p { color:
color-mod(pink rgb(+ 20 15 5)); }
p { color:
color-mod(pink rgb(- 20 15 5)); }
<color-adjuster> =
rgb(
['+' | '-']
<hash-token>
)
This method also allows you to adjusts the base color in the red
, green
, and blue
channels simultaneously.
However, instead of using three numbers or percentage values, the three channels are specified in hexadecimal format.
p { color:
color-mod(pink rgb(#FFAA00)); }
p { color:
color-mod(pink rgb(+ #FFAA00)); }
p { color:
color-mod(pink rgb(- #FFAA00)); }
<color-adjuster> =
rgb(
'*'
<percentage>
)
The red
, green
, blue
and alpha
channels can be multiplied by a percentage value simultaneously.
p { color:
color-mod(pink rgb(* 20%)); }
<color-adjuster> =
[ hue( | h( ]
['+' | '-' | '*']?
<angle>
)
This option sets or adjusts the hue
of the base color, when base color is interpreted as an HSL color.
p { color:
color-mod(hsl(28 1% 5%) hue( 20deg)); }
p { color:
color-mod(hsl(28 1% 5%) hue(+ 20deg)); }
p { color:
color-mod(hsl(28 1% 5%) hue(- 20deg)); }
p { color:
color-mod(hsl(28 1% 5%) hue(* 20deg)); }
<color-adjuster> =
[ saturation( | s( ]
['+' | '-' | '*']?
<percentage>
)
This option sets or adjusts the saturation
of the base color, when base color is interpreted as an HSL or HWB color.
p { color:
color-mod(hsl(2 1% 5%) saturation( 2%));
}
p { color:
color-mod(hsl(2 1% 5%) saturation(+ 2%));
}
p { color:
color-mod(hsl(2 1% 5%) saturation(- 2%));
}
p { color:
color-mod(hsl(2 1% 5%) saturation(* 2%));
}
The saturation
keyword can also be written in shorthand form (s)
.
p { color:
color-mod(hsl(28 1% 5%) s( 20%)); }
p { color:
color-mod(hsl(28 1% 5%) s(+ 20%)); }
p { color:
color-mod(hsl(28 1% 5%) s(- 20%)); }
p { color:
color-mod(hsl(28 1% 5%) s(* 20%)); }
<color-adjuster> =
[ lightness( | l( ]
['+' | '-' | '*']?
<percentage>
)
This option sets or adjusts the lightness
of the base color, when base color is interpreted as an HSL or HWB color.
p { color:
color-mod(hsl(2 1% 5%) lightness( 20%));
}
p { color:
color-mod(hsl(2 1% 5%) lightness(+ 20%));
}
p { color:
color-mod(hsl(2 1% 5%) lightness(- 20%));
}
p { color:
color-mod(hsl(2 1% 5%) lightness(* 20%));
}
The lightness
keyword can also be written in shorthand form (l)
.
p { color:
color-mod(hsl(2 1% 5%) l( 2%));
}
p { color:
color-mod(hsl(2 1% 5%) l(+ 2%));
}
p { color:
color-mod(hsl(2 1% 5%) l(- 2%));
}
p { color:
color-mod(hsl(2 1% 5%) l(* 2%));
}
<color-adjuster> =
[ whiteness( | w( ]
['+' | '-' | '*']?
<percentage>
)
This option sets or adjusts the whiteness
of the base color, when base color is interpreted as an HSL or HWB color.
p {
color: color-mod(hsl(2 1% 5%) whiteness( 2%));
}
p {
color: color-mod(hsl(2 1% 5%) whiteness(+ 2%));
}
p {
color: color-mod(hsl(2 1% 5%) whiteness(- 2%));
}
p {
color: color-mod(hsl(2 1% 5%) whiteness(* 2%));
}
The whiteness
keyword can also be written in shorthand form (w)
.
p { color:
color-mod(hsl(28 1% 5%) w( 20%)); }
p { color:
color-mod(hsl(28 1% 5%) w(+ 20%)); }
p { color:
color-mod(hsl(28 1% 5%) w(- 20%)); }
p { color:
color-mod(hsl(28 1% 5%) w(* 20%)); }
<color-adjuster> =
[ blackness( | b( ]
['+' | '-' | '*']?
<percentage>
)
This option sets or adjusts the blackness of the base color, when base color is interpreted as an HSL or HWB color.
p { color:
color-mod(hsl(2 1% 5%) blackness( 2%));
}
p { color:
color-mod(hsl(2 1% 5%) blackness(+ 2%));
}
p { color:
color-mod(hsl(2 1% 5%) blackness(- 2%));
}
p { color:
color-mod(hsl(2 1% 5%) blackness(* 2%));
}
The blackness
keyword can also be written in shorthand form (b)
.
p { color:
color-mod(hsl(2 1% 5%) b( 2%)); }
p { color:
color-mod(hsl(2 1% 5%) b(+ 2%)); }
p { color:
color-mod(hsl(2 1% 5%) b(- 2%)); }
p { color:
color-mod(hsl(2 1% 5%) b(* 2%)); }
<color-adjuster> =
tint(
<percentage>
)
This option mixes the base color with pure white to produce a lighter version of the base color.
p { color: color-mod(pink tint(20%)); }
<color-adjuster> =
shade(
<percentage>
)
This option mixes the base color with pure black to produce a darker version of the base color.
p { color: color-mod(pink shade(20%)); }
<color-adjuster> =
blend(
<color>
<percentage>
[rgb | hsl | hwb]?
)
This option mixes the base color with the given color to produce an intermediate color.
The final optional argument specifies which color space to blend the colors in - rgb
, hsl
or hwb
.
p { color:
color-mod(pink blend(blue 20%)); }
p { color:
color-mod(pink blend(blue 20% rgb)); }
p { color:
color-mod(pink blend(blue 20% hsl)); }
p { color:
color-mod(pink blend(blue 20% hwb)); }
<color-adjuster> =
contrast(
<percentage>?
)
This option finds a color that contrasts with the base color sufficiently to satisfy accessibility guidelines.
p { color: color-mod(pink contrast(20%)); }
Site Twitter Github Slideshare Linkedin