HTML - HEX

HEX color Codes in HTML

HTML hex colors are a way of specifying colors for web pages using hexadecimal values. Hexadecimal is a number system that uses 16 symbols namely 0 to 9 and A to F. Each hex color code consists of six digits, preceded by a hash sign (#). The first two digits represent the red component, the next two represent the green component, and the last two represent the blue component.

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 sheet using the color property.

Following is a list of few colors using hexadecimal notation −

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

Example

Here is an example to set background of HTML tags by color code in hexadecimal.

<!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>
   <table style = "background-color: #000000; width:300px; height:100px;">
      <tr>
         <td>
            <p style = "color: #FFFFFF;">This text will appear white on black background. </p>
         </td>
      </tr>
   </table>
</body>
</html>

On the executing the above HTML code, it will produce a result with texts on different backgrounds.

Example

This is another example that demonstrates use of HEX code.

<!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>
            <p style = "color: #FFFFFF;">The text color of the paragraph is styled using HEX code.</p>
         </td>
      </tr>
   </table>
</body>
</html>

When we execute the above code, it will generate one heading and a paragraph with different background colors.

Advertisements