HOWCOLORS.WORK
HOWCOLORS.WORK
Buy on Leanpub

Intro

This booklet helps you understand the current and future color notations1 in CSS.

The aim is to teach you all different color notations available in CSS. Tell you whether the browsers support these notations already and show you some code examples.

The color spaces2, which CSS uses in these different ways to express colors are not part of this booklet. In some places I mention them but do not explain any color space in detail.

To make full use of this booklet, all you need to know is how to create an HTML tag and apply CSS to it. All the different color options you will learn here!

Most of the CSS colors are in the sRGB3 color space, except Lab and LCH, where the computed value is a CIELab4 color. Not to forget the new color() function. This makes it possible to pass your own or predefined color profiles!

All these color notations offer an optional parameter for the alpha value. The alpha value indicates how transparent the color is. In the booklet, there is an extra section in each chapter that shows how to use the alpha values.

Current Ways to Express Colors!

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Hex

The hex color notation allows you to define sRGB colors as hexadecimal numbers. It starts with a hash #, and then you have the three primary colors, red, green and last the blue color.

The primary colors, red, green, and blue.

The hex notation only allows ten numerals (0-9) and six letters (a-f). Where 00 would be 0 in the RGB functional notation, and FF would be 255.
The higher the value of a primary color is, the brighter that color is. This means that the hex color #000000 has zero brightness in all three primary colors and is black. The color #FFFFFF is the opposite as all colors have the full light, which leads to white.

A example of brighter and darker versions of red #FF0000

Syntax

Breakdown
1 2 3 4
# 44 2B 82
1

The # indicates that the following is a hex color notation.

2
The red part of the color, two hexadecimal characters (0–9, A–F).
3
The green part of the color, two hexadecimal characters.
4
The blue part of the color, two hexadecimal characters.

Alpha

Breakdown
1 2 3 4 5
# 44 2B 82 77
1 till 4
These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.
5

The opacity part of the color, two hexadecimal characters. Where FF = 100%, CC = 80%, 99 = 60%, 66 = 40%, 33 = 20%, and 00 = 0%.

Code Samples

Result with the color values #442B82 and #442B8277
1 :root{
2   --color:#442B82;
3   --color-alpha:#442B8277;
4 }

Three-digit notation

It is possible to use a three-digit or four-digit (including the alpha value) notation. In this short-form the single digits get doubled. So, for example, #0FC would be #00FFCC in the standard form. The downside is you only have 4096 colors available in the short-form.

Three-digit Syntax

Breakdown
1 2 3 4
# 8 4 0
1

The # indicates that the following is a hex color notation.

2
The red part of the color, one hexadecimal character (0–9, A–F).
3
The green part of the color, one hexadecimal character.
4
The blue part of the color, one hexadecimal character.

Alpha

Breakdown
1 2 3 4 5
# 8 4 0 7
1 till 4
These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.
5

The opacity part of the color, one hexadecimal character. Where F = 100%, C = 80%, 9 = 60%, 6 = 40%, 3 = 20%, and 0 = 0%.

Code Samples

Result with the color values #840 and #8407
1 :root{
2   --color:#840;
3   --color-alpha:#8407;
4 }

Browser Support

The hex notation, is supported in all browsers. The four and eight-digit short-form has support in all major browsers.

Exercise

  1. How many characters can a hex color have (without #)?

    1. 4
    2. 5
    3. 2
  2. The hexadecimal alpha value 66 in percent?

  3. How many colors are available in the three-digit notation?

    1. Same as in the long format
    2. 16.777.216
    3. 4096

RGB

The RGB functions build the colors from a combination of red, green, and blue. Each of these color values defines the intensity of the color as an integer value. The values range from 0 to 255 or from 0% to 100% percent. If you pass 0 to all three values you will get black, if you pass 255 to all you get white.

The computed value of the following functions is a color in the sRGB color space.

The Primary Colors

The primary colors, red, green, and blue.

Red

Red Green Blue
255 0 0

If you only set the red value to the highest possible value 255, it gives you the brightest red, which is possible.

Green

Red Green Blue
0% 100% 0%

Here only the green value is set to 100%, which gives you the brightest green possible.

Blue

Red Green Blue
0 0 255

The same logic applies for blue, so by setting the value to 255 and the other two values to 0, you get the brightest blue.

Old Syntax

Breakdown
1 2 3 4 5 6 7 8 9 10
rgb ( 15 ,   64 ,   174 )
1

The function starts with an rgb.

2
Following the function name, an opening bracket.
3

The red value of the color can be a number or a percentage. The numbers are in the range of 0 - 255, where 255 equals 100%.

4
A comma as the separator between the color values.
5
An optional space.
6
The green value of the color. Allowed are the same values as for red.
7
A comma as the separator between the color values.
8
An optional space.
9
The blue value of the color. Allowed are the same values as for red and green.
10
The functions closing bracket.

Alpha

Breakdown
1 2 3 4 5 6 7 8 9 10 11 12 13
rgba ( 15 ,   64 ,   174 ,   80% )
1

If you want to add the colors alpha value, the old syntax’s function needs to start with a rgba.

2 till 9
These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.
10
A comma as the separator between the color values and the alpha value.
11
An optional space.
12

You can define the alpha (opacity) value as a number between 0 and 1 or as a percentage. For example, 1 or 100% means full opacity, while 0.5 or 50% is means half opacity.

13
The functions closing bracket.

Browser Support

All major browsers support the RGB functional notation.

Code Samples

Result with the color values rgb(15, 64, 174) and rgba(15, 64, 174, 80%)
1 :root{
2   --color:rgb(15, 64, 174);
3   --color-alpha:rgba(15, 64, 174, 80%);
4 }

New Syntax

Breakdown
1 2 3 4 5 6 7 8
rgb ( 47   27   41 )
1

Same as the old syntax, the new one starts an rgb.

2

An opening bracket follows the rgb.

3

The red value of the color can be a number or a percentage. The numbers are in the range of 0 - 255, where 255 equals 100%.

4
Space as the separator between the color values.
5
The green value of the color. Allowed are the same values as for the red (3) part.
6
Space as the separator between the color values.
7
The blue value of the color also can be a number or a percentage.
8
The functions closing bracket.

Alpha

Breakdown
1 2 3 4 5 6 7 8 9 10 11 12
rgb ( 47   27   41   /   0.6 )
1

In the new syntax, the functional notation, including the alpha value, also starts with rgb.

2 till 7
These parts are the same as for the color notation without an alpha value. To get details have a look at the section above.
8
Space as the separator between the color values and the alpha value.
9

A / as the separator between the color values and the alpha value.

10
Space.
11

You can define the alpha (opacity) value as a number between 0 and 1 or as a percentage. For example, 1 or 100% means full opacity, while 0.5 or 50% means half opacity.

12
The functions closing bracket.

Browser Support

The browser support for the space-separated functional color notations is excellent. All major browsers support it already. For details check caniuse.com.

Code Samples

Result with the color values rgb(47 27 41) and rgb(47 27 41 / 0.6)
1 :root{
2   --color:rgb(47 27 41);
3   --color-alpha:rgb(47 27 41 / 0.6);
4 }

Exercise

  1. Which notation is invalid?

    1. rgb(55 10 0)
    2. rgba(200, 73, 12, .75)
    3. rgb(255 100 100, 100%)
    4. rgb(100% 10% 0%)
  2. The G in RGB stands for?

  3. You can pass a percentage from 0 - 100%, but what is the range for integer values?

    1. 0 - 255
    2. 0 - 100
    3. 0 - 360

HSL

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Old Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

New Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Keywords

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Transparent

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Sample

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Current Color

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Sample

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Named Colors

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Sample

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

New Ways to Express Colors!

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples Update

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

HWB

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Lab

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

LCH

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Color

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Gray

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Syntax

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Alpha

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Browser Support

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Code Samples

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Exercise

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Cool Ways to Use Colors!

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Text Gradient

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Box Shadows as Borders

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.

Notes

Intro

Answers to Exercises

Current Ways to Express Colors!

This content is not available in the sample book. The book can be purchased on Leanpub at http://leanpub.com/howcolorswork.