There are millions of colors available by mixing the primary Red, Green and Blue colors in various combinations. However, using a web safe HTML color code is important in designing websites, apps and other UI elements. This helps to offer consistent and eye warming colors across devices and browsers. In this article, we explore a curated list of 100 web safe HTML colors, each with its unique color name, hex code, RGB code, and HSL value. Whether you are a web developer or a design enthusiast, using these colors in your projects ensures a seamless and visually appealing experience for your audience. Also, check out flat UI color codes for your projects and color codes for social network brands.
100 HTML Color Codes
The table has Hex, RGB and HSL codes for each color name. Use the search box to filter and find relevant colors.
- Hex Code is 6 digits hexadecimal code for a color starts with # sign.
- RGB Code is a combination of Red, Green and Blue from 0 to 255 values.
- HSL Code is in (hue, saturation%, lightness%) format and is rounded to nearest % value.
| Color Name | Hex Code | RGB Code | HSL Code |
|---|---|---|---|
| Antique White | #FAEBD7 | rgb(250, 235, 215) | hsl(34, 78%, 91%) |
| Aqua | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Aqua Marine | #7FFFD4 | rgb(127, 255, 212) | hsl(160, 100%, 74%) |
| Azure | #F0FFFF | rgb(240, 255, 255) | hsl(180, 100%, 97%) |
| Beige | #F5F5DC | rgb(245, 245, 220) | hsl(60, 56%, 91%) |
| Bisque | #FFE4C4 | rgb(255, 228, 196) | hsl(33, 100%, 88%) |
| Black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Blanched Almond | #FFEBCD | rgb(255, 235, 205) | hsl(36, 100%, 90%) |
| Blue | #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| Blue Violet | #8A2BE2 | rgb(138, 43, 226) | hsl(271, 76%, 53%) |
| Brown | #A52A2A | rgb(165, 42, 42) | hsl(0, 59%, 41%) |
| Cadet Blue | #5F9EA0 | rgb(95, 158, 160) | hsl(182, 25%, 50%) |
| Coral | #FF7F50 | rgb(255, 127, 80) | hsl(16, 100%, 66%) |
| Corn Flower Blue | #6495ED | rgb(100, 149, 237) | hsl(219, 79%, 66%) |
| Cornsilk | #FFF8DC | rgb(255, 248, 220) | hsl(48, 100%, 93%) |
| Crimson | #DC143C | rgb(220, 20, 60) | hsl(348, 83%, 47%) |
| Cyan | #00FFFF | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| Dark Blue | #00008B | rgb(0, 0, 139) | hsl(240, 100%, 27%) |
| Dark Cyan | #008B8B | rgb(0, 139, 139) | hsl(180, 100%, 27%) |
| Dark Golden Rod | #B8860B | rgb(184, 134, 11) | hsl(43, 89%, 38%) |
| Dark Khaki | #BDB76B | rgb(189, 183, 107) | hsl(56, 38%, 58%) |
| Dark Magenta | #8B008B | rgb(139, 0, 139) | hsl(300, 100%, 27%) |
| Dark Olive Green | #556B2F | rgb(85, 107, 47) | hsl(82, 39%, 30%) |
| Dark Orange | #FF8C00 | rgb(255, 140, 0) | hsl(33, 100%, 50%) |
| Dark Orchid | #9932CC | rgb(153, 50, 204) | hsl(280, 61%, 50%) |
| Dark Red | #8B0000 | rgb(139, 0, 0) | hsl(0, 100%, 27%) |
| Dark Salmon | #E9967A | rgb(233, 150, 122) | hsl(15, 72%, 70%) |
| Dark Sea Green | #8FBC8F | rgb(143, 188, 143) | hsl(120, 25%, 65%) |
| Dark Slate Blue | #483D8B | rgb(72, 61, 139) | hsl(248, 39%, 39%) |
| Dark Slate Gray | #2F4F4F | rgb(47, 79, 79) | hsl(180, 25%, 24%) |
| Dark Turquoise | #00CED1 | rgb(0, 206, 209) | hsl(181, 100%, 41%) |
| Dark Violet | #9400D3 | rgb(148, 0, 211) | hsl(282, 100%, 41%) |
| Deep Pink | #FF1493 | rgb(255, 20, 147) | hsl(322, 100%, 54%) |
| Deep Sky Blue | #00BFFF | rgb(0, 191, 255) | hsl(195, 100%, 50%) |
| Dodger Blue | #1E90FF | rgb(30, 144, 255) | hsl(210, 100%, 56%) |
| Fire Brick | #B22222 | rgb(178, 34, 34) | hsl(0, 68%, 42%) |
| Gold | #FFD700 | rgb(255, 215, 0) | hsl(51, 100%, 50%) |
| Golden Rod | #DAA520 | rgb(218, 165, 32) | hsl(43, 74%, 49%) |
| Gray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Green | #008000 | rgb(0, 128, 0) | hsl(120, 100%, 25%) |
| Honeydew | #F0FFF0 | rgb(240, 255, 240) | hsl(120, 100%, 97%) |
| Hot Pink | #FF69B4 | rgb(255, 105, 180) | hsl(330, 100%, 71%) |
| Indian Red | #CD5C5C | rgb(205, 92, 92) | hsl(0, 53%, 58%) |
| Indigo | #4B0082 | rgb(75, 0, 130) | hsl(275, 100%, 25%) |
| Khaki | #F0E68C | rgb(240, 230, 140) | hsl(54, 77%, 75%) |
| Lavender | #E6E6FA | rgb(230, 230, 250) | hsl(240, 67%, 94%) |
| Lavender Blush | #FFF0F5 | rgb(255, 240, 245) | hsl(340, 100%, 97%) |
| Lemon Chiffon | #FFFACD | rgb(255, 250, 205) | hsl(54, 100%, 90%) |
| Light Blue | #ADD8E6 | rgb(173, 216, 230) | hsl(195, 53%, 79%) |
| Light Coral | #F08080 | rgb(240, 128, 128) | hsl(0, 79%, 72%) |
| Light Cyan | #E0FFFF | rgb(224, 255, 255) | hsl(180, 100%, 94%) |
| Light Golden Rod Yellow | #FAFAD2 | rgb(250, 250, 210) | hsl(60, 80%, 90%) |
| Light Pink | #FFB6C1 | rgb(255, 182, 193) | hsl(351, 100%, 86%) |
| Light Salmon | #FFA07A | rgb(255, 160, 122) | hsl(17, 100%, 74%) |
| Light Sea Green | #20B2AA | rgb(32, 178, 170) | hsl(177, 70%, 41%) |
| Light Sky Blue | #87CEFA | rgb(135, 206, 250) | hsl(203, 92%, 75%) |
| Lime | #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Magenta | #FF00FF | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| Maroon | #800000 | rgb(128, 0, 0) | hsl(0, 100%, 25%) |
| Medium Aquamarine | #66CDAA | rgb(102, 205, 170) | hsl(160, 51%, 60%) |
| Medium Blue | #0000CD | rgb(0, 0, 205) | hsl(240, 100%, 40%) |
| Medium Orchid | #BA55D3 | rgb(186, 85, 211) | hsl(288, 59%, 58%) |
| Medium Purple | #9370DB | rgb(147, 112, 219) | hsl(260, 59%, 65%) |
| Medium SlateBlue | #7B68EE | rgb(123, 104, 238) | hsl(248, 79%, 67%) |
| Medium Turquoise | #48D1CC | rgb(72, 209, 204) | hsl(177, 60%, 55%) |
| Medium Violet Red | #C71585 | rgb(199, 21, 133) | hsl(322, 81%, 43%) |
| Midnight Blue | #191970 | rgb(25, 25, 112) | hsl(240, 64%, 27%) |
| Mint Cream | #F5FFFA | rgb(245, 255, 250) | hsl(150, 100%, 98%) |
| Moccasin | #FFE4B5 | rgb(255, 228, 181) | hsl(38, 100%, 85%) |
| Navajo White | #FFDEAD | rgb(255, 222, 173) | hsl(35, 100%, 83%) |
| Navy | #000080 | rgb(0, 0, 128) | hsl(240, 100%, 25%) |
| Olive | #808000 | rgb(128, 128, 0) | hsl(60, 100%, 25%) |
| Olive Drab | #6B8E23 | rgb(107, 142, 35) | hsl(82, 60%, 35%) |
| Orange | #FFA500 | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| Orange Red | #FF4500 | rgb(255, 69, 0) | hsl(16, 100%, 50%) |
| Orchid | #DA70D6 | rgb(218, 112, 214) | hsl(302, 59%, 65%) |
| Pale Golden Rod | #EEE8AA | rgb(238, 232, 170) | hsl(55, 67%, 80%) |
| Pale Turquoise | #AFEEEE | rgb(175, 238, 238) | hsl(180, 64%, 81%) |
| Pale Violet Red | #DB7093 | rgb(219, 112, 147) | hsl(340, 60%, 65%) |
| Peach Puff | #FFDAB9 | rgb(255, 218, 185) | hsl(28, 100%, 86%) |
| Pink | #FFC0CB | rgb(255, 192, 203) | hsl(351, 100%, 88%) |
| Plum | #DDA0DD | rgb(221, 160, 221) | hsl(300, 47%, 74%) |
| Powder Blue | #B0E0E6 | rgb(176, 224, 230) | hsl(187, 52%, 80%) |
| Purple | #800080 | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| Red | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Royal Blue | #4169E1 | rgb(65, 105, 225) | hsl(225, 73%, 57%) |
| Salmon | #FA8072 | rgb(250, 128, 114) | hsl(6, 93%, 71%) |
| Silver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) |
| Sky Blue | #87CEEB | rgb(135, 206, 235) | hsl(197, 71%, 73%) |
| Slate Blue | #6A5ACD | rgb(106, 90, 205) | hsl(248, 53%, 58%) |
| Steel Blue | #4682B4 | rgb(70, 130, 180) | hsl(207, 44%, 49%) |
| Teal | #008080 | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| Thistle | #D8BFD8 | rgb(216, 191, 216) | hsl(300, 24%, 79%) |
| Tomato | #FF6347 | rgb(255, 99, 71) | hsl(9, 100%, 64%) |
| Turquoise | #40E0D0 | rgb(64, 224, 208) | hsl(174, 72%, 56%) |
| Violet | #EE82EE | rgb(238, 130, 238) | hsl(300, 76%, 72%) |
| Wheat | #F5DEB3 | rgb(245, 222, 179) | hsl(39, 77%, 83%) |
| White | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| Yellow Green | #9ACD32 | rgb(154, 205, 50) | hsl(80, 61%, 50%) |
Using HTML Color Codes in CSS
There are different ways to use these colors in your CSS either as an inline code for a single element or as an external file affecting all elements on the page. Below is an example of using Maroon color background for a paragraph element in HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Maroon Background Example</title>
<style>
.maroon-background {
background-color: maroon;
color: white; /* Setting text color to white for better readability on dark background */
}
</style>
</head>
<body>
<p class="maroon-background">
The rich and deep hue of Maroon sets the stage for a bold and impactful design. This background color, with its Hex code of #800000, RGB code of (128, 0, 0) and HSL code of (0, 100%, 25%), adds a touch of sophistication and elegance to your content. Whether used as an accent or as a dominant color, Maroon can evoke a sense of strength and style in your web projects.
</p>
</body>
</html>The code will produce a paragraph with a Maroon color background as below:
The rich and deep hue of Maroon sets the stage for a bold and impactful design. This background color, with its Hex code of #800000, RGB code of (128, 0, 0) and HSL code of (0, 100%, 25%), adds a touch of sophistication and elegance to your content. Whether used as an accent or as a dominant color, Maroon can evoke a sense of strength and style in your web projects.
Using Color Pickers
There are different color pickers available to make your life easier instead of remembering the colors.
For Online Use
You can use our free online color picker tool to drag and get the color code values for any colors visually.
Alternatively, you can search any color code in Google Search to view a color picker and get its RGB, HEX, HSL and HSV (Hue, Saturation, Value) codes.
On Windows PC, you can use apps like Microsoft PowerToys to open color picker. This app helps to reveal the color picking tool whenever you want with a keyboard shortcut. Mac comes with an in-built Digital Color Meter app. Simply hover over any color on the screen and the app will show its code values.
