HTML Color Names are predefined color keywords supported by all modern web browsers. These color names are used in HTML and CSS to apply colors to webpage elements such as text, backgrounds, borders, buttons, tables, links, forms, and layouts.
Instead of using complex color formats like HEX codes, RGB values, or HSL values, developers can directly use readable color names such as red, blue, green, orange, and tomato.
HTML currently supports more than 140 standard color names officially recognized by web browsers.
HTML color names are beginner-friendly, easy to remember, and widely used in modern web development for quick styling and rapid UI design.
Each color name is internally mapped to a unique HEX color value. For example:
- Red represents #FF0000
- Blue represents #0000FF
- Green represents #008000
These color names can be used directly inside HTML attributes or CSS properties.
HTML color names are commonly used with the style attribute in HTML elements.
Syntax
<element style="property:colorname;">HTML Color Names Example
<h1 style="color:blue;">Blue Heading</h1>
<p style="background-color:yellow;">
Yellow Background
</p>
<div style="border:2px solid red;">
Red Border
</div>In the above example:
- The heading text becomes blue
- The paragraph background becomes yellow
- The border becomes red
HTML Supported Color Names
Below are some popular HTML color names supported by all major browsers.
| Color Name | HEX Code | Preview |
|---|---|---|
| AliceBlue | #F0F8FF | AliceBlue |
| AntiqueWhite | #FAEBD7 | AntiqueWhite |
| Aqua | #00FFFF | Aqua |
| Aquamarine | #7FFFD4 | Aquamarine |
| Azure | #F0FFFF | Azure |
| Beige | #F5F5DC | Beige |
| Bisque | #FFE4C4 | Bisque |
| Black | #000000 | Black |
| Blue | #0000FF | Blue |
| Brown | #A52A2A | Brown |
| Coral | #FF7F50 | Coral |
| Crimson | #DC143C | Crimson |
| Cyan | #00FFFF | Cyan |
| Gold | #FFD700 | Gold |
| Gray | #808080 | Gray |
| Green | #008000 | Green |
| Indigo | #4B0082 | Indigo |
| Khaki | #F0E68C | Khaki |
| Lavender | #E6E6FA | Lavender |
| Lime | #00FF00 | Lime |
| Magenta | #FF00FF | Magenta |
| Maroon | #800000 | Maroon |
| Navy | #000080 | Navy |
| Olive | #808000 | Olive |
| Orange | #FFA500 | Orange |
| Pink | #FFC0CB | Pink |
| Purple | #800080 | Purple |
| Red | #FF0000 | Red |
| Salmon | #FA8072 | Salmon |
| Silver | #C0C0C0 | Silver |
| SkyBlue | #87CEEB | SkyBlue |
| Teal | #008080 | Teal |
| Tomato | #FF6347 | Tomato |
| Violet | #EE82EE | Violet |
| White | #FFFFFF | White |
| Yellow | #FFFF00 | Yellow |
Complete HTML Color Names Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Color Names</title>
</head>
<body>
<h1 style="color:tomato;">
Tomato Color Heading
</h1>
<p style="background-color:lightblue;">
LightBlue Background
</p>
<div style="border:2px solid green;">
Green Border Example
</div>
</body>
</html>Using HTML Color Names in CSS
HTML color names are also heavily used in CSS stylesheets.
Example
<style>
body {
background-color: whitesmoke;
}
h1 {
color: darkblue;
}
p {
color: crimson;
}
</style>This method is commonly used in professional website development and UI design.