HOWCOLORS.WORK
HOWCOLORS.WORK
Buy on Leanpub

Intro

This short booklet helps you to understand the current and future color notations in CSS.

The aim is to teach you all different possible color notations and tell you whether the browsers support them yet and show you some CSS code examples.

The color spaces, CSS uses in these different ways to express colors are not part of this booklet. They are mentioned briefly but not explained in detail.

To make full use of this booklet, you should already have basic HTML and CSS knowledge.

Most of the CSS colors are in the sRGB color space, except Lab and LCH, where the computed value is a CIE Lab color. And then there is the new color() function, with which it is possible to pass your own or predefined color profiles.

All of these color notations offer an optional parameter for the alpha value, which 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.

Hex

The Hex color notation allows you to define sRGB colors as hexadecimal numbers. It is shorter than the RGB functional notation and as it is in the same color space can be easily converted to RGB. The Hex notation starts with a hash #, and then you have the three primary colors, red, the green value and last the blue color.

The primary colors, red, green, and blue.

The # indicates that the following is a hex color. The rest of the string #FF00AA is representing the colors red, green, and blue, valid characters in the hex color are only 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, which means that the hex color #000000 has zero brightness in all three primary colors and is therefore 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

1 2 3 4
# F9 00 AB
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

1 2 3 4 5
# F9 00 AB 66
1 till 4
is the same as for the notation without alpha value.
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

/* Without Alpha */
div { 
    background-color:#FF00BB;
    color:#FF00BB;
}

/* With Alpha */
div { 
    background-color:#FF00BBFF;
    color:#FF00BBFF;
}

Shorthand

It is possible to use a shorthand three-digit or four-digit (including the alpha value) notation, where the single digits get doubled. So, for example, #0FC would be #00FFCC in the standard form. In the Shorthand format, there are only 4096 possible colors.

Shorthand Syntax

1 2 3 4
# F 0 B
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

1 2 3 4 5
# F 0 B 6
1 till 4
is the same as for the notation without alpha value.
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

/* Without Alpha */
div { 
    background-color:#F0B;
    color:#F0B;
}

/* With Alpha */
div { 
    background-color:#F0BF;
    color:#F0BF;
}

Browser Support

The RGB hexadecimal notation, in short Hex, is supported in all browsers. The 4 & 8 character hex color notation with alpha value has support in all major browsers, so if you do not need IE, you can use it!

RGB

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

The Primary Colors

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

Red

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

Green

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

Blue

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.

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.

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.

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.

Lab

In the CSS Color Module Level 4 working draft, you can find that it soon is possible to define colors in the Lab color space. Unlike RGB, the Lab color space represents the complete range of colors a human can see.

Syntax

1 2 3 4 5 6 7 8
lab ( 50%   100   160 )
1

The function starts with a lab.

2
An opening bracket follows the function name.
3

The first value is the CIE lightness; typically, it is between 0% (black) and 100% (white). Still, it can exceed that range for extra bright whites up to 400%.

4
Space as the separator between the color values.
5
The second parameter is the distance along the a-axises in the Lab colorspace. There are positive and negative values allowed.
6
Space as the separator between the color values.
7
The third parameter is the distance along the b-axises in the Lab colorspace. There are positive and negative values allowed.
8
The functions closing bracket.

Alpha

1 2 3 4 5 6 7 8 9 10 11 12
lab ( 50%   100   160   /   1 )
1 till 7
is the same as for the notation without alpha value.
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

No browser supports this way of expressing colors yet.

Code Samples

/* Without Alpha */
div { 
    background-color:lab(50% 100 160);
    color:lab(50% 100 160);
}

/* With Alpha */
div { 
    background-color:lab(50% 100 160 / 100%);
    color:lab(50% 100 160 / 50%);
}

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.

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.

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.