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.

Lab color diagram

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.

Lch color diagram

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

Next deck

214-03: Property - box-shadow