Colors are used for texts, borders and backgrounds in HTML. They are specified using predefined color names or one of the (RGB, HEX, HSL, RGBA, HSLA) values.
HTML supports well over 100 standard color names. So, a color can be specified by its name in CSS. Here are the colors that you can specify using their name.
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 / DarkGrey #A9A9A9 |
DarkGreen #006400 |
DarkKhaki #BDB76B |
DarkMagenta #8B008B |
DarkOliveGreen #556B2F |
DarkOrange #FF8C00 |
DarkOrchid #9932CC |
DarkRed #8B0000 |
DarkSalmon #E9967A |
DarkSeaGreen #8FBC8F |
DarkSlateBlue #483D8B |
DarkSlateGray / DarkSlateGrey #2F4F4F |
DarkTurquoise #00CED1 |
DarkViolet #9400D3 |
DeepPink #FF1493 |
DeepSkyBlue #00BFFF |
DimGray / DimGrey #696969 |
DodgerBlue #1E90FF |
FireBrick #B22222 |
FloralWhite #FFFAF0 |
ForestGreen #228B22 |
Fuchsia #FF00FF |
Gainsboro #DCDCDC |
GhostWhite #F8F8FF |
Gold #FFD700 |
GoldenRod #DAA520 |
Gray / 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 |
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 |
|
You can use CSS colors to set the text color for HTML elements.
<p style="color: red">Hello World</p>
Hello World
You can use CSS colors to set the background color for HTML elements.
<h3 style="background: dodgerblue; padding: 30px; text-align: center; margin-bottom: 0;color:white;">Hello World</h3> <p style="background: turquoise; padding: 10px; text-align: justify;">This is a dummy text...</p>
This is a dummy text paragraph used by webtrickshome CSS tutorial for colors to illustrate the use of colors as dbackground for HTML elements.
You can set the color of borders too using CSS colors.
<h3 style="border:2px solid black; padding: 10px;">Hello World</h3>
Colors can be specified not only by their names but also by their RGB, HEX, RGBA or HSLA values too.
A color can be specified as an RGB value defining the intensity of three primary colors red, green and blue present in a color. The highest value for each of the primary colors is 255 while the lowest value is 0. Equal value of each color except the lowest and highest value creates shades of grey.
p{
color: rgb(120,120,120);
}
| rgb(255,0,0) | rgb(0,255,0) | rgb(0,0,255) | rgb(255,255,255) | rgb(0,0,0) | rgb(255,255,0) | rgb(0,255,255) | rgb(255,0,255) |
A color can be specified using a hexadecimal value too where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0-255). Shades of gray are often defined using equal values for all the 3 light sources.
p{
color: #ff0000;
}
| #ff0000 | #0000ff | #3cb371 | #ee82ee | #ffa500 | #6a5acd |
A color can be specified using hue, saturation and lightness (HSL) value where hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green and 240 is blue. Saturation is a percentage value where 0% means a shade of gray and 100% is the full color. Lightness is also a percentage where 0% is black, 50% is neither light or dark and 100% is white.
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the lightness from 0% to 100% to get darker/lighter shades
p{
color: hsl(0, 100%, 50%);
}
| hsl(0, 100%, 50%) | hsl(240, 100%, 50%) | hsl(147, 50%, 47%) | hsl(300, 76%, 72%) | hsl(39, 100%, 50%) | hsl(248, 53%, 58%) |
RGBA color values are an extension of RGB color values with an additional alpha parameter which specifies the opacity for the color. The alpha parameter is a number between 0 and 1 where 0 is the value for fully transparent color.
p{
color: rgba(255, 99, 71, 0.2);
}
| rgba(255, 99, 71, 0) | rgba(255, 99, 71, 0.2) | rgba(255, 99, 71, 0.4) | rgba(255, 99, 71, 0.6) | rgba(255, 99, 71, 0.8) | rgba(255, 99, 71, 1) |
HSLA color values are an extension of HSL color values with an additional alpha parameter which specifies the opacity for the color. The alpha parameter is a number between 0 and 1 where 0 is the value for fully transparent color.
p{
color: hsla(9, 100%, 64%, 0.4);
}
| hsla(9, 100%, 64%, 0) | hsla(9, 100%, 64%, 0.2) | hsla(9, 100%, 64%, 0.4) | hsla(9, 100%, 64%, 0.6) | hsla(9, 100%, 64%, 0.8) | hsla(9, 100%, 64%, 1) |
You can find a huge number of onine color value generators like W3School HTML Color Picker or RGB Color Codes Chart or you can rely on Adobe Photoshop to get such color values.
Leave a comment