HTML Hex Color Codes: A Complete Guide with Examples

Learn how to use HEX color codes in HTML to precisely define colors for your web pages. This tutorial explains the RRGGBB format, provides examples, and shows how to create shades of gray.

Using HEX Colors in HTML

Hexadecimal (HEX) color codes provide a precise way to specify colors in HTML. They're used extensively in web design to control the appearance of text, backgrounds, and other elements.

Understanding HEX Color Values

A HEX color code is written as #RRGGBB, where:

  • RR represents the red component (00-ff).
  • GG represents the green component (00-ff).
  • BB represents the blue component (00-ff).

Each component uses hexadecimal numbers (base-16), ranging from 00 (decimal 0) to ff (decimal 255). By varying these values, you can create a wide spectrum of colors.

Examples

<p style="color: #ff0000;">Red</p>
<p style="color: #00ff00;">Green</p>
<p style="color: #0000ff;">Blue</p>

#ff0000 is pure red (maximum red, no green or blue), #00ff00 is pure green, and #0000ff is pure blue.

To create other colors, you mix the red, green, and blue components. For example:

  • #3cb371: A shade of green.
  • #ee82ee: A shade of violet.
  • #ffa500: Orange.
  • #6a5acd: Slate blue.

Try it Yourself » (link to a code editor)

Creating Shades of Gray

Shades of gray are created by using the same value for all three components (red, green, and blue). The closer the value is to ff, the lighter the gray; the closer it is to 00, the darker.

Examples: Shades of Gray

<p style="color: #404040;">Dark Gray</p>
<p style="color: #f8f8f8;">Light Gray</p>

Try it Yourself » (link to a code editor)

Experiment with different HEX values to create and understand a wide variety of colors!