Home Misc Index
  HTML Colors
 P van Diemen

Contents

Colors in HTML, RGB

The application of colors in strict HTML is severely limited;  the foreground color (i.e. text) can be set using the (deprecated) attribute color in the elements <font> and <basefont>, and the background color through the attribute bgcolor in the elements <body>, <table>, <tr> and <td> & <th>.
By using CSS style sheets the possible applications are greatly expanded.

The straightforward way to indicate colors are nearly identical in HTML and in CSS (style sheets).  You may specify a color using:

In style sheets you may also indicate colors using the so-called RBG notation:


In HTML the hex color codes formally need a preceding number sign and should be enclosed between quotes (e.g. color="#FF0000"), but commonly you don't need the quotes nor the number sign.
In CSS you should not use quotes, but you always do need the number sign preceding the hex color codes (e.g. … color: #FF0000; …).

Hue, Saturation & Luminosity, HSL

Apart from the RGB indication of colors, CSS3 also allows the Hue-Saturation-Luminosity (HSL) notation for colors (HSL is more common in other color applications). 

HSL indications can be converted to RGB, and vice versa (see Testbox).

Transparency, RGBA, HSLA

In CSS3 (HTML5) you can also indicate the transparency of the color with an extra parameter called 'alpha' or 'opacity'.  The value of this parameter varies from 0.0 (completely transparent) to 1.0 (fully opaque).

This leads to the so called RGBA color values, where the 3 parameter RGB color values are extended by a fourth value:  the Alpha.  Or to the HSLA variant.  Examples:

By default, the 3 parameter RGB or HSL values use an Alpha of 1.0 (i.e. no transparancy).
Note that there is no hexadecimal notation for RGBA or HSL(A).

The usefulness of transparency for normal web pages is limited;  it may only serve a purpose when you use layers (CSS: z-index).

Predefined Color Names

CSS3 provide a rather extensive set for colors names (case-insensitive):
 Transparent¹:  not an actual color, but the lack of any (opaque) color:  full transparency
 Black¹= #000000     
 Gray¹ / Grey= #808080      Silver¹= #C0C0C0
 LightGray/LightGrey= #D3D3D3  DarkGray/DarkGrey= #A9A9A9
 SlateGray/SlateGrey= #708090  DimGray/DimGrey= #696969
 LightSlategray/LightSlategrey= #778899  DarkSlategray/DarkSlategrey= #2F4F4F
 White¹= #FFFFFF  FloralWhite= #FFFAF0
 Snow= #FFFAFA  Whitesmoke= #F5F5F5
 GhostWhite= #F8F8FF  Ivory= #FFFFF0
 AliceBlue= #F0F8FF  Azure= #F0FFFF
 BlanchedAlmond= #FFEBCD  AntiqueWhite= #FAEBD7
 Beige= #F5F5DC  Cornsilk= #FFF8DC
 Lavender= #E6E6FA  Lavenderblush= #FFF0F5
 Linen= #FAF0E6  Honeydew= #F0FFF0
 LemonChiffon= #FFFACD  Mintcream= #F5FFFA
 Seashell= #FFF5EE  LightgoldenrodYellow= #FAFAD2
 MistyRose= #FFE4E1  Moccasin= #FFE4B5
 NavajoWhite= #FFDEAD  Palegoldenrod= #EEE8AA
 Papayawhip= #FFEFD5  Peachpuff= #FFDAB9
 Thistle= #D8BFD8  Wheat= #F5DEB3
 Tan= #D2B48C  Gainsboro= #DCDCDC
 Brown= #A52A2A  Bisque= #FFE4C4
 Burlywood= #DEB887  Chocolate= #D2691E
 Khaki= #F0E68C  DarkKhaki= #BDB76B
 RosyBrown= #BC8F8F  SaddleBrown= #8B4513
 Peru= #CD853F  Sienna= #A0522D
 Goldenrod= #DAA520  Darkgoldenrod= #B8860B
 SandyBrown= #F4A460  Maroon¹= #800000
 Pink= #FFC0CB  DeepPink= #FF1493
 HotPink= #FF69B4  LightPink= #FFB6C1
 Plum= #DDA0DD  Oldlace= #FDF5E6
 Red¹= #FF0000  DarkRed= #8B0000
 IndianRed= #CD5C5C  Firebrick= #B22222
 Crimson= #DC143C  Tomato= #FF6347
 Salmon= #FA8072  DarkSalmon= #E9967A
 LightSalmon= #FFA07A  LightCoral= #F08080
 Orange²= #FFA500  DarkOrange= #FF8C00
 OrangeRed= #FF4500  Coral= #FF7F50
 Yellow¹= #FFFF00  Gold= #FFD700
 LightYellow= #FFFFE0  GreenYellow= #ADFF2F
 Green¹= #008000
 LightGreen= #90EE90  DarkGreen= #006400
 Chartreuse= #7FFF00  LawnGreen= #7CFC00
 DarkOlivegreen= #556B2F  DarkSeagreen= #8FBC8F
 PaleGreen= #98FB98  YellowGreen= #9ACD32
 SeaGreen= #2E8B57  LightSeagreen= #20B2AA
 ForestGreen= #228B22  MediumSeagreen= #3CB371
 Lime¹= #00FF00  LimeGreen= #32CD32
 SpringGreen= #00FF7F  MediumSpringgreen= #00FA9A
 Olive¹= #808000  Olivedrab= #6B8E23
 Teal¹= #008080
 Aquamarine= #7FFFD4  MediumAquamarine= #66CDAA
 Blue¹= #0000FF  Aqua¹= #00FFFF
 RoyalBlue= #4169E1  Navy¹= #000080
 LightBlue= #ADD8E6  DarkBlue= #00008B
 DarkSlateblue= #483D8B  DodgerBlue= #1E90FF
 SkyBlue= #87CEEB  DeepSkyblue= #00BFFF
 CadetBlue= #5F9EA0  CornflowerBlue= #6495ED
 SteelBlue= #4682B4  LightSteelblue= #B0C4DE
 PowderBlue= #B0E0E6  LightSkyblue= #87CEFA
 MediumBlue= #0000CD  MidnightBlue= #191970
 Cyan= #00FFFF
 LightCyan= #E0FFFF  DarkCyan= #008B8B
 Turquoise= #40E0D0  PaleTurquoise= #AFEEEE
 MediumTurquoise= #48D1CC  DarkTurquoise= #00CED1
 Purple¹= #800080  Orchid= #DA70D6
 DarkOrchid= #9932CC  MediumOrchid= #BA55D3
 Violet= #EE82EE  PaleVioletred= #DB7093
 BlueViolet= #8A2BE2  Slateblue= #6A5ACD
 Indigo= #4B0082  MediumSlateblue= #7B68EE
 MediumVioletred= #C71585  DarkViolet= #9400D3
 Magenta= #FF00FF  DarkMagenta= #8B008B
 Fuchsia¹= #FF00FF  MediumPurple= #9370DB
Notes:
  1. Defined in HTML and CSS2
  2. Defined in CSS2 (but not in HTML4; most likely recognised by browsers).

Contrast

Foreground & background colors using the (CSS2) predefined color names.

blackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurple
blackblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleblack
grayblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplegray
silverblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplesilver
whiteblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplewhite
maroonblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplemaroon
redblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplered
orangeblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleorange
yellowblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleyellow
limeblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplelime
greenblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplegreen
tealblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleteal
oliveblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleolive
aquablackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleaqua
blueblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurpleblue
navyblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplenavy
fuchsiablackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplefuchsia
purpleblackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurplepurple
blackgraysilverwhitemaroonredorangeyellowlimegreentealoliveaquabluenavyfuchsiapurple

For 'normal' use you may want to modify the foreground & background colors to increase contrast:  dark colors a tad darker and light colors a tad lighter.

Color Table

The table below provides a selection of the color palette.  Note that the table covers only a small portion of the possible combinations:  the light colors are stepped with an interval of x20, and only a minor part of the dark colors are presented (they are less common).

00000000202000404000606000808000a0a000c0c000e0e000ffff00e0e000c0c000a0a0008080006060004040002020000000
00200000402000604000806000a08000c0a000e0c000ffe020ffff00e0ff00c0e000a0e00080a0006080004060002040000020
00400000602000804000a06000c08000e0a000ffc020ffe040ffff20e0ff00c0ff00a0e00080c00060a0004080002060000040
00600000802000a04000c06000e08000ffa020ffc040ffe060ffff40e0ff20c0ff00a0ff0080e00060c00040a0002080000060
00800000a02000c04000e06000ff8020ffa040ffc060ffe080ffff60e0ff40c0ff20a0ff0080ff0060e00040c00020a0000080
00a00000c02000e04000ff6020ff8040ffa060ffc080ffe0a0ffff80e0ff60c0ff40a0ff2080ff0060ff0040e00020c00000a0
00c00000e02000ff4020ff6040ff8060ffa080ffc0a0ffe0c0ffffa0e0ff80c0ff60a0ff4080ff2040ff0040ff0020e00000c0
00e00000ff2020ff4040ff6060ff8080ffa0a0ffc0c0ffe0e0ffffc0e0ffa0c0ff80a0ff6080ff4060ff2040ff0020ff0000e0
00ff0020ff2040ff4060ff6080ff80a0ffa0c0ffc0e0ffe0ffffffe0e0ffc0c0ffa0a0ff8080ff6060ff4040ff2020ff0000ff
20ff0040ff2060ff4080ff60a0ff80c0ffa0e0ffc0ffffe0ffe0e0ffe0ffe0c0ffc0a0ffa080ff8060ff6040ff4020ff2000ff
40ff0060ff2080ff40a0ff60c0ff80e0ffa0ffffc0ffe0c0ffc0c0ffc0e0ffc0ffe0a0ffc080ffa060ff8040ff6020ff4000ff
60ff0080ff20a0ff40c0ff60e0ff80ffffa0ffe0a0ffc0a0ffa0a0ffa0c0ffa0e0ffa0ffe080ffc060ffa040ff8020ff6000ff
80ff00a0ff20c0ff40e0ff60ffff80ffe080ffc080ffa080ff8080ff80a0ff80c0ff80e0ff80ffe060ffc040ffa020ff8000ff
a0ff00c0ff20e0ff40ffff60ffe060ffc060ffa060ff8060ff6060ff6080ff60a0ff60c0ff60e0ff60ffe040ffc020ffa000ff
c0ff00e0ff20ffff40ffe040ffc040ffa040ff8040ff6040ff4040ff4060ff4080ff40a0ff40c0ff40e0ff40ffe020ffc000ff
e0ff00ffff20ffe020ffc020ffa020ff8020ff6020ff4020ff2020ff2040ff2060ff2080ff20a0ff20c0ff20e0ff20ffe000ff
ffff00ffe000ffc000ffa000ff8000ff6000ff4000ff2000ff0000ff0020ff0040ff0060ff0080ff00a0ff00c0ff00e0ff00ff

Color Testbox

 Foreground
 
   
 
 background 
ForegroundRGB  HueSatur. Lum.
Hex   ⇑ ⇑ ⇑  ⇑  ⇑  ⇑
°  %  %
⇓ ⇓ ⇓  ⇓  ⇓  ⇓
 
Background ⇑ ⇑ ⇑  ⇑  ⇑  ⇑
°  %  %
⇓ ⇓ ⇓  ⇓  ⇓  ⇓
Enter new values for foreground and/or background color as hexadecimal, decimal RGB or HSL value in the appropriate input boxes, or click on the arrows
Ref:  //www.niwa.nu/2013/05/math-behind-colorspace-conversions-rgb-hsl.

=O=