CSS Colours
[this page | pdf | back links]
A common activity within CSS (and any
associated HTML
markup) is to set the colour of an element. Colours can be specified in several
ways:
-
Using predefined names
-
Using hexadecimal format
-
Using RGB or RGBA formats
-
Using HSL or HSLA formats
1. Predefined names
The following specific
colours are listed in HTML / CSS specifications:
|
Colour name
|
Hexadecimal value
|
Colour
|
|
AliceBlue
|
#F0F8FF
|
|
|
AntiqueWhite
|
#FAEBD7
|
|
|
Aqua
|
#00FFFF
|
|
|
Aquamarine
|
#7FFFD4
|
|
|
Azure
|
#F0FFFF
|
|
|
Beige
|
#F5F5DC
|
|
|
Bisque
|
#FFE4C4
|
|
|
Black
|
#000000
|
|
|
BlanchedAlmond
|
#FFEBCD
|
|
|
Blue
|
#0000FF
|
|
|
BlueViolet
|
#8A2BE2
|
|
|
Brown
|
#A52A2A
|
|
|
BurlyWood
|
#DEB887
|
|
|
CadetBlue
|
#5F9EA0
|
|
|
Chartreuse
|
#7FFF00
|
|
|
Chocolate
|
#D2691E
|
|
|
Coral
|
#FF7F50
|
|
|
CornflowerBlue
|
#6495ED
|
|
|
Cornsilk
|
#FFF8DC
|
|
|
Crimson
|
#DC143C
|
|
|
Cyan
|
#00FFFF
|
|
|
DarkBlue
|
#00008B
|
|
|
DarkCyan
|
#008B8B
|
|
|
DarkGoldenRod
|
#B8860B
|
|
|
DarkGray
|
#A9A9A9
|
|
|
DarkGrey
|
#A9A9A9
|
|
|
DarkGreen
|
#006400
|
|
|
DarkKhaki
|
#BDB76B
|
|
|
DarkMagenta
|
#8B008B
|
|
|
DarkOliveGreen
|
#556B2F
|
|
|
DarkOrange
|
#FF8C00
|
|
|
DarkOrchid
|
#9932CC
|
|
|
DarkRed
|
#8B0000
|
|
|
DarkSalmon
|
#E9967A
|
|
|
DarkSeaGreen
|
#8FBC8F
|
|
|
DarkSlateBlue
|
#483D8B
|
|
|
DarkSlateGray
|
#2F4F4F
|
|
|
DarkSlateGrey
|
#2F4F4F
|
|
|
DarkTurquoise
|
#00CED1
|
|
|
DarkViolet
|
#9400D3
|
|
|
DeepPink
|
#FF1493
|
|
|
DeepSkyBlue
|
#00BFFF
|
|
|
DimGray
|
#696969
|
|
|
DimGrey
|
#696969
|
|
|
DodgerBlue
|
#1E90FF
|
|
|
FireBrick
|
#B22222
|
|
|
FloralWhite
|
#FFFAF0
|
|
|
ForestGreen
|
#228B22
|
|
|
Fuchsia
|
#FF00FF
|
|
|
Gainsboro
|
#DCDCDC
|
|
|
GhostWhite
|
#F8F8FF
|
|
|
Gold
|
#FFD700
|
|
|
GoldenRod
|
#DAA520
|
|
|
Gray
|
#808080
|
|
|
Grey
|
#808080
|
|
|
Green
|
#008000
|
|
|
GreenYellow
|
#ADFF2F
|
|
|
HoneyDew
|
#F0FFF0
|
|
|
HotPink
|
#FF69B4
|
|
|
IndianRed
|
#CD5C5C
|
|
|
Indigo
|
#4B0082
|
|
|
Ivory
|
#FFFFF0
|
|
|
Khaki
|
#F0E68C
|
|
|
Lavender
|
#E6E6FA
|
|
|
LavenderBlush
|
#FFF0F5
|
|
|
LawnGreen
|
#7CFC00
|
|
|
LemonChiffon
|
#FFFACD
|
|
|
LightBlue
|
#ADD8E6
|
|
|
LightCoral
|
#F08080
|
|
|
LightCyan
|
#E0FFFF
|
|
|
LightGoldenRodYellow
|
#FAFAD2
|
|
|
LightGray
|
#D3D3D3
|
|
|
LightGrey
|
#D3D3D3
|
|
|
LightGreen
|
#90EE90
|
|
|
LightPink
|
#FFB6C1
|
|
|
LightSalmon
|
#FFA07A
|
|
|
LightSeaGreen
|
#20B2AA
|
|
|
LightSkyBlue
|
#87CEFA
|
|
|
LightSlateGray
|
#778899
|
|
|
LightSlateGrey
|
#778899
|
|
|
LightSteelBlue
|
#B0C4DE
|
|
|
LightYellow
|
#FFFFE0
|
|
|
Lime
|
#00FF00
|
|
|
LimeGreen
|
#32CD32
|
|
|
Linen
|
#FAF0E6
|
|
|
Magenta
|
#FF00FF
|
|
|
Maroon
|
#800000
|
|
|
MediumAquaMarine
|
#66CDAA
|
|
|
MediumBlue
|
#0000CD
|
|
|
MediumOrchid
|
#BA55D3
|
|
|
MediumPurple
|
#9370DB
|
|
|
MediumSeaGreen
|
#3CB371
|
|
|
MediumSlateBlue
|
#7B68EE
|
|
|
MediumSpringGreen
|
#00FA9A
|
|
|
MediumTurquoise
|
#48D1CC
|
|
|
MediumVioletRed
|
#C71585
|
|
|
MidnightBlue
|
#191970
|
|
|
MintCream
|
#F5FFFA
|
|
|
MistyRose
|
#FFE4E1
|
|
|
Moccasin
|
#FFE4B5
|
|
|
NavajoWhite
|
#FFDEAD
|
|
|
Navy
|
#000080
|
|
|
OldLace
|
#FDF5E6
|
|
|
Olive
|
#808000
|
|
|
OliveDrab
|
#6B8E23
|
|
|
Orange
|
#FFA500
|
|
|
OrangeRed
|
#FF4500
|
|
|
Orchid
|
#DA70D6
|
|
|
PaleGoldenRod
|
#EEE8AA
|
|
|
PaleGreen
|
#98FB98
|
|
|
PaleTurquoise
|
#AFEEEE
|
|
|
PaleVioletRed
|
#DB7093
|
|
|
PapayaWhip
|
#FFEFD5
|
|
|
PeachPuff
|
#FFDAB9
|
|
|
Peru
|
#CD853F
|
|
|
Pink
|
#FFC0CB
|
|
|
Plum
|
#DDA0DD
|
|
|
PowderBlue
|
#B0E0E6
|
|
|
Purple
|
#800080
|
|
|
RebeccaPurple
|
#663399
|
|
|
Red
|
#FF0000
|
|
|
RosyBrown
|
#BC8F8F
|
|
|
RoyalBlue
|
#4169E1
|
|
|
SaddleBrown
|
#8B4513
|
|
|
Salmon
|
#FA8072
|
|
|
SandyBrown
|
#F4A460
|
|
|
SeaGreen
|
#2E8B57
|
|
|
SeaShell
|
#FFF5EE
|
|
|
Sienna
|
#A0522D
|
|
|
Silver
|
#C0C0C0
|
|
|
SkyBlue
|
#87CEEB
|
|
|
SlateBlue
|
#6A5ACD
|
|
|
SlateGray
|
#708090
|
|
|
SlateGrey
|
#708090
|
|
|
Snow
|
#FFFAFA
|
|
|
SpringGreen
|
#00FF7F
|
|
|
SteelBlue
|
#4682B4
|
|
|
Tan
|
#D2B48C
|
|
|
Teal
|
#008080
|
|
|
Thistle
|
#D8BFD8
|
|
|
Tomato
|
#FF6347
|
|
|
Turquoise
|
#40E0D0
|
|
|
Violet
|
#EE82EE
|
|
|
Wheat
|
#F5DEB3
|
|
|
White
|
#FFFFFF
|
|
|
WhiteSmoke
|
#F5F5F5
|
|
|
Yellow
|
#FFFF00
|
|
|
YellowGreen
|
#9ACD32
|
|
2. Hexadecimal format
All major browsers
recognise hexadecimal format (‘hex’) colour values. These take the form #RRGGBB where the RR, GG and BB
indicate the red, green and blue components of the colour in two-character
hexadecimal format (i.e. ranging from 00 to FF, which in decimal correspond to
0 to 255 respectively. For example, #FF0000
is red, since the red component is given its maximum value (FF, i.e. 255 in
decimal format), whilst the green and blue components are given their minimum
values, i.e. do not appear in the end colour. The hexadecimal format codes for
each of the prespecified CSS colours are set out above.
3. RGB and RGBA formats
RGB colour values are
also recognised by all major browsers. They are specified in the form rgb(r,g,b), where
r, g and b are the red, green and blue components of the
colour as above, but specified either in decimal values (0 to 255) or in
percentage values (0% to 100%)
RGBA colour values are
recognised by many major browsers. They extend the RGB to include an opacity
(i.e. transparency) value. They are specified in the form rgba(r,g,b,a),
where r, g and b are as above, and a (the ‘alpha’
parameter) can take a value between 0.0
(fully transparent, so invisible) and 1.0
(fully opaque, so will entirely block whatever is ‘behind’ the element assigned
this opacity).
3. HSL and HSLA formats
HSL colour values are
recognised by many browsers. HSL stands for hue, saturation and lightness. Such
a colour is specified by hsl(h,s,l)
where h refers to the hue, s the saturation and l the
lightness of the colour.
HSL can be thought of as
a cylindrical-coordinate representation of a colour. Hue defines the primary
colour or mix (in degrees), between 0 and 360, with 0 (or 360) corresponding to
red, 120 corresponding to green and 240 corresponding to blue (with
intermediate values corresponding to mixtures of these colours). Saturation
corresponds to the extent to which the colour diverges from grey, and is
expressed in percentage terms, where 0% corresponds to grey and 100% to full
colour. Lightness is also expressed in percentage terms, where 0% corresponds
to black and 100% to white.
HSLA is like RGBA in
extending the colour format to include an opacity value. It is specified by hsla(h,s,l,a),
where a is the alpha parameter as above.
EXAMPLE:
HTML USED IN THIS EXAMPLE:
<!DOCTYPE html>
<html> <!-- Copyright (c) Nematrian Limited 2018 -->
<head></head>
<body>
Some CSS colors are:<br><br>
<table style="border:2px solid black;">
<tr><td><b>Color name</b></td><td><b>Hex value</b></td><td><b>Color</b></td></tr>
<tr><td>Aqua</td><td>#00FFFF</td><td style="background-color: Aqua;"> </td></tr>
<tr><td>Aquamarine</td><td>#7FFFD4</td><td style="background-color: Aquamarine;"> </td></tr>
<tr><td>Black</td><td>#000000</td><td style="background-color: Black;"> </td></tr>
<tr><td>Yellow</td><td>#FFFF00</td><td style="background-color: Yellow;"> </td></tr>
<tr><td>YellowGreen</td><td>#9ACD32</td><td style="background-color: YellowGreen;"> </td></tr>
<tr><td>rgb(154, 205, 50)</td><td>#9ACD32</td><td style="background-color: rgb(154, 205, 50);"> </td></tr>
<tr><td>rgba(154, 205, 50,0.2)</td><td>#9ACD32</td><td style="background-color: rgba(154, 205, 50, 0.2);"> </td></tr>
<tr><td>hsl(200, 80%, 30%)</td><td>#9ACD32</td><td style="background-color: hsl(200, 80%, 30%);"> </td></tr>
<tr><td>YellowGreen<br>(set by JavaScript) </td><td>#9ACD32</td><td id="element"> </td></tr>
</table>
<script>
document.getElementById("element").style.backgroundColor="YellowGreen";
</script>
</body>
</html>
|
NAVIGATION LINKS
Contents | Prev | Next | CSS Properties