HEX color codes are a fundamental aspect of web design, allowing developers to specify colors in HTML and CSS with precision. These codes consist of a hash symbol (#) followed by six characters, each representing the intensity of the primary colors: red, green, and blue (RGB) in hexadecimal format.
The format for a HEX color code is #RRGGBB , where:
- The first two characters (RR) denote the intensity of the red color.
- The next two characters (GG) represent the intensity of the green color.
- The final two characters (BB) indicate the intensity of the blue color.
Each pair of characters in the HEX color code ranges from 00 to FF. A value of 00 represents the lowest intensity of the color, while FF represents the highest intensity. By combining different intensities of red, green, and blue, a wide spectrum of colors can be created. In fact, there are 16,777,216 possible color combinations with HEX codes.
What is a HEX Color Code?
A HEX color code is a hexadecimal way to represent colors in web design and other digital applications. It starts with a hash symbol (#) followed by six characters, each pair representing the intensity of red, green, and blue colors respectively. This format allows for a wide range of colors to be precisely defined and used in HTML and CSS.
The structure of a HEX color code is #RRGGBB, where:
- The first two characters (RR) indicate the intensity of the red color.
- The next two characters (GG) specify the intensity of the green color.
- The last two characters (BB) represent the intensity of the blue color.
For example:
- The color white is achieved by combining the maximum intensity of all three primary colors, resulting in the HEX code #FFFFFF.
- Conversely, the color black is achieved by combining the minimum intensity of all three primary colors, resulting in the HEX code #000000.
Note:
- The white color is a mixture of the three primary colors at full intensity representing the Hex color code #FFFFFF
- The black color is a mixture of the three primary colors at the lowest intensity representing the color code #000000
List of Common HTML Color Codes
Here is a list of some commonly used HTML Hexadecimal color codes:
| COLOR NAME | COLOR | HEX COLOR CODE |
|---|
| SILVER | | #C0C0C0 |
| GRAY | | #808080 |
| MAROON | | #800000 |
| OLIVE | | #808000 |
| LIME | | #00FF00 |
| AQUA | | #00FFFF |
| TEAL | | #008080 |
| NAVY | | #000080 |
| FUCHSIA | | #FF00FF |
| PURPLE | | #800080 |
| INDIANRED | | #CD5C5C |
| LIGHTCORAL | | #F08080 |
| SALMON | | #FA8072 |
| DARKSALMON | | #E9967A |
| LIGHTSALMON | | #FFA07A |
Shades of RED
COLOR NAME
| COLOR
| HEX COLOR CODE
|
|---|
lightsalmon
|
| #FFA07A
|
salmon
|
| #FA8072
|
darksalmon
|
| #E9967A
|
lightcoral
|
| #F08080
|
indianred
|
| #CD5C5C
|
crimson
|
| #DC143C
|
firebrick
|
| #B22222
|
red
|
| #FF0000
|
darkred
|
| #8B0000
|
Shades of Orange
COLOR NAME
| COLOR
| HEX COLOR CODE
|
|---|
coral
|
| #FF7F50
|
tomato
|
| #FF6347
|
orangered
|
| #FF4500
|
gold
|
| #FFD700
|
orange
|
| #FFA500
|
darkorange
|
| #FF8C00
|
Shades of Yellow
COLOR NAME
| COLOR
| HEX COLOR CODE
|
|---|
lightyellow
|
| #FFFFE0
|
lemonchiffon
|
| #FFFACD
|
papayawhip
|
| #FFEFD5
|
moccasin
|
| #FFE4B5
|
peachpuff
|
| #FFDAB9
|
palegoldenrod
|
| #EEE8AA
|
khaki
|
| #F0E68C
|
darkkhaki
|
| #BDB76B
|
yellow
|
| #FFFF00
|
Shades of Green
COLOR NAME
| COLOR
| HEX COLOR CODE
|
|---|
lawngreen
|
| #7CFC00
|
limegreen
|
| #32CD32
|
lime
|
| #00FF00
|
forestgreen
|
| #228B22
|
darkgreen
|
| #006400
|
springgreen
|
| #00FF7F
|
mediumspringgreen
|
| #00FA9A
|
palegreen
|
| #98FB98
|
seagreen
|
| #2E8B57
|
Shades of Blue
COLOR NAME
| COLOR
| HEX COLOR CODE
|
|---|
powderblue
|
| #B0E0E6
|
lightskyblue
|
| #87CEFA
|
skyblue
|
| #87CEEB
|
deepskyblue
|
| #00BFFF
|
dodgerblue
|
| #1E90FF
|
cornflowerblue
|
| #6495ED
|
steelblue
|
| #4682B4
|
royalblue
|
| #4169E1
|
mediumblue
|
| #0000CD
|
Shades of White
| Color Name | Color | HTML Color Code |
|---|
| snow | | #FFFAFA |
| honeydew | | #F0FFF0 |
| azure | | #F0FFFF |
| ghostwhite | | #F8F8FF |
| whitesmoke | | #F5F5F5 |
| mintcream | | #F5FFFA |
| ivory | | #FFFFF0 |
| floralwhite | | #FFFAF0 |
| antiquewhite | | #FAEBD7 |
Shades of Brown
| Color Name | Color | HTML Color Code |
|---|
| blanchedalmond | | #FFEBCD |
| bisque | | #FFE4C4 |
| wheat | | #F5DEB3 |
| burlywood | | #DEB887 |
| tan | | #D2B48C |
| rosybrown | | #BC8F8F |
| sandybrown | | #F4A460 |
| chocolate | | #D2691E |
| saddlebrown | | #8B4513 |
| sienna | | #A0522D |
| brown | | #A52A2A |
HTML is the foundation of webpages, is used for webpage development by structuring websites and web apps. You can learn HTML from the ground up by following this HTML Tutorial and HTML Examples .
HTML HEX Colors Examples
Example 1: In this example, we will print the different hex color codes by using the background color style in the HTML heading tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Hex Color Codes</title>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<h2 style="background-color:#808000;">#808000</h2>
<h2 style="background-color:#CD5C5C;">#CD5C5C</h2>
<h2 style="background-color:#FFA07A;">#FFA07A</h2>
<h2 style="background-color:#DC143C;">#DC143C</h2>
</body>
</html>
Output:
Example 2: In this example, we will print the different hex color by manipulating hex code in the HTML heading tag.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Hex Color Codes Examples</title>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<h2 style="background-color:#FF0000;">#FF0000</h2>
<h2 style="background-color:#00FF00;">#00FF00</h2>
<h2 style="background-color:#0000FF;">#0000FF</h2>
<h2 style="background-color:#FFFF00;">#FFFF00</h2>
<h2 style="background-color:#CCEEFF;">#CCEEFF</h2>
</body>
</html>
Output:
#FF0000 – This HTML color code shows just red and no green and no blue.
#00FF00 – This HTML color code shows just green and no red and blue.
#0000FF – This HTML color code shows just blue and no red and green.
#FFFF00 – This HTML color code is a mixture of red and green colors defined as yellow.
#CCEEFF – This HTML color code is a mixture of more green and maximum blue provides color like the sky.
Example 3: In this example we will see some hex color color code for the shades of red color with an example.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Shades of Red Colors</title>
</head>
<body>
<h1>Welcome To GeeksforGeeks</h1>
<h2 style="background-color:#FFA07A;">#FFA07A</h2>
<h2 style="background-color:#FA8072;">#FA8072</h2>
<h2 style="background-color:#FF0000;">#FF0000</h2>
<h2 style="background-color:#8B0000;">#8B0000</h2>
</body>
</html>
Output:
Similar Reads
HTML Color Codes
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. table{ display: inlin
11 min read
HTML Background Color
HTML Background Color enables the inclusion of the background color on the web page, which can be accomplished with the help of the background-color property used with HTML elements. It applies to the total size of the element specified, but the margin is not included. The property has the default v
4 min read
HTML Colors
HTML Colors can be applied to text, backgrounds, borders, links, forms, tables, etc. This article provides an in-depth look at how colors can be applied to various elements such as text, backgrounds, borders, links, forms, and tables in HTML. We will explore different color formats including hexadec
11 min read
HTML Computer Code Elements
HTML provides a set of elements tailored for displaying computer code so that it is easily distinguishable from other text on a webpage. These elements help in formatting and presenting source code in a readable and syntactically correct manner. Table of Content The code TagThe kbd TagThe pre TagThe
5 min read
HTML Color Styles and HSL
HTML color styles offer various ways to specify colors on a webpage. For Example using HSL (Hue, Saturation, Lightness) allows for intuitive color control, where you adjust hue for the type of color, saturation for intensity, and lightness for brightness. Here are the different styles that can be us
3 min read
How to change Background Color in HTML ?
The background color in HTML refers to the color displayed behind the content of a webpage. To change it, CSS (Cascading Style Sheets) is used, with various approaches available. In CSS, we define the background-color property within a CSS rule, specifying a color value such as a name, hexadecimal c
3 min read
HTML font color Attribute
The HTML font color attribute is used to specify the text color within the <font> tag. Although this method is deprecated in HTML5, it's still important to understand its historical use. Modern HTML uses CSS for styling purposes, but let's see how the font color attribute works. Syntax<font
4 min read
How to Change Font Color in HTML?
We can use <font> tag to change the text color in HTML. This tag was used in older versions of HTML but is deprecated in HTML5. So we can use inline CSS as the best and quickest way to change the font color. 1. Change Font Color using <Font> tagThe <font> tag was used to change tex
2 min read
Color Wheel
Understanding the color wheel is essential for anyone interested in design. Colors play a crucial role in creating visually appealing and effective designs. This article will explore various aspects of color theory, including the color wheel , color schemes , primary, secondary, and tertiary colors
11 min read
HTML <hr> color Attribute
The HTML <hr> color attribute was used to specify the color of horizontal lines, adding visual separation in content. Although deprecated in HTML5, similar effects can be achieved using CSS by styling the <hr> element with border or background properties. Note: It is not supported by HTM
3 min read