HTML Color Codes
Last Updated :
05 Mar, 2024
HTML Color Codes is a complete library of all Colors that can be used in HTML with their color name, HEXA Code, RGB Code, and HSL Code.
With HTML Color Codes, you can easily integrate these colors directly into your HTML or CSS code, enhancing the visual appeal of your website.
Did you know? Most modern browsers support up to 140 Named Colors, making it even easier to implement color schemes seamlessly. Here, we’ve compiled a detailed list of All HTML Colors, categorized by Name, HEXA Code, RGB, and HSL representations.
This guide gives you everything you need to know about HTML color codes. Find the right colors for your website with:
Common HTML Color Codes and Names
Here are List of common HTML color codes:
| Color |
Color Name |
Hexa Code |
RGB Code |
HSL Code |
|
Deepest black |
#000000 |
rgb(0, 0, 0) |
hsl(0, 0%, 0%) |
|
Purest white |
#FFFFFF |
rgb(255, 255, 255) |
hsl(0, 0%, 100%) |
|
Classic red |
#FF0000 |
rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
|
Vibrant green |
#00FF00 |
rgb(0, 255, 0) |
hsl(120, 100%, 50%) |
|
Primary blue |
#0000FF |
rgb(0, 0, 255) |
hsl(240, 100%, 50%) |
|
Sunny yellow |
#FFFF00 |
rgb(255, 255, 0) |
hsl(60, 100%, 50%) |
|
Mid-tone gray |
#808080 |
rgb(128, 128, 128) |
hsl(0, 0%, 50%) |
|
Royal purple |
#800080 |
rgb(128, 0, 128) |
hsl(300, 100%, 25%) |
|
Bright orange |
#FFA500 |
rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
|
Light pink |
#FFC0CB |
rgb(255, 192, 203) |
hsl(350, 100%, 88%) |
|
Rich brown |
#A52A2A |
rgb(165, 42, 42) |
hsl(0, 59%, 41%) |
|
Deep red-brown |
#800000 |
rgb(128, 0, 0) |
hsl(0, 100%, 25%) |
|
Dark blue |
#000080 |
rgb(0, 0, 128) |
hsl(240, 100%, 25%) |
|
Blue-green |
#008080 |
rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
|
Very bright green (often interchangeable with #00FF00) |
#00FF00 |
rgb(0, 255, 0) |
hsl(120, 100%, 50%) |
|
Light blue-green |
#00FFFF |
rgb(0, 255, 255) |
hsl(180, 100%, 50%) |
|
Light gray with a metallic sheen |
#C0C0C0 |
rgb(192, 192, 192) |
hsl(0, 0%, 75%) |
|
Hot pink |
#FF00FF |
rgb(255, 0, 255) |
hsl(300, 100%, 50%) |
|
Greenish-brown |
#808000 |
rgb(128, 128, 0) |
hsl(60, 100%, 25%) |
|
Metallic gold |
#FFD700 |
rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
HTML Color Code Chart
The below tables provides a tabular representation of the color name with their HEX code, RGB code, and HSL code, allowing users to explore and identify different color shades easily.
Red HTML Color Codes
The below table illustrates the Color name and different code values of shades of red color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
IndianRed |
#CD5C5C |
rgb(205, 92, 92) |
hsl(0, 53%, 58%) |
|
|
LightCoral |
#F08080 |
rgb(240, 128, 128) |
hsl(0, 79%, 72%) |
|
|
Salmon |
#FA8072 |
rgb(250, 128, 114) |
hsl(6, 93%, 71%) |
|
|
DarkSalmon |
#E9967A |
rgb(233, 150, 122) |
hsl(15, 72%, 70%) |
|
|
LightSalmon |
#FFA07A |
rgb(255, 160, 122) |
hsl(17, 100%, 74%) |
|
|
Crimson |
#DC143C |
rgb(220, 20, 60) |
hsl(348, 83%, 47%) |
|
|
Red |
#FF0000 |
rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
|
|
FireBrick |
#B22222 |
rgb(178, 34, 34) |
hsl(0, 68%, 42%) |
|
|
DarkRed |
#8B0000 |
rgb(139, 0, 0) |
hsl(0, 100%, 27%) |
Please refer to the Shades-of-Red article for a detailed description.
Pink HTML Color Codes
The below table illustrates the Color name and different code values of shades of pink color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Pink |
#FFC0CB |
rgb(255, 192, 203) |
hsl(350, 100%, 88%) |
|
|
LightPink |
#FFB6C1 |
rgb(255, 182, 193) |
hsl(351, 100%, 86%) |
|
|
HotPink |
#FF69B4 |
rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
|
|
DeepPink |
#FF1493 |
rgb(255, 20, 147) |
hsl(328, 100%, 54%) |
|
|
MediumVioletRed |
#C71585 |
rgb(199, 21, 133) |
hsl(322, 81%, 43%) |
|
|
PaleVioletRed |
#DB7093 |
rgb(219, 112, 147) |
hsl(340, 60%, 65%) |
Please refer to the Shades-of-Pink article for a detailed description.
Orange HTML Color Codes
The below table illustrates the Color name and different code values of shades of orange color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
LightSalmon |
#FFA07A |
rgb(255, 160, 122) |
hsl(17, 100%, 74%) |
|
|
Coral |
#FF7F50 |
rgb(255, 127, 80) |
hsl(16, 100%, 66%) |
|
|
Tomato |
#FF6347 |
rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
|
|
OrangeRed |
#FF4500 |
rgb(255, 69, 0) |
hsl(16, 100%, 50%) |
|
|
DarkOrange |
#FF8C00 |
rgb(255, 140, 0) |
hsl(33, 100%, 50%) |
|
|
Orange |
#FFA500 |
rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
Please refer to the Shades-of-Orange article for a detailed description.
Yellow HTML Color Codes
The below table illustrates the Color name and different code values of shades of yellow color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Gold |
#FFD700 |
rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
|
|
Yellow |
#FFFF00 |
rgb(255, 255, 0) |
hsl(60, 100%, 50%) |
|
|
LightYellow |
#FFFFE0 |
rgb(255, 255, 224) |
hsl(60, 100%, 94%) |
|
|
LemonChiffon |
#FFFACD |
rgb(255, 250, 205) |
hsl(54, 100%, 90%) |
|
|
LightGoldenrodYellow |
#FAFAD2 |
rgb(250, 250, 210) |
hsl(60, 80%, 90%) |
|
|
PapayaWhip |
#FFEFD5 |
rgb(255, 239, 213) |
hsl(37, 100%, 92%) |
|
|
Moccasin |
#FFE4B5 |
rgb(255, 228, 181) |
hsl(38, 100%, 85%) |
|
|
PeachPuff |
#FFDAB9 |
rgb(255, 218, 185) |
hsl(28, 100%, 86%) |
|
|
PaleGoldenrod |
#EEE8AA |
rgb(238, 232, 170) |
hsl(55, 67%, 80%) |
|
|
Khaki |
#F0E68C |
rgb(240, 230, 140) |
hsl(54, 77%, 75%) |
|
|
DarkKhaki |
#BDB76B |
rgb(189, 183, 107) |
hsl(56, 38%, 58%) |
Please refer to the Shades-of-Yellow article for a detailed description.
Purple HTML Color Codes
The below table illustrates the Color name and different code values of shades of purple color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Lavender |
#E6E6FA |
rgb(230, 230, 250) |
hsl(240, 67%, 94%) |
|
|
Thistle |
#D8BFD8 |
rgb(216, 191, 216) |
hsl(300, 24%, 80%) |
|
|
Plum |
#DDA0DD |
rgb(221, 160, 221) |
hsl(300, 47%, 75%) |
|
|
Violet |
#EE82EE |
rgb(238, 130, 238) |
hsl(300, 76%, 72%) |
|
|
Orchid |
#DA70D6 |
rgb(218, 112, 214) |
hsl(302, 59%, 65%) |
|
|
Fuchsia |
#FF00FF |
rgb(255, 0, 255) |
hsl(300, 100%, 50%) |
|
|
MediumOrchid |
#BA55D3 |
rgb(186, 85, 211) |
hsl(288, 59%, 58%) |
|
|
MediumPurple |
#9370DB |
rgb(147, 112, 219) |
hsl(260, 60%, 65%) |
|
|
RebeccaPurple |
#663399 |
rgb(102, 51, 153) |
hsl(270, 50%, 40%) |
|
|
BlueViolet |
#8A2BE2 |
rgb(138, 43, 226) |
hsl(271, 76%, 53%) |
|
|
DarkViolet |
#9400D3 |
rgb(148, 0, 211) |
hsl(282, 100%, 41%) |
|
|
DarkOrchid |
#9932CC |
rgb(153, 50, 204) |
hsl(280, 61%, 50%) |
|
|
DarkMagenta |
#8B008B |
rgb(139, 0, 139) |
hsl(300, 100%, 27%) |
|
|
Purple |
#800080 |
rgb(128, 0, 128) |
hsl(300, 100%, 25%) |
|
|
Indigo |
#4B0082 |
rgb(75, 0, 130) |
hsl(275, 100%, 25%) |
|
|
SlateBlue |
#6A5ACD |
rgb(106, 90, 205) |
hsl(248, 53%, 58%) |
|
|
DarkSlateBlue |
#483D8B |
rgb(72, 61, 139) |
hsl(248, 39%, 39%) |
|
|
MediumSlateBlue |
#7B68EE |
rgb(123, 104, 238) |
hsl(249, 80%, 67%) |
Please refer to the Shades-of-Purple article for a detailed description.
Green HTML Color Codes
The below table illustrates the Color name and different code values of shades of green color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
GreenYellow |
#ADFF2F |
rgb(173, 255, 47) |
hsl(84, 100%, 59%) |
|
|
Chartreuse |
#7FFF00 |
rgb(127, 255, 0) |
hsl(90, 100%, 50%) |
|
|
LawnGreen |
#7CFC00 |
rgb(124, 252, 0) |
hsl(90, 100%, 49%) |
|
|
Lime |
#00FF00 |
rgb(0, 255, 0) |
hsl(120, 100%, 50%) |
|
|
LimeGreen |
#32CD32 |
rgb(50, 205, 50) |
hsl(120, 61%, 50%) |
|
|
PaleGreen |
#98FB98 |
rgb(152, 251, 152) |
hsl(120, 93%, 79%) |
|
|
LightGreen |
#90EE90 |
rgb(144, 238, 144) |
hsl(120, 73%, 75%) |
|
|
MediumSpringGreen |
#00FA9A |
rgb(0, 250, 154) |
hsl(157, 100%, 49%) |
|
|
SpringGreen |
#00FF7F |
rgb(0, 255, 127) |
hsl(150, 100%, 50%) |
|
|
MediumSeaGreen |
#3CB371 |
rgb(60, 179, 113) |
hsl(147, 50%, 47%) |
|
|
SeaGreen |
#2E8B57 |
rgb(46, 139, 87) |
hsl(146, 50%, 36%) |
|
|
ForestGreen |
#228B22 |
rgb(34, 139, 34) |
hsl(120, 61%, 34%) |
|
|
Green |
#008000 |
rgb(0, 128, 0) |
hsl(120, 100%, 25%) |
|
|
DarkGreen |
#006400 |
rgb(0, 100, 0) |
hsl(120, 100%, 20%) |
|
|
YellowGreen |
#9ACD32 |
rgb(154, 205, 50) |
hsl(80, 61%, 50%) |
|
|
OliveDrab |
#6B8E23 |
rgb(107, 142, 35) |
hsl(80, 60%, 35%) |
|
|
Olive |
#808000 |
rgb(128, 128, 0) |
hsl(60, 100%, 25%) |
|
|
DarkOliveGreen |
#556B2F |
rgb(85, 107, 47) |
hsl(82, 39%, 30%) |
|
|
MediumAquamarine |
#66CDAA |
rgb(102, 205, 170) |
hsl(160, 51%, 60%) |
|
|
DarkSeaGreen |
#8FBC8B |
rgb(143, 188, 139) |
hsl(115, 27%, 64%) |
|
|
LightSeaGreen |
#20B2AA |
rgb(32, 178, 170) |
hsl(177, 70%, 41%) |
|
|
DarkCyan |
#008B8B |
rgb(0, 139, 139) |
hsl(180, 100%, 27%) |
|
|
Teal |
#008080 |
rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
Please refer to the Shades-of-Green article for a detailed description.
Blue HTML Color Codes
The below table illustrates the Color name and different code values of shades of blue color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Aqua |
#00FFFF |
rgb(0, 255, 255) |
hsl(180, 100%, 50%) |
|
|
LightCyan |
#E0FFFF |
rgb(224, 255, 255) |
hsl(180, 100%, 94%) |
|
|
PaleTurquoise |
#AFEEEE |
rgb(175, 238, 238) |
hsl(180, 65%, 81%) |
|
|
Aquamarine |
#7FFFD4 |
rgb(127, 255, 212) |
hsl(160, 100%, 75%) |
|
|
Turquoise |
#40E0D0 |
rgb(64, 224, 208) |
hsl(174, 72%, 56%) |
|
|
MediumTurquoise |
#48D1CC |
rgb(72, 209, 204) |
hsl(178, 60%, 55%) |
|
|
DarkTurquoise |
#00CED1 |
rgb(0, 206, 209) |
hsl(181, 100%, 41%) |
|
|
CadetBlue |
#5F9EA0 |
rgb(95, 158, 160) |
hsl(182, 25%, 50%) |
|
|
SteelBlue |
#4682B4 |
rgb(70, 130, 180) |
hsl(207, 44%, 49%) |
|
|
LightSteelBlue |
#B0C4DE |
rgb(176, 196, 222) |
hsl(214, 41%, 78%) |
|
|
PowderBlue |
#B0E0E6 |
rgb(176, 224, 230) |
hsl(187, 52%, 80%) |
|
|
LightBlue |
#ADD8E6 |
rgb(173, 216, 230) |
hsl(195, 53%, 79%) |
|
|
SkyBlue |
#87CEEB |
rgb(135, 206, 235) |
hsl(197, 71%, 73%) |
|
|
LightSkyBlue |
#87CEFA |
rgb(135, 206, 250) |
hsl(203, 92%, 75%) |
|
|
DeepSkyBlue |
#00BFFF |
rgb(0, 191, 255) |
hsl(195, 100%, 50%) |
|
|
DodgerBlue |
#1E90FF |
rgb(30, 144, 255) |
hsl(210, 100%, 56%) |
|
|
CornflowerBlue |
#6495ED |
rgb(100, 149, 237) |
hsl(219, 79%, 66%) |
|
|
MediumSlateBlue |
#7B68EE |
rgb(123, 104, 238) |
hsl(249, 80%, 67%) |
|
|
RoyalBlue |
#4169E1 |
rgb(65, 105, 225) |
hsl(225, 73%, 57%) |
|
|
Blue |
#0000FF |
rgb(0, 0, 255) |
hsl(240, 100%, 50%) |
|
|
MediumBlue |
#0000CD |
rgb(0, 0, 205) |
hsl(240, 100%, 27%) |
|
|
DarkBlue |
#00008B |
rgb(0, 0, 139) |
hsl(240, 100%, 27%) |
|
|
Navy |
#000080 |
rgb(0, 0, 128) |
hsl(240, 100%, 25%) |
|
|
MidnightBlue |
#191970 |
rgb(25, 25, 112) |
hsl(240, 64%, 27%) |
Please refer to the Shades-of-Blue article for a detailed description.
Brown HTML Color Codes
The below table illustrates the Color name and different code values of shades of brown color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Cornsilk |
#FFF8DC |
rgb(255, 248, 220) |
hsl(48, 100%, 93%) |
|
|
BlanchedAlmond |
#FFEBCD |
rgb(255, 235, 205) |
hsl(36, 100%, 90%) |
|
|
Bisque |
#FFE4C4 |
rgb(255, 228, 196) |
hsl(33, 100%, 88%) |
|
|
NavajoWhite |
#FFDEAD |
rgb(255, 222, 173) |
hsl(36, 100%, 84%) |
|
|
Wheat |
#F5DEB3 |
rgb(245, 222, 179) |
hsl(39, 77%, 83%) |
|
|
BurlyWood |
#DEB887 |
rgb(222, 184, 135) |
hsl(34, 57%, 70%) |
|
|
Tan |
#D2B48C |
rgb(210, 180, 140) |
hsl(34, 44%, 69%) |
|
|
RosyBrown |
#BC8F8F |
rgb(188, 143, 143) |
hsl(0, 25%, 65%) |
|
|
SandyBrown |
#F4A460 |
rgb(244, 164, 96) |
hsl(28, 87%, 67%) |
|
|
Goldenrod |
#DAA520 |
rgb(218, 165, 32) |
hsl(43, 74%, 49%) |
|
|
DarkGoldenrod |
#B8860B |
rgb(184, 134, 11) |
hsl(43, 89%, 38%) |
|
|
Peru |
#CD853F |
rgb(205, 133, 63) |
hsl(30, 59%, 53%) |
|
|
Chocolate |
#D2691E |
rgb(210, 105, 30) |
hsl(25, 75%, 47%) |
|
|
SaddleBrown |
#8B4513 |
rgb(139, 69, 19) |
hsl(25, 76%, 31%) |
|
|
Sienna |
#A0522D |
rgb(160, 82, 45) |
hsl(19, 56%, 40%) |
|
|
Brown |
#A52A2A |
rgb(165, 42, 42) |
hsl(0, 59%, 41%) |
|
|
Maroon |
#800000 |
rgb(128, 0, 0) |
hsl(0, 100%, 25%) |
Please refer to the Shades-of-Brown article for a detailed description.
White HTML Color Codes
The below table illustrates the Color name and different code values of shades of white color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
White |
#FFFFFF |
rgb(255, 255, 255) |
hsl(0, 0%, 100%) |
|
|
Snow |
#FFFAFA |
rgb(255, 250, 250) |
hsl(0, 100%, 99%) |
|
|
HoneyDew |
#F0FFF0 |
rgb(240, 255, 240) |
hsl(120, 100%, 97%) |
|
|
MintCream |
#F5FFFA |
rgb(245, 255, 250) |
hsl(150, 100%, 98%) |
|
|
Azure |
#F0FFFF |
rgb(240, 255, 255) |
hsl(180, 100%, 97%) |
|
|
AliceBlue |
#F0F8FF |
rgb(240, 248, 255) |
hsl(208, 100%, 97%) |
|
|
GhostWhite |
#F8F8FF |
rgb(248, 248, 255) |
hsl(240, 100%, 99%) |
|
|
WhiteSmoke |
#F5F5F5 |
rgb(245, 245, 245) |
hsl(0, 0%, 96%) |
|
|
SeaShell |
#FFF5EE |
rgb(255, 245, 238) |
hsl(25, 100%, 97%) |
|
|
Beige |
#F5F5DC |
rgb(245, 245, 220) |
hsl(60, 56%, 91%) |
|
|
OldLace |
#FDF5E6 |
rgb(253, 245, 230) |
hsl(39, 85%, 95%) |
|
|
FloralWhite |
#FFFAF0 |
rgb(255, 250, 240) |
hsl(60, 100%, 97%) |
|
|
Ivory |
#FFFFF0 |
rgb(255, 255, 240) |
hsl(60, 100%, 97%) |
|
|
AntiqueWhite |
#FAEBD7 |
rgb(250, 235, 215) |
hsl(34, 78%, 91%) |
|
|
Linen |
#FAF0E6 |
rgb(250, 240, 230) |
hsl(30, 67%, 94%) |
|
|
LavenderBlush |
#FFF0F5 |
rgb(255, 240, 245) |
hsl(340, 100%, 97%) |
|
|
MistyRose |
#FFE4E1 |
rgb(255, 228, 225) |
hsl(6, 100%, 94%) |
Please refer to the Shades-of-White article for a detailed description.
Gray HTML Color Codes
The below table illustrates the Color name and different code values of shades of gray color.
|
Color
|
Color Name |
HEX Code |
RGB Code |
HSL Code |
|
|
Gainsboro |
#DCDCDC |
rgb(220, 220, 220) |
hsl(0, 0%, 86%) |
|
|
LightGray |
#D3D3D3 |
rgb(211, 211, 211) |
hsl(0, 0%, 83%) |
|
|
Silver |
#C0C0C0 |
rgb(192, 192, 192) |
hsl(0, 0%, 75%) |
|
|
DarkGray |
#A9A9A9 |
rgb(169, 169, 169) |
hsl(0, 0%, 66%) |
|
|
Gray |
#808080 |
rgb(128, 128, 128) |
hsl(0, 0%, 50%) |
|
|
DimGray |
#696969 |
rgb(105, 105, 105) |
hsl(0, 0%, 41%) |
|
|
LightSlateGray |
#778899 |
rgb(119, 136, 153) |
hsl(210, 14%, 53%) |
|
|
SlateGray |
#708090 |
rgb(112, 128, 144) |
hsl(210, 13%, 50%) |
|
|
DarkSlateGray |
#2F4F4F |
rgb(47, 79, 79) |
hsl(180, 25%, 25%) |
|
|
Black |
#000000 |
rgb(0, 0, 0) |
hsl(0, 0%, 0%) |
Please refer to the Shades-of-Gray article for a detailed description.
What are HTML color codes?
HTML offers various methods for specifying colors, with two of the most popular options being color names and hexadecimal (hex) codes. let’s discuss this in details:
Color Names:
HTML supports around 140 predefined color names. These names are easy to remember and use, making them a good choice for basic color needs. Here are some common examples:
- Red: #FF0000
- Green: #00FF00
- Blue: #0000FF
- Black: #000000
- White: #FFFFFF
- Yellow: #FFFF00
- Purple: #800080
- Gray: #808080
- Orange: #FFA500
Hex Codes:
Hex codes represent colors using a 6-digit hexadecimal value preceded by a hash (#). Each pair of digits specifies the intensity of red, green, and blue components (ranging from 00 to FF). Here’s the format:
#RRGGBB
- RR: Red component (00 to FF)
- GG: Green component (00 to FF)
- BB: Blue component (00 to FF)
For example, the hex code for red is #FF0000 (FF for maximum red intensity, 00 for no green and blue).
Color Picker
The color picker is a tool that allows you to choose a color from a selection of color boxes. This color picker offers various color boxes with different appearances.
What you can Do?
- You can select a color and obtain its corresponding RGB and Hex values.
- Additionally, you can modify the RGB and Hex values to see how the color changes.
Learn Web Design Fundamentals
Below are some resources for improving your website’s design.
Share your thoughts in the comments
Please Login to comment...