214-02
Property - color
Slide instructions
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.
Introduction
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.
Color Module Level 3
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.
Color Module Level 3
<hex-color>
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; }
Exercise 1: Write a hex color
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
Color Module Level 3
<rgb()>
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); }
Exercise 2: Write an RGB color
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
Color Module Level 3
<rgba()>
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); }
Exercise 3: Write an RGBA color
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
Color Module Level 3
<hsl()>
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%); }
Exercise 4: Write an HSL color
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
Color Module Level 3
<hsla()>
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); }
Exercise 5: Write an HSLA color
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
Color Module Level 3
<named-color>
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 |
Exercise 6: Write a keyword color
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
Color Module Level 3
<deprecated-system-color>
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; }
Exercise 7: Write a deprecated system color
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
Color Module Level 3
currentcolor
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;
}
Exercise 8: Write a currentcolor color
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
Color Module Level 3
transparent
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; }
Exercise 9: Write a transparent color
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
Color Module Level 4
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.
Color Module Level 4
<hex-color>
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; }
Exercise 10: Write a level 4 hex color
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
Color Module Level 4
<rgb()> and <rgba()>
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%); }
Exercise 11: Write some level 4 RGB colors
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
Color Module Level 4
<hsl()> and <hsla()>
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%); }
Exercise 12: Write some level 4 HSL colors
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
Color Module Level 4
<hwb()>
<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%); }
Exercise 13: Write some level 4 HWB colors
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
Color Module Level 4
<lab()>
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%); }
Exercise 14: Write some level 4 LAB colors
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
Color Module Level 4
<lch()>
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%); }
Exercise 15: Write some level 4 LCH colors
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
Color Module Level 4
<gray()>
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%); }
Exercise 16: Write a level 4 gray color
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
Color Module Level 4
<device-cmyk()>
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); }
Exercise 17: Write some level 4 device-cmyk colors
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
Color Module Level 4
<color-mod()>
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.
Option 1
<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%)); }
Option 2
<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%)); }
Option 3
<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)); }
Option 4
<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)); }
Option 5
<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%)); }
Option 6
<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)); }
Option 7
<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%)); }
Option 8
<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%));
}
Option 9
<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%)); }
Option 10
<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%)); }
Option 11
<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%)); }
Option 12
<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%)); }
Option 13
<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)); }
Option 14
<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%)); }
Russ Weakley
Site Twitter Github Slideshare Linkedin