HTML

HTML HEX Colors

Hexadecimal (HEX) colors are a core tool in web design, offering precise control over color selection for HTML and CSS. Represented as a six-digit code prefixed by a #, HEX values are an efficient way to define colors by combining red, green, and blue values.

How a HEX Color Code is Formed

A HEX color code is a six-digit combination of numbers and letters, used to define the intensity of red, green, and blue (RGB) in a specific color. Each pair of digits controls one of these colors, with values ranging from 00 (no intensity) to FF (full intensity).

RR: Represents the red intensity.
GG: Represents the green intensity.
BB: Represents the blue intensity.

Example:

#FFFFFF is white because red, green, and blue are all at their maximum intensity (FF).
#000000 is black because red, green, and blue are all at their lowest intensity (00).
#FF0000 is pure red, with maximum red intensity and no green or blue.
#00FF00 is pure green, with maximum green intensity and no red or blue.
#0000FF is pure blue, with maximum blue intensity and no red or green.

Major Hexadecimal Color Codes

Below is a list of some of the most commonly used HEX color codes for popular colors:

Color Name	HEX Code
Black	`#000000`
White	`#FFFFFF`
Red	`#FF0000`
Green	`#00FF00`
Blue	`#0000FF`
Yellow	`#FFFF00`
Cyan (Aqua)	`#00FFFF`
Magenta	`#FF00FF`
Silver	`#C0C0C0`
Gray	`#808080`
Maroon	`#800000`
Olive	`#808000`
Teal	`#008080`
Navy	`#000080`
Fuchsia	`#FF00FF`
Purple	`#800080`

Shades of Gray

Shades of gray use equal values for red, green, and blue. Here are some common shades:

Color Name	HEX Color Code
Light Gray	`#D3D3D3`
Silver	`#C0C0C0`
Dark Gray	`#A9A9A9`
Dim Gray	`#696969`
Black	`#000000`

Shades of White

Shades of white vary in their intensity of red, green, and blue. Here are some examples:

Color Name	HEX Color Code
Snow	`#FFFAFA`
Ghost White	`#F8F8FF`
Ivory	`#FFFFF0`
White Smoke	`#F5F5F5`
Mint Cream	`#F5FFFA`

Setting a Background HTML HEX Color for the Body

With HEX color codes, you can precisely style the background of your webpage to match your design goals.

Here's how to set the background to green using the background-color property:

<!DOCTYPE html>
<html>
<head>
   <title>SitePoint Background Color Example</title>
</head>
<body style="background-color: #00FF00;">
   <p>Welcome to SitePoint! This page features a bold green background.</p>
</body>
</html>

Coloring Table Cells with HEX Codes

HEX colors also work perfectly for styling table cells, allowing you to create visually appealing designs within structured content. Below, we set the background color of a table cell to light red while applying white text to ensure readability:

<!DOCTYPE html>
<html>
<head>
   <title>Table Cell Color Example</title>
</head>
<body>
   <table>
      <tr>
         <td style="background-color: #FF6666; color: #FFFFFF;">
           This cell has a red background and white text.
         </td>
      </tr>
   </table>
</body>
</html>

In this example, #FF6666 creates a soft red background, and the white text (#FFFFFF) offers a clean contrast, making it visually striking while remaining easy to read. These types of color combinations are great for highlighting important data in tables or adding a subtle touch of style to your content.

Difference Between HEX Color Codes and RGB Codes

While both HEX and RGB codes define colors for web design, they approach it differently:

HEX codes are six-digit representations of color, formatted as #RRGGBB. Each pair of characters (RR, GG, BB) corresponds to the intensity of red, green, and blue using hexadecimal values (base 16). For example, #FF0000 represents pure red.
RGB codes, on the other hand, use a format like rgb(255, 0, 0), where the values for red, green, and blue are specified in decimal (base 10), ranging from 0 to 255.

Both formats can produce identical colors, but HEX codes are more compact and commonly used in CSS due to their shorter, more efficient format. RGB is often preferred when you need more granular control, especially if you plan to use RGBA for transparency adjustments.

FAQ on HTML HEX Colors

What do the numbers and letters in a hex code mean?

In a HEX code, the numbers and letters define the intensity of red, green, and blue, using hexadecimal values. It’s a two-character pair for each color, ranging from 00 (no intensity) to FF (full intensity). So, #FF0000 means full red with no green or blue, producing pure red.

Is HTML color code the same as HEX?

Yes, HTML often uses HEX codes to represent colors, but it also supports other formats like RGB and HSL. HEX is just one convenient way to define colors using a six-character string.

What is the default color HEX in HTML?

The default text color in most browsers is black, represented by the HEX code #000000. This is what you'll see if no specific text color is set.

What is the most visible color HEX code?

Highly visible colors like yellow (#FFFF00) or white (#FFFFFF) stand out the most on most backgrounds. Bright, contrasting colors are generally considered the easiest to see.

How do I identify a color in HTML?

You can identify or define colors using HEX, RGB, or HSL codes within the style attribute of an HTML element. Tools like color pickers or browser dev tools can help you pinpoint exact color codes.

What is the color #00ff00 in HTML?

The HEX code #00FF00 represents a bright, vibrant lime green. In this code, the green component is maxed out at full intensity, while both red and blue are at zero, making the color purely green.

Previous Next