Updated February 21, 2023
Introduction to HTML Color Names
The HTML Color Names are properly denoted in the para. Colors are important, not only they are used to decorate a webpage, but in some cases, you may want to change the text color to provide a better contrast against the page background. Considering HTML is written in text form, you can’t just color the code to your liking and expect the web browser to use the same color when rendering the page. Instead, you will have to resort to using tags and attributes to tell the browser which color to use.
Using HTML Color Names
Implementing colors on your webpage is easy and can be done both inline and via a separate CSS Stylesheet.
When you are going to be using the same HTML Color Names on a page multiple times, it is a better idea to use CSS Sheet to define and set colors. Conversely, if you only have to use color once or twice, using the inline method is considered better.
1. Using HTML Color Inline
<body>
<h3 style="color: Brown">Brown H3 Heading</h3>
<p style="color: Gainsboro">Gainsboro colored paragraph text</p>
</body>2. Implementing in CSS
h1 { color: Brown; }
p { color: Gainsboro; }Different HTML Color Names
Now that you know what HTML Color Names are and how you can use them in your pages, here is a link of Color names that you can bookmark and use in your projects:
1. Grey and Black HTML Color Names
Grey and Black colors are, in most cases perfect for the text color of the page as against a white background these colors have the best readability. One interesting thing to keep in mind is that modern phones with OLED displays done need any battery power to display Black color if your audience is going to be on mobile, it is a wise idea to use Black as a background color and white or other light colors as the foreground color.
| Code | Color |
| #000000 | Black |
| #0C090A | Night |
| #2C3539 | Gunmetal |
| #2B1B17 | Midnight |
| #34282C | Charcoal |
| #25383C | Dark Slate Grey |
| #3B3131 | Oil |
| #413839 | Black Cat |
| #3D3C3A | Iridium |
| #463E3F | Black Eel |
| #4C4646 | Black Cow |
| #504A4B | Gray Wolf |
| #565051 | Vampire Gray |
| #5C5858 | Gray Dolphin |
| #625D5D | Carbon Gray |
| #666362 | Ash Gray |
| #6D6968 | Cloudy Gray |
| #726E6D | Smokey Gray |
| #736F6E | Gray |
| #837E7C | Granite |
| #848482 | Battleship Gray |
| #B6B6B4 | Gray Cloud |
| #D1D0CE | Gray Goose |
| #E5E4E2 | Platinum |
| #BCC6CC | Metallic Silver |
| #98AFC7 | Blue Gray |
| #6D7B8D | Light Slate Gray |
| #657383 | Slate Gray |
| #616D7E | Jet Gray |
2. Blue HTML Color Names
Blue underlined text is considered as a Link as it is the default link style for most web browsers, you should avoid using blue for all text on a page as visitors can mistake it for hyperlinks.
| #646D7E | Mist Blue |
| #566D7E | Marble Blue |
| #737CA1 | Slate Blue |
| #4863A0 | Steel Blue |
| #2B547E | Blue Jay |
| #2B3856 | Dark Slate Blue |
| #151B54 | Midnight Blue |
| #000080 | Navy Blue |
| #342D7E | Blue Whale |
| #15317E | Lapis Blue |
| #151B8D | Denim Dark Blue |
| #0000A0 | Earth Blue |
| #0020C2 | Cobalt Blue |
| #0041C2 | Blueberry Blue |
| #2554C7 | Sapphire Blue |
| #1569C7 | Blue Eyes |
| #2B60DE | Royal Blue |
| #1F45FC | Blue Orchid |
| #6960EC | Blue Lotus |
| #736AFF | Light Slate Blue |
| #357EC7 | Windows Blue |
| #368BC1 | Glacial Blue Ice |
| #488AC7 | Silk Blue |
| #3090C7 | Blue Ivy |
| #659EC7 | Blue Koi |
| #87AFC7 | Columbia Blue |
| #95B9C7 | Baby Blue |
| #728FCE | Light Steel Blue |
| #2B65EC | Ocean Blue |
| #306EFF | Blue Ribbon |
| #157DEC | Blue Dress |
| #1589FF | Dodger Blue |
| #6495ED | Cornflower Blue |
| #6698FF | Sky Blue |
| #38ACEC | Butterfly Blue |
| #56A5EC | Iceberg |
| #5CB3FF | Crystal Blue |
| #3BB9FF | Deep Sky Blue |
| #79BAEC | Denim Blue |
| #82CAFA | Light Sky Blue |
| #82CAFF | Day Sky Blue |
| #A0CFEC | Jeans Blue |
| #B7CEEC | Blue Angel |
| #B4CFEC | Pastel Blue |
| #C2DFFF | Sea Blue |
| #C6DEFF | Powder Blue |
| #AFDCEC | Coral Blue |
| #ADDFFF | Light Blue |
| #BDEDFF | Robin Egg Blue |
| #CFECEC | Pale Blue Lily |
| #E0FFFF | Light Cyan |
| #EBF4FA | Water |
| #F0F8FF | AliceBlue |
| #F0FFFF | Azure |
| #CCFFFF | Light Slate |
| #93FFE8 | Light Aquamarine |
| #9AFEFF | Electric Blue |
| #7FFFD4 | Aquamarine |
| #00FFFF | Cyan or Aqua |
| #7DFDFE | Tron Blue |
| #57FEFF | Blue Zircon |
| #8EEBEC | Blue Lagoon |
| #50EBEC | Celeste |
| #4EE2EC | Blue Diamond |
| #81D8D0 | Tiffany Blue |
| #92C7C7 | Cyan Opaque |
| #77BFC7 | Blue Hosta |
| #78C7C7 | Northern Lights Blue |
| #48CCCD | Medium Turquoise |
| #43C6DB | Turquoise |
| #46C7C7 | Jellyfish |
| #7BCCB5 | Blue green |
3. Green HTML Colors
On sites related to nature, money, environment, etc, Green can be a good choice of color to use as a background.
| #43BFC7 | Macaw Blue Green |
| #3EA99F | Light Sea Green |
| #3B9C9C | Dark Turquoise |
| #438D80 | Sea Turtle Green |
| #348781 | Medium Aquamarine |
| #307D7E | Greenish Blue |
| #5E7D7E | Grayish Turquoise |
| #4C787E | Beetle Green |
| #008080 | Teal |
| #4E8975 | Sea Green |
| #78866B | Camouflage Green |
| #848b79 | Sage Green |
| #617C58 | Hazel Green |
| #728C00 | Venom Green |
| #667C26 | Fern Green |
| #254117 | Dark Forest Green |
| #306754 | Medium Sea Green |
| #347235 | Medium Forest Green |
| #437C17 | Seaweed Green |
| #387C44 | Pine Green |
| #347C2C | Jungle Green |
| #347C17 | Shamrock Green |
| #348017 | Medium Spring Green |
| #4E9258 | Forest Green |
| #6AA121 | Green Onion |
| #4AA02C | Spring Green |
| #41A317 | Lime Green |
| #3EA055 | Clover Green |
| #6CBB3C | Green Snake |
| #6CC417 | Alien Green |
| #4CC417 | Green Apple |
| #52D017 | Yellow Green |
| #4CC552 | Kelly Green |
| #54C571 | Zombie Green |
| #99C68E | Frog Green |
| #89C35C | Green Peas |
| #85BB65 | Dollar Bill Green |
| #8BB381 | Dark Sea Green |
| #9CB071 | Iguana Green |
| #B2C248 | Avocado Green |
| #9DC209 | Pistachio Green |
| #A1C935 | Salad Green |
| #7FE817 | Hummingbird Green |
| #59E817 | Nebula Green |
| #57E964 | Stoplight Go Green |
| #64E986 | Algae Green |
| #5EFB6E | Jade Green |
| #00FF00 | Green |
| #5FFB17 | Emerald Green |
| #87F717 | Lawn Green |
| #8AFB17 | Chartreuse |
| #6AFB92 | Dragon Green |
| #98FF98 | Mint green |
| #B5EAAA | Green Thumb |
| #C3FDB8 | Light Jade |
| #CCFB5D | Tea Green |
| #B1FB17 | Green Yellow |
| #BCE954 | Slime Green |
| #EDDA74 | Goldenrod |
| #EDE275 | Harvest Gold |
| #FFE87C | Sun Yellow |
4. Yellow HTML Color Names
Yellow can be used to set a non-serious mood, and show creativity and optimism on a page. Keep in mind that yellow works better as a background than text color.
| #FFFF00 | Yellow |
| #FFF380 | Corn Yellow |
| #FFFFC2 | Parchment |
| #FFFFCC | Cream |
| #FFF8C6 | Lemon Chiffon |
| #FFF8DC | Cornsilk |
| #F5F5DC | Beige |
| #FBF6D9 | Blonde |
| #FAEBD7 | AntiqueWhite |
| #F7E7CE | Champagne |
| #FFEBCD | BlanchedAlmond |
| #F3E5AB | Vanilla |
| #ECE5B6 | Tan Brown |
| #FFE5B4 | Peach |
| #FFDB58 | Mustard |
| #FFD801 | Rubber Ducky Yellow |
| #FDD017 | Bright Gold |
| #EAC117 | Golden brown |
| #F2BB66 | Macaroni and Cheese |
| #FBB917 | Saffron |
| #FBB117 | Beer |
| #FFA62F | Cantaloupe |
| #E9AB17 | Bee Yellow |
5. Orange HTML Colors
Orange works great to highlight a point when color is used as a background and it can evoke a feeling of enthusiasm and warmth without being too tacky.6. Orange HTML Colors.
| #C47451 | Orange Salmon |
| #C36241 | Rust |
| #C35817 | Red Fox |
| #C85A17 | Chocolate |
| #CC6600 | Sedona |
| #E56717 | Papaya Orange |
| #E66C2C | Halloween Orange |
| #F87217 | Pumpkin Orange |
| #F87431 | Construction Cone Orange |
| #E67451 | Sunrise Orange |
| #FF8040 | Mango Orange |
| #F88017 | Dark Orange |
| #FF7F50 | Coral |
| #F88158 | Basket Ball Orange |
| #F9966B | Light Salmon |
| #E78A61 | Tangerine |
| #E18B6B | Dark Salmon |
| #E77471 | Light Coral |
| #F75D59 | Bean Red |
| #E55451 | Valentine Red |
| #E55B3C | Shocking Orange |
6. Red HTML Color Codes
For some browsers, Red underlined text is used as visited links, you should avoid using it to not confuse the visitors.
| #FF0000 | Red |
| #FF2400 | Scarlet |
| #F62217 | Ruby Red |
| #F70D1A | Ferrari Red |
| #F62817 | Fire Engine Red |
| #E42217 | Lava Red |
| #E41B17 | Love Red |
| #DC381F | Grapefruit |
| #C34A2C | Chestnut Red |
| #C24641 | Cherry Red |
| #C04000 | Mahogany |
| #C11B17 | Chilli Pepper |
| #9F000F | Cranberry |
| #990012 | Red Wine |
| #8C001A | Burgundy |
| #954535 | Chestnut |
| #7E3517 | Blood Red |
| #8A4117 | Sienna |
| #7E3817 | Sangria |
| #800517 | Firebrick |
| #810541 | Maroon |
| #7D0541 | Plum Pie |
| #7E354D | Velvet Maroon |
| #7D0552 | Plum Velvet |
| #7F4E52 | Rosy Finch |
| #7F5A58 | Puce |
| #7F525D | Dull Purple |
| #B38481 | Rosy Brown |
| #C5908E | Khaki Rose |
7. Pink HTML Color Codes
According to color science, Pink and its shades can be used if you want the visitor to have a feeling of confidence, sophistication, and warmness in their subconscious.
| #C48189 | Pink Bow |
| #C48793 | Lipstick Pink |
| #E8ADAA | Rose |
| #ECC5C0 | Rose Gold |
| #EDC9AF | Desert Sand |
| #FDD7E4 | Pig Pink |
| #FCDFFF | Cotton Candy |
| #FFDFDD | Pink Bubble Gum |
| #FBBBB9 | Misty Rose |
| #FAAFBE | Pink |
| #FAAFBA | Light Pink |
| #F9A7B0 | Flamingo Pink |
| #E7A1B0 | Pink Rose |
| #E799A3 | Pink Daisy |
| #E38AAE | Cadillac Pink |
| #F778A1 | Carnation Pink |
| #E56E94 | Blush Red |
| #F660AB | Hot Pink |
| #FC6C85 | Watermelon Pink |
| #F6358A | Violet Red |
| #F52887 | Deep Pink |
| #E45E9D | Pink Cupcake |
| #E4287C | Pink Lemonade |
| #F535AA | Neon Pink |
| #FF00FF | Magenta |
| #E3319D | Dimorphotheca Magenta |
| #F433FF | Bright Neon Pink |
| #D16587 | Pale Violet Red |
| #C25A7C | Tulip Pink |
| #CA226B | Medium Violet Red |
| #C12869 | Rogue Pink |
| #C12267 | Burnt Pink |
| #C25283 | Bashful Pink |
| #C12283 | Dark Carnation Pink |
| #B93B8F | Plum |
Conclusion
Now that you have quick reference tables of common HTML Colors, you should be able to use any color you want on your page. From a creative standpoint, you should avoid using harsh colors if you can and when working with the front end of the site, keeping the background graphics or colors is also essential to ensure good contrast.
Recommended Articles
This is a guide to HTML Color Names. Here we discuss how to implement colors on a webpage using different HTML Colors with examples. You can also go through our other suggested articles to learn more –
