You currently have JavaScript disabled on your browser.

This website uses JavaScript, and This page needs JavaScript activated to work correctly.

Please active JavaScript on your browser and then refresh this page.

Color



One of the many different styles that is available through CSS is to specify an elements foreground color, by setting a Color value. The color value can be any type of HTML color value, such as HTML color names, Hex color codes, RGB, RGBa, HSL, HSLa, etc...

Named Color Values

HTML can and does use named color values, which most web browsers will translate into a standard color. Most web browsers support 140 standard color names (see Color Table below).

See examples below for examples on specifying a color using Named Color values.


HEX Color Values

Hexadecimal color values have the following syntax format: #rrggbb, which means that they always start with a hash tag ( # ), followed by two hexadecimal digit values for red, two hexadecimal digit values for green, and two hexadecimal digit values for blue.

Valid Hexadecimal digit values are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F, where 0 is the lowest value and F is the highest value. The Hex color digit values are not case sensitive.

The two digit color values can be substituted with one digit color values, but take note that they are not interchangeable. This means that you must use either all two digit values ( i.e. #rrggbb ), or all one digit values ( i.e. #rgb ) when specifying a Hex Color value.

A one digit color value is actually translated by the web browser as a two digit color value where it simply assumes that both digits of that two digit color value are the same value. For example, the one digit color value for red is #f00, which means highest amount of red with lowest amount of green and lowest amount of blue. Red's two digit equivalent is #ff0000.

The Hex Color #000 (for one digit) or #000000 (for two digit) results as black because it means lowest amount of red, lowest amount of green and lowest amount of blue. The Hex #fff (for one digit) or #ffffff (for two digit) results as white, and means highest amount of red, highest amount of green, and highest amount of blue. If the same value is used for red, green, and blue, (i.e. #fff, or #aaa, or #595959, or #888, or etc, etc, etc...) then the resulting color is actually a shade of gray because it has the same amount of red, green, and blue.

By using Hex color values instead of named color values, virtually any color can be generated.

See examples below for examples on specifying a color using Hex Color values.


RGB Color Values

RGB stands for Red Green Blue. The syntax format RGB(red, green, blue) is used to specify the RGB Color. Each parameter value for Red, Green, and Blue is specified using a number that ranges from 0 to 255, where 0 is the least amount and 255 is the highest amount, and all three values must be specified to make a color. Each value is separated by a comma, as in RGB(100,149,237), which means that the RGB Color has a Red value of 100, a Green value of 149, and a Blue value of 237, resulting in the color CornflowerBlue.

Just like with the Hex Colors, if all three values of RGB are the same number value (i.e RGB(100,100,100) for example), then the resulting color is a shade of Gray.

RGBA is the same as RGB but with an Alpha parameter specified as well, which ranges from 0.0 to 1.0. The Alpha parameter is used to specify a transparency level, where 0.0 is full transparency and 1.0 is not transparent at all. The syntax format RGBA(red, green, blue, alpha) is used to specify the RGBA color.

An example for specifying an RGB color is:

 
<h1 style="color:rgb(255,0,0);">Hello World!</h1>

Color Table:

The following is a list of known Color Names, along with their equivalent Hex Color Values and RGB Color Values.

ColorNameHEX #RGB
 AliceBlueF0F8FF240,248,255
 AntiqueWhiteFAEBD7250,235,215
 Aqua (i.e. Cyan)00FFFF0,255,255
 Aquamarine7FFFD4127,255,212
 AzureF0FFFF240,255,255
 BeigeF5F5DC245,245,220
 BisqueFFE4C4255,228,196
 Black0000000,0,0
 BlanchedAlmondFFEBCD255,235,205
 Blue0000FF0,0,255
 BlueViolet8A2BE2138,43,226
 BrownA52A2A165,42,42
 BurlyWoodDEB887222,184,135
 CadetBlue5F9EA095,158,160
 Chartreuse7FFF00127,255,0
 ChocolateD2691E210,105,30
 CoralFF7F50255,127,80
 CornflowerBlue6495ED100,149,237
 CornsilkFFF8DC255,248,220
 CrimsonDC143C220,20,60
 Cyan (i.e. Aqua)00FFFF0,255,255
 DarkBlue00008B0,0,139
 DarkCyan008B8B0,139,139
 DarkGoldenRodB8860B184,134,11
 DarkGrayA9A9A9169,169,169
 DarkGreyA9A9A9169,169,169
 DarkGreen0064000,100,0
 DarkKhakiBDB76B189,183,107
 DarkMagenta8B008B139,0,139
 DarkOliveGreen556B2F85,107,47
 DarkOrangeFF8C00255,140,0
 DarkOrchid9932CC153,50,204
 DarkRed8B0000139,0,0
 DarkSalmonE9967A233,150,122
 DarkSeaGreen8FBC8F143,188,143
 DarkSlateBlue483D8B72,61,139
 DarkSlateGray2F4F4F47,79,79
 DarkSlateGrey2F4F4F47,79,79
 DarkTurquoise00CED10,206,209
 DarkViolet9400D3148,0,211
 DeepPinkFF1493255,20,147
 DeepSkyBlue00BFFF0,191,255
 DimGray696969105,105,105
 DimGrey696969105,105,105
 DodgerBlue1E90FF30,144,255
 FireBrickB22222178,34,34
 FloralWhiteFFFAF0255,250,240
 ForestGreen228B2234,139,34
 FuchsiaFF00FF255,0,255
 GainsboroDCDCDC220,220,220
 GhostWhiteF8F8FF248,248,255
 GoldFFD700255,215,0
 GoldenRodDAA520218,165,32
 Gray808080128,128,128
 Grey808080128,128,128
 Green0080000,128,0
 GreenYellowADFF2F173,255,47
 HoneyDewF0FFF0240,255,240
 HotPinkFF69B4255,105,180
 IndianRed CD5C5C205,92,92
 Indigo 4B008275,0,130
 IvoryFFFFF0255,255,240
 KhakiF0E68C240,230,140
 LavenderE6E6FA230,230,250
 LavenderBlushFFF0F5255,240,245
 LawnGreen7CFC00124,252,0
 LemonChiffonFFFACD255,250,205
 LightBlueADD8E6173,216,230
 LightCoralF08080240,128,128
 LightCyanE0FFFF224,255,255
 LightGoldenRodYellowFAFAD2250,250,210
 LightGrayD3D3D3211,211,211
 LightGreyD3D3D3211,211,211
 LightGreen90EE90144,238,144
 LightPinkFFB6C1255,182,193
 LightSalmonFFA07A255,160,122
 LightSeaGreen20B2AA32,178,170
 LightSkyBlue87CEFA135,206,250
 LightSlateGray778899119,136,153
 LightSlateGrey778899119,136,153
 LightSteelBlueB0C4DE176,196,222
 LightYellowFFFFE0255,255,224
 Lime00FF000,255,0
 LimeGreen32CD3250,205,50
 LinenFAF0E6250,240,230
 MagentaFF00FF255,0,255
 Maroon800000128,0,0
 MediumAquaMarine66CDAA102,205,170
 MediumBlue0000CD0,0,205
 MediumOrchidBA55D3186,85,211
 MediumPurple9370DB147,112,219
 MediumSeaGreen3CB37160,179,113
 MediumSlateBlue7B68EE123,104,238
 MediumSpringGreen00FA9A0,250,154
 MediumTurquoise48D1CC72,209,204
 MediumVioletRedC71585199,21,133
 MidnightBlue19197025,25,112
 MintCreamF5FFFA245,255,250
 MistyRoseFFE4E1255,228,225
 MoccasinFFE4B5255,228,181
 NavajoWhiteFFDEAD255,222,173
 Navy0000800,0,128
 OldLaceFDF5E6253,245,230
 Olive808000128,128,0
 OliveDrab6B8E23107,142,35
 OrangeFFA500255,165,0
 OrangeRedFF4500255,69,0
 OrchidDA70D6218,112,214
 PaleGoldenRodEEE8AA238,232,170
 PaleGreen98FB98152,251,152
 PaleTurquoiseAFEEEE175,238,238
 PaleVioletRedDB7093219,112,147
 PapayaWhipFFEFD5255,239,213
 PeachPuffFFDAB9255,218,185
 PeruCD853F205,133,63
 PinkFFC0CB255,192,203
 PlumDDA0DD221,160,221
 PowderBlueB0E0E6176,224,230
 Purple800080128,0,128
 RebeccaPurple663399102,51,153
 RedFF0000255,0,0
 RosyBrownBC8F8F188,143,143
 RoyalBlue4169E165,105,225
 SaddleBrown8B4513139,69,19
 SalmonFA8072250,128,114
 SandyBrownF4A460244,164,96
 SeaGreen2E8B5746,139,87
 SeaShellFFF5EE255,245,238
 SiennaA0522D160,82,45
 SilverC0C0C0192,192,192
 SkyBlue87CEEB135,206,235
 SlateBlue6A5ACD106,90,205
 SlateGray708090112,128,144
 SlateGrey708090112,128,144
 SnowFFFAFA255,250,250
 SpringGreen00FF7F0,255,127
 SteelBlue4682B470,130,180
 TanD2B48C210,180,140
 Teal0080800,128,128
 ThistleD8BFD8216,191,216
 TomatoFF6347255,99,71
 Turquoise40E0D064,224,208
 VioletEE82EE238,130,238
 WheatF5DEB3245,222,179
 WhiteFFFFFF255,255,255
 WhiteSmokeF5F5F5245,245,245
 YellowFFFF00255,255,0
 YellowGreen9ACD32154,205,50

Style Attribute

A simple and quick way to set an elements color value is by adding style="color:" attribute to that element, and then specify a color value. Applying the style attribute to an element will only affect that individual instance of that element.

The following example sets the foreground color of a header element to Green, resulting in its text to be displayed in green color:

 
<h2 style="color:green;">Hello World!</h2>

The output from the above code is:

Hello World!


If you don't want to use the default green, and lets say that you want to use a lighter shade of green, you can specify a HEX color value instead of using the colors name, for example:

 
<h2 style="color:#44FF77;">Hello Again!</h2>

The output from the above code is:

Hello Again!


Style Script

If you need or want to apply a color style to all elements of a specific type then you can add a Style Script to the head or body section of the web page and target that element type. This makes it easier to apply styles page wide without having to touch the code of each individual target element individually.

The following example would target all h5 header elements (and only h5 header elements) within the web page:

 
<style>
h5 {
  color: Tomato;
}
</style>

Alternatively, this style script could be added to an external .css file and then simply included into the web pages head section. Such an approach is best used when applying the same styles to multiple web pages or to all web pages within your web site, so that you only have to write the style code once instead of having to repeat it in each web page separately.


HSL Color Values

Another way to specify color is with HSL, which stands for Hue, Saturation, and Lightness. The syntax format HSL(hue, saturation, lightness) is used to specify the HSL color.

Shades of gray are often defined with HSL by setting the hue and saturation values to 0, and adjusting the lightness value from 0% to 100% to get darker/lighter shades.

HSLA is the same as HSL but with an Alpha parameter specified as well, which ranges from 0.0 to 1.0. The Alpha parameter is used to specify a transparency level, where 0.0 is full transparency and 1.0 is not transparent at all. The syntax format HSLA(hue, saturation, lightness, alpha) is used to specify the HSLA color.

An example for specifying an RGB color is:

 
<h2 style="color:hsl(0, 100%, 50%);">Amazing!</h2>

The output from the above code for specifying HSL color is:

Amazing!




Final Thoughts

Thank you for reading, I hope you found this blog post (tutorial) educational and helpful.


grayStargrayStargrayStargrayStargrayStar  Be the first to rate this post

User Comments






TJDivisions© 2022