CSS3

color

Work with color

http://www.w3.org/TR/css3-color

Determining color in CSS

color: #000background-color:#333border-color:#999

content

Color Keywords

Color Keywords

Color Keywords

Color Keywords

Determining color in CSS3

Hexadecimal expressions and keywords

CSS 2.1 allows to determine color as RGB values

CSS3 adds keywords SVG 1.0 to the specification

More information on available keywords:http://www.w3.org/TR/css3-color/#svg-color

New color models in CSS3

RGB (in CSS2)red, green, blue

RGBA (in CSS3)red, green, blue, alpha transparency

HSLhue, saturation, lightness

HSLAhue, saturation, lightness, alpha

CMYK (in Generated Paged Media Module)cyan, magenta, yellow, black

RGB is a mixed color model. Red, green and blue are mixed together
in order to form other colors. As a mixed model,
100% of all the three colors will give white color.

Syntax RGB

rgb(0,0,0)

rgb(255,255,255)

rgb(69%,9%,12%)

In CSS RGB values can be written as the three different values separated by a comma ranging from 0 to 255, or as a percentage ranging from 0 to 100%,
in the following order: red, green and blue.

RGBA Model

A new color model introduced in CSS3. It allows to add alfa value
which specifies a level of opacity.
It is supported in Safari 3.2+, Chrome 3+, Firefox 3+, Opera 10+, IE9 Beta.

.nav {
color: rgba(0, 0, 0, 60%); /* black at 60% opacity */
}

.nav {
color: rgba(0, 0, 0, 0.6); /* black at 60% opacity */
}

RGBA Model

Value 1 ( 100% ) means that the color is opaque.
Value 0 means that the color is fully transparent.

Styling the link color with RGBA

RGBA model can help us style the link color.
It allows to make the text soak up some of the background color behind it.
The white color at 70% opacity allows the background to shine through.

.nav li a {
color: rgba(255, 255, 255, 0.7);
}

RGBA backup

Due to the fact that RGBA is not supported by all browsers it is a good practice to provide sort of backup for the browers which don't support this color model. In the code we should put a solid color first. The browers which support RBGA will override the solid color whereas the browsers which don't support RGBA will ignore RGBA rule.

.nav li a { color: #ccc;
color: rgba(255, 255, 255, 0.7);
}

Important !

Remember to specify solid backups for RGBA colors
in a separate rule which appears BEFORE the RGBA rule.

Hue Saturation Lightness

HUE

Hue Saturation Lightness

LIGHTNESS

Hue Saturation Lightness

SATURATION

Hue Saturation Lightness

SYNTAX HSL

hsl(0,10%,95%)

Adding alpha value

Current support

color syntaxrgbs ( )43x*104

hsl ( )43x*104

hsla ( )43x*104

*support added for IE 9

Current support

Thank you for your attention.

Visit my website: www.slawomirzdunek.comFollow me on Twitter: http://twitter.com/#!/slawomirzdunekFind me on Facebook.

KeywordHexDecimalKeywordHexDecimal

darkviolet#9400D3148,0,211hotpink#FF69B4255,105,180

deeppink#FF1493255,20,147indianred#CD5C5C205,92,92

deepskyblue#00BFFF0,191,255indigo#4B008275,0,130

dimgray#696969105,105,105ivory#FFFFF0255,255,240

dimgrey#696969105,105,105khaki#F0E68C240,230,140

dodgerblue#1E90FF30,144,255lavender#E6E6FA230,230,250

firebrick#B22222178,34,34lavenderblush#FFF0F5255,240,245

floralwhite#FFFAF0255,250,240lawngreen#7CFC00124,252,0

forestgreen#228B2234,139,34lemonchiffon#FFFACD255,250,205

fuchsia#FF00FF255,0,255lightblue#ADD8E6173,216,230

gainsboro#DCDCDC220,220,220lightcoral#F08080240,128,128

ghostwhite#F8F8FF248,248,255lightcyan#E0FFFF224,255,255

gold#FFD700255,215,0lightgoldenrodyellow#FAFAD2250,250,210

goldenrod#DAA520218,165,32lightgray#D3D3D3211,211,211

gray#808080128,128,128lightgreen#90EE90144,238,144

green#0080000,128,0lightgrey#D3D3D3211,211,211

greenyellow#ADFF2F173,255,47lightpink#FFB6C1255,182,193

gray#808080128,128,128lightsalmon#FFA07A255,160,122

honeydew#F0FFF0240,255,240lightseagreen#20B2AA32,178,170

???Strona ??? (???)17.06.2011, 10:58:14Strona / KeywordHexDecimalKeywordHexDecimal

lightskyblue#87CEFA135,206,250midnightblue#19197025,25,112

lightslategray#778899119,136,153mintcream#F5FFFA245,255,250

lightslategrey#778899119,136,153mistyrose#FFE4E1255,228,225

lightsteelblue#B0C4DE176,196,222moccasin#FFE4B5255,228,181

lightyellow#FFFFE0255,255,224navajowhite#FFDEAD255,222,173

lime#00FF000,255,0navy#0000800,0,128

limegreen#32CD3250,205,50oldlace#FDF5E6253,245,230

linen#FAF0E6250,240,230olive#808000128,128,0

magenta#FF00FF255,0,255olivedrab#6B8E23107,142,35

maroon#800000128,0,0orange#FFA500255,165,0

mediumaquamarine#66CDAA102,205,170orangered#FF4500255,69,0

mediumblue#0000CD0,0,205orchid#DA70D6218,112,214

mediumorchid#BA55D3186,85,211palegoldenrod#EEE8AA238,232,170

mediumpurple#9370DB147,112,219palegreen#98FB98152,251,152

mediumseagreen#3CB37160,179,113paleturquoise#AFEEEE175,238,238

mediumslateblue#7B68EE123,104,238palevioletred#DB7093219,112,147

mediumspringgreen#00FA9A0,250,154papayawhip#FFEFD5255,239,213

mediumturquoise#48D1CC72,209,204peachpuff#FFDAB9255,218,185

mediumvioletred#C71585199,21,133peru#CD853F205,133,63

???Strona ??? (???)17.06.2011, 10:58:14Strona / KeywordHexDecimalKeywordHexDecimal

pink#FFC0CB255,192,203slategray#708090112,128,144

plum#DDA0DD221,160,221snow#FFFAFA255,250,250

powderblue#B0E0E6176,224,230springgreen#00FF7F0,255,127

purple#800080128,0,128steelblue#4682B470,130,180

red#FF0000255,0,0tan#D2B48C210,180,140

rosybrown#BC8F8F188,143,143teal#0080800,128,128

royalblue#4169E165,105,225thistle#D8BFD8216,191,216

saddlebrown#8B4513139,69,19tomato#FF6347255,99,71

salmon#FA8072250,128,114turquoise#40E0D064,224,208

sandybrown#F4A460244,164,96violet#EE82EE238,130,238

seagreen#2E8B5746,139,87wheat#F5DEB3245,222,179

seashell#FFF5EE255,245,238white#FFFFFF255,255,255

sienna#A0522D160,82,45whitesmoke#F5F5F5245,245,245

silver#C0C0C0192,192,192yellow#FFFF00255,255,0

skyblue#87CEEB135,206,235yellowgreen#9ACD32154,205,50

slateblue#6A5ACD106,90,205

???Strona ??? (???)17.06.2011, 10:58:14Strona /

???Strona ??? (???)17.06.2011, 19:28:05Strona /

KeywordHexDecimalKeywordHexDecimal

aliceblue#F0F8FF240,248,255crimson#DC143C220,20,60

antiquewhite#FAEBD7250,235,215cyan#00FFFF0,255,255

aqua#00FFFF0,255,255darkblue#00008B0,0,139

aquamarine#7FFFD4127,255,212darkcyan#008B8B0,139,139

azure#F0FFFF240,255,255darkgoldenrod#B8860B184,134,11

beige#F5F5DC245,245,220darkgray#A9A9A9169,169,169

bisque#FFE4C4255,228,196darkgreen#0064000,100,0

black#0000000,0,0darkgrey#A9A9A9169,169,169

blanchedalmond#FFEBCD255,235,205darkkhaki#BDB76B189,183,107

blue#0000FF0,0,255darkmagenta#8B008B139,0,139

blueviolet#8A2BE2138,43,226darkolivegreen#556B2F85,107,47

brown#A52A2A165,42,42darkorange#FF8C00255,140,0

burlywood#DEB887222,184,135darkorchid#9932CC153,50,204

cadetblue#5F9EA095,158,160darkred#8B0000139,0,0

chartreuse#7FFF00127,255,0darksalmon#E9967A233,150,122

chocolate#D2691E210,105,30darkseagreen#8FBC8F143,188,143

coral#FF7F50255,127,80darkslateblue#483D8B72,61,139

cornflowerblue#6495ED100,149,237darkslategray#2F4F4F47,79,79

cornsilk#FFF8DC255,248,220darkturquoise#00CED10,206,209

???Strona ??? (???)17.06.2011, 10:58:15Strona /