HTML - HEX Colors

Quiz

Hexadecimal (Hex) colors

Hexadecimal (Hex) colors are specified by combining the hexadecimal values (#RRGGBB) of red (RR), green (GG), and blue (BB) colors, with each value ranging from 00 to FF, where 00 represents the lowest intensity and FF represents the highest intensity of each color.

HEX Color Values

Each HEX color value starts with a hash sign (#) and includes six digits (#RRGGBB). The first two digits (RR) specify the red component, the next two (GG) specify the green component, and the final two (BB) specify the blue component. This method allows precise color customization for web design.

Example

Here is the example to create Red, Green, and Blue colors using the hex values:

<!DOCTYPE html>
<html>
  <head>
    <title>Example Hex Color Values</title>
  </head>
  <body>
    <!-- Red color -->
    <div style="background-color: #FF0000; width: 100px; height: 100px;">
      RED Color
    </div>
    <!-- Green color -->
    <div style="background-color: #00FF00; width: 100px; height: 100px;">
      GREEN Color
    </div>
    <!-- Blue color -->
    <div style="background-color: #0000FF; width: 100px; height: 100px;">
      BLUE Color
    </div>
  </body>
</html>

Using Hex Colors in HTML

To use hex colors in HTML, we can either assign them directly to an element using the style attribute, or define them in a style tag or sheet using the color property.

Example 1: Using style Attribute

Here is an example to assign a hex color to an HTML element using the style attribute:

<body>
  <p style="color: #FF0000;">This text is red.</p>
</body>

Example 2: Using a style Tag

Here is an example to assign a hex color to an HTML element using the style tag:

<head>
  <style>
    p {
      color: #FF0000;
    }
  </style>
</head>
<body>
  <p>This text is red.</p>
</body>

Hex Color Codes for Common Colors

The following table has a few colors represented using hexadecimal color codes:

Color	Color HEX
	#000000
	#FF0000
	#00FF00
	#0000FF
	#FFFF00
	#00FFFF
	#FF00FF
	#C0C0C0
	#FFFFFF

Examples of Hex Colors

Here are some examples that show how to use hexadecimal colors in HTML:

Setting Background Color for Body

In the following example, we are defining the background color of the HTML page using the hex color code:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML Colors by HEX code
   </title>
</head>
<body style="background-color: #00FF00;">
   <p>
      Use different color code for body 
      and table and see the result. 
   </p>
   
   <p style="color: #FFFFFF;">
      This text will appear white on 
      black background. 
   </p>
</body>
</html>

Setting Color on Table Cells

In the following example, we are defining the background color of the H2 and table:

<!DOCTYPE html>
<html>
<head>
   <title>
      HTML HEX Color code
   </title>
</head>
<body style="width:300px; height:100px;">
   <h2 style="background-color: #FF6666;">
      Setting the Background using HEX Code 
   </h2>
   <table style="background-color: #FF3335;">
      <tr>
         <td style="color: #FFFFFF;">
               The text color of the paragraph is 
               styled using HEX code.
         </td>
      </tr>
   </table>
</body>
</html>

Selecting the right colors for designing a webpage is difficult. Even if you have a color in your mind, you need to make a computer understand the hexadecimal value of the color. To make your job easier, we suggest using our HTML color picker tool.

Print Page