HEX Colors

Written by

in

Color Names & Values

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.

HTML Hex Colors

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
&lt;/div&gt;&lt;!-- Green color --&gt;&lt;div style="background-color: #00FF00; width: 100px; height: 100px;"&gt;
  GREEN Color
&lt;/div&gt;&lt;!-- Blue color --&gt;&lt;div style="background-color: #0000FF; width: 100px; height: 100px;"&gt;
  BLUE Color
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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.
     &lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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.

Comments

Leave a Reply Cancel reply

More posts