HTML HEX Colors

 HTML HEX colors are used to define colors in HTML and CSS using a six-digit hexadecimal code. These codes represent the red, green, and blue (RGB) components of a color, with each pair of digits representing one of these components.

Structure of a HEX Code

• A HEX color code starts with a # symbol.
• The next six digits are grouped into three pairs:
  • First two digits: Represent the red component.
  • Next two digits: Represent the green component.
  • Last two digits: Represent the blue component.

Each pair of digits can range from 00 to FF in hexadecimal notation, corresponding to values from 0 to 255 in decimal.

Examples of HEX Codes

1. White: #FFFFFF

   • Red: FF (255)
   • Green: FF (255)
   • Blue: FF (255)

2. Black: #000000

   • Red: 00 (0)
   • Green: 00 (0)
   • Blue: 00 (0)

3. Red: #FF0000

   • Red: FF (255)
   • Green: 00 (0)
   • Blue: 00 (0)

4. Green: #00FF00

   • Red: 00 (0)
   • Green: FF (255)
   • Blue: 00 (0)

5. Blue: #0000FF

   • Red: 00 (0)
   • Green: 00 (0)
   • Blue: FF (255)

6. Gray: #808080

   • Red: 80 (128)
   • Green: 80 (128)
   • Blue: 80 (128)

Understanding the Hexadecimal System

• Hexadecimal (or hex) is a base-16 number system, which means it uses 16 digits: 0-9 and A-F.
  • 0 represents 0.
  • 1 through 9 represent their respective values.
  • A represents 10, B is 11, and so on, up to F which represents 15.

Common Color HEX Codes:

• Aqua: #00FFFF
• Fuchsia: #FF00FF
• Yellow: #FFFF00
• Lime: #00FF00
• Purple: #800080
• Orange: #FFA500
• Pink: #FFC0CB
• Brown: #A52A2A

How to Use HEX Colors in HTML and CSS

You can use HEX color codes in HTML and CSS to style elements. For example:

<p style="color: #FF5733;">This text is colored using a HEX code.</p>

In CSS:

body {
  background-color: #ADD8E6; /* Light Blue background */
}

h1 {
  color: #8B0000; /* Dark Red text */
}

These codes are widely used in web design due to their simplicity and direct control over colors.