What are the HTML Color Code & Names?
Colors play a crucial role in web development, influencing both the aesthetic appeal and usability of a website. HTML supports a variety of color codes and names that allow developers to specify colors for backgrounds, text, borders, and other elements. Understanding these color codes and names is essential for creating visually appealing web pages.
Table of Contents
In this guide, we will explore the different types of HTML color codes, a comprehensive list of color names, and how to implement them in your web projects.
Types of HTML Color Codes
HTML supports several ways to define colors:
1. Hexadecimal Color Codes
Hexadecimal color codes, often referred to as “hex codes,” use a six-digit combination of numbers and letters prefixed by a #. Each pair of digits represents the intensity of red, green, and blue (RGB) values.
Example:
- #FF0000 (Red)
- #00FF00 (Green)
- #0000FF (Blue)
2. RGB Color Codes
RGB color codes define colors using the Red, Green, and Blue components, with values ranging from 0 to 255.
Example:
- rgb(255, 0, 0) (Red)
- rgb(0, 255, 0) (Green)
- rgb(0, 0, 255) (Blue)
3. RGBA Color Codes
RGBA extends the RGB format by adding an alpha (A) component for transparency, where 0 is fully transparent and 1 is fully opaque.
Example:
- rgba(255, 0, 0, 0.5) (Semi-transparent Red)
4. HSL and HSLA Color Codes
HSL (Hue, Saturation, Lightness) and HSLA (Hue, Saturation, Lightness, Alpha) offer an alternative way to define colors.
Example:
- hsl(0, 100%, 50%) (Red)
- hsla(0, 100%, 50%, 0.5) (Semi-transparent Red)
Most used HTML color names and codes
You can utilize both the color names and codes provided below to incorporate these common colors into your design.
| Color Names | Color Code | Color Name | Color Code |
| Red | #FF0000 | White | #FFFFFF |
| Cyan | #00FFFF | Silver | #C0C0C0 |
| Blue | #0000FF | Gray or Grey | #808080 |
| DarkBlue | #00008B | Black | #000000 |
| LightBlue | #ADD8E6 | Orange | #FFA500 |
| Purple | #800080 | Brown | #A52A2A |
| Yellow | #FFFF00 | Maroon | #800000 |
| Lime | #00FF00 | Green | #008000 |
| Magenta | #FF00FF | Olive | #808000 |
| Pink | #FFC0CB | Aquamarine | #7FFFD4 |
HTML Color code chart
| Color Code | Color Name |
| #000000 | Black (W3C) |
| #0C090A | Night |
| #34282C | Charcoal |
| #3B3131 | Oil |
| #3A3B3C | Dark Gray |
| #454545 | Light Black |
| #413839 | Black Cat |
| #3D3C3A | Iridium |
| #463E3F | Black Eel |
| #4C4646 | Black Cow |
| #504A4B | Gray Wolf |
| #565051 | Vampire Gray |
| #52595D | Iron Gray |
| #5C5858 | Gray Dolphin |
| #625D5D | Carbon Gray |
| #666362 | Ash Gray |
| #696969 | DimGray or DimGrey (W3C) |
| #686A6C | Nardo Gray |
| #6D6968 | Cloudy Gray |
| #726E6D | Smokey Gray |
| #736F6E | Alien Gray |
| #757575 | Sonic Silver |
| #797979 | Platinum Gray |
| #837E7C | Granite |
| #808080 | Gray or Grey (W3C) |
| #848482 | Battleship Gray |
| #8D918D | Gunmetal Gray |
| #A9A9A9 | DarkGray or DarkGrey (W3C) |
| #B6B6B4 | Gray Cloud |
| #C0C0C0 | Silver (W3C) |
| #C9C0BB | Pale Silver |
| #D1D0CE | Gray Goose |
| #CECECE | Platinum Silver |
| #D3D3D3 | LightGray or LightGrey (W3C) |
| #DADBDD | Silver White |
| #DCDCDC | Gainsboro (W3C) |
| #E5E4E2 | Platinum |
| #BCC6CC | Metallic Silver |
| #98AFC7 | Blue Gray |
| #838996 | Roman Silver |
| #778899 | LightSlateGray or LightSlateGrey (W3C) |
| #708090 | SlateGray or SlateGrey (W3C) |
| #6D7B8D | Rat Gray |
| #657383 | Slate Granite Gray |
| #616D7E | Jet Gray |
| #646D7E | Mist Blue |
| #566D7E | Marble Blue |
| #737CA1 | Slate Blue Grey |
| #728FCE | Light Purple Blue |
| #4863A0 | Azure Blue |
| #2B547E | Blue Jay |
| #36454F | Charcoal Blue |
| #29465B | Dark Blue Grey |
| #2B3856 | Dark Slate |
| #123456 | Deep-Sea Blue |
| #151B54 | Night Blue |
| #191970 | MidnightBlue (W3C) |
| #000080 | Navy (W3C) |
| #151B8D | Denim Dark Blue |
| #00008B | DarkBlue (W3C) |
| #15317E | Lapis Blue |
| #0000A0 | New Midnight Blue |
| #0000A5 | Earth Blue |
| #0020C2 | Cobalt Blue |
| #0000CD | MediumBlue (W3C) |
| #0041C2 | Blueberry Blue |
| #2916F5 | Canary Blue |
| #0000FF | Blue (W3C) |
| #0002FF | Samco Blue |
| #0909FF | Bright Blue |
| #1F45FC | Blue Orchid |
| #2554C7 | Sapphire Blue |
| #1569C7 | Blue Eyes |
| #1974D2 | Bright Navy Blue |
| #2B60DE | Balloon Blue |
| #4169E1 | RoyalBlue (W3C) |
| #2B65EC | Ocean Blue |
| #306EFF | Blue Ribbon |
| #157DEC | Blue Dress |
| #1589FF | Neon Blue |
| #1E90FF | DodgerBlue (W3C) |
| #368BC1 | Glacial Blue Ice |
| #4682B4 | SteelBlue (W3C) |
| #488AC7 | Silk Blue |
| #357EC7 | Windows Blue |
| #3090C7 | Blue Ivy |
| #659EC7 | Blue Koi |
| #87AFC7 | Columbia Blue |
| #95B9C7 | Baby Blue |
| #6495ED | CornflowerBlue (W3C) |
| #6698FF | Sky Blue Dress |
| #56A5EC | Iceberg |
| #38ACEC | Butterfly Blue |
| #00BFFF | DeepSkyBlue (W3C) |
| #3BB9FF | Midday Blue |
| #5CB3FF | Crystal Blue |
| #79BAEC | Denim Blue |
| #82CAFF | Day Sky Blue |
| #87CEFA | LightSkyBlue (W3C) |
| #87CEEB | SkyBlue (W3C) |
Using HTML Color Codes in Web Development
You can use color codes in CSS and HTML to style various elements. Here are some examples:
1. Using Hex Codes in CSS
2. Using RGB and RGBA Codes in CSS
3. Using HSL and HSLA Codes in CSS
Tips for Choosing the Right Colors
- Use Web-Safe Colors: Ensure colors appear consistently across different devices and browsers.
- Check Contrast Ratio: Make sure text is readable against its background for accessibility.
- Use Online Color Pickers: Tools like Adobe Color or Coolors can help find harmonious color schemes.
- Test on Multiple Devices: Colors may appear differently on different screens.
Conclusion
HTML color codes and names form the foundation of web design’s visual language. Whether you prefer working with hexadecimal codes for precision or color names for readability, understanding these standards is essential for creating visually appealing and accessible web experiences.
As you develop your web projects, experiment with different color combinations while maintaining accessibility standards. Remember that effective use of color can significantly impact user experience, brand perception, and the overall success of your website.
By mastering HTML color codes and names, you’ll add a powerful tool to your web development toolkit, enabling you to create visually stunning and effectively branded web experiences.
READ NEXT:
