CSS3COLORS

Before we talk about CSS3colors, we need to review

CSS2.1 colors.

CSS2.1Colors

CSS2.1 allowed colors to bedefined using six different types

of values.

KeywordsSix-digit hexadecimal notationThree-digit hexadecimal notationRGB numeric notationRGB percentage notationSystem colors

123456

1. Keywords

CSS2.1 allowed 17 keywords:aqua, black, blue, fuchsia, gray,green, lime, maroon, navy, olive,orange, purple, red, silver, teal,

white, and yellow.

Example keywords:

p { color: aqua; }p { color: black; }p { color: blue; }p { color: fuchsia; }p { color: gray; }p { color: green; }p { color: lime; }

2. Six-digithexadecimal

notation

Six-digit hexadecimal notation(#rrggbb):

p { color: #AE03FF; }

3. Three-digithexadecimal

notation

Three-digit hexadecimalnotation allows authors to

replace double ‘rr’, ‘gg’ or ‘bb’values with single values (#rgb):

p { color: #663399; }p { color: #639; }p { color: #aaff55; }p { color: #af5; }

The six-digit RGB notation(#rrggbb) can only by converted

into three-digit form (#rgb) if eachthe rr, gg, and bb values each

use duplicate digits. Many six-digit values cannot be converted.

p { color: #953d3d; }p { color: #34d209; } Cannot convert

Cannot convert

4. RGB numericnotation

RGB numeric notationuses 'rgb(' followed by a comma-

separated list of three integervalues, followed by ‘)’.

p { color: rgb(109, 22, 255); }

RGB numeric notation allowsvalues between 0 (black) and 255

(white). No unit identifier isrequired.

5. RGB percentagenotation

RGB percentage notation uses'rgb(' followed by a comma-

separated list of three percentagevalues, followed by ')'.

p { color: rgb(0%,10%,100%); }

RGB percentage notationallows values between 0%

(black) and 100% (white). Allvalues must include % symbol.

6. System colors

CSS2.1 allowed System colorsto be used to specify colors thatmatched the operating system's

graphic style.

p { color: ButtonFace; }

Note:System Colors have beendeprecated in favor of the

CSS3 UI “appearance’property for specifying the

complete look of userinterface related elements.

CSS3 Colors

With CSS3, we can now applycolours using eight new

methods:

Extended color keywords

Opacity

RGBA numeric notation

RGBA percentage notation

HSL notation

HSLA notation

The ‘currentColor’ keyword

The ‘transparent’ keyword

12345678

1. Extended ColorKeywords

While CSS2.1 allowed us to use17 basic color keywords, CSS3allows us to use and additional

130 extended color keywords.This is a total of 147 keywords.

Example color keywords:

p { color: peru; }p { color: salmon; }p { color: thisle; }p { color: firebrick; }p { color: ghostwhite; }p { color: goldenrod; }p { color: honeydew; }

Quick tip:Do you have trouble spelling the

keyword gray/grey?Well, CSS3 color keywords have

got you covered. They includegray, grey, darkgrey and

darkgray.

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8, 9

SupportedYes

Yes

Yes

Yes

Yes

2. Opacity

Opacity allows us to dictate theopacity/transparency of

elements.

Opacity values range from 0 (or0.0), which is fully transparent to1 (or 1.0) which is 100% opaque.

p { opacity: 0.3; }

The opacity value must be anumber, which is zero or more

digits followed by a dot (.)followed by one or more digits.

For example:

0.5.5

Be aware that this property willset the opacity for the elementand all of it’s child elements.

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

3. RGBA numericnotation

With CSS3 we can add an alphachannel to RGB values. Thisallows us to set our colors to

specific levels of opacity.

While the ‘opacity’ propertysets the opacity/transparency ofentire elements, RGBA is used

to set the opacity of colorvalues only.

RGBA numeric notationuses 'rgba(' followed by a

comma-separated list of threeinteger values, followed by analpha value followed by a ‘)’.

p { color: rgba(100, 66, 255, 1); }

The three integer values must bebetween 0 (black) and 255(white). No unit identifier is

required. For example:

2550

This alpha value must be anumber, which is zero or more

digits followed by a dot (.)followed by one or more digits.

For example:

0.5.5

An alpha value of 1 meansthe color will be fully opaque(displayed as a solid color).An alpha value of 0.5 will be

half opaque.

You should always include abackup for browsers that do not

support this property.

p{

color: rgb(100, 66, 255); color: rgba(100, 66, 255, 0.5);

}

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

4. RGBA percentagenotation

RGBA percentage notation uses 'rgba(' followed by a

comma-separated list of threepercentage values, followed byan alpha value followed by a ‘)’.

p { color: rgba(10%, 6%, 20%, 1); }

The three percentage valuesmust be between 0% (black) and

100% (white). All values mustinclude % symbol. For example:

100%0%

This alpha value must be anumber, which is zero or more

digits followed by a dot (.)followed by one or more digits.

For example:

0.5.5

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

5. HSL notation

HSL notation allows us to definecolors using hue, saturation

and lightness.

HSL notation is written like this:

p { color: hsl(280,100%,50%); }

The first value is for Hue andmust be a integer value between

0 and 359.

p { color: hsl(280,100%,50%); }

The second value is forSaturation and must be defined

as a percentage value.

p { color: hsl(280,100%,50%); }

The third value is Lightnessand must also be defined as a

percentage value.

p { color: hsl(280,100%,50%); }

These three HSL values mustbe separated by commas.

Whitespace after the commasis optional.

p { color: hsl(280,100%,50%); }

You should always include abackup color that is not HSL for

older browsers.

p {

color: rgb(85,0,128);color: hsl(280,100%,50%);

}

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

6. HSLA notation

Like RGBA, we can add an alphachannel to HSL values. Thisallows us to set our colors to

specific levels of opacity.

First of all, we need to change theHSL to HSLA:

p { color: hsla(280,100%,50%); }

Then, we need to add a newvalue at the end of the threecomma-separated values.

p { color: hsla(280,100%,50%,0.5); }

The opacity value must be anumber, which is zero or more

digits followed by a dot (.)followed by one or more digits.

For example:

0.5.5

You should always include abackup color that is not HSL or

HSLA for older browsers.

p {

color: rgb(85,0,128);color: hsla(280,100%,50%,0.5);

}

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

Why use HSLor HSLA?

From the browsers point of view,there is no difference between

values defined in RGBAor HSLA.

Some designers find it easierto choose and adjust colors

using HSLA.

7. The ‘currentColor’keyword

CSS1 and CSS2 definedthe initial value of the ‘border-

color’ property to be “thevalue of the ‘color’ property” .

However, there is nocorresponding keyword.

We had no way of specifying aborder-color to match the color.

p{

color: red; border-width: 1px; border-style: solid;border-color: “the value of the ‘color’ property”;

}

CSS3 allows us to thecurrentColor keyword for this:

p{

color: red; border-width: 1px; border-style: solid;border-color: currentColor;

}

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 8, 9, 10

Opera 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

8. The ‘transparent’keyword

CSS1 introduced the ‘transparent’value for the background-color

property.

CSS2 allowed the ‘transparent’value to be applied to the ‘border-

color’ property.

CSS3 allows the ‘transparent’keyword to be applied to any

properties that acceptsa ‘color’ value.

p { color: transparent; }

BrowserFirefox 3.6, 4

Safari 4, 5

Chrome 9, 10

Opera 10, 11

IE 6, 7, 8

IE 9

SupportedYes

Yes

Yes

Yes

No

Yes

Russ WeakleyMax Design

Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley