Home / HTML / Colors / HEX

HTML Colors HEX

What is HEX?

HEX stands for Hexadecimal. HEX color codes use a 6-digit code preceded by a hash (#) symbol to represent colors. Each pair of digits represents the intensity of red, green, and blue (RGB) values in hexadecimal format (base-16).

HEX Color Syntax

HEX colors are written as:

Syntax
#RRGGBB

Where:

Hexadecimal Number System

Hexadecimal uses 16 digits: 0-9 and A-F (where A=10, B=11, C=12, D=13, E=14, F=15).

Decimal Hexadecimal
0-90-9
10A
11B
12C
13D
14E
15F

Basic HEX Colors

Pure Colors

Example
<p style="color: #ff0000;">Red (#ff0000)</p>
<p style="color: #00ff00;">Green (#00ff00)</p>
<p style="color: #0000ff;">Blue (#0000ff)</p>
<p style="color: #000000;">Black (#000000)</p>
<p style="background-color: #333; color: #ffffff;">White (#ffffff)</p>

Short HEX Notation

When both digits in each pair are the same, you can use shorthand notation (3 digits instead of 6):

Example
<p style="color: #f00;">Red (#f00 = #ff0000)</p>
<p style="color: #0f0;">Green (#0f0 = #00ff00)</p>
<p style="color: #00f;">Blue (#00f = #0000ff)</p>
<p style="color: #000;">Black (#000 = #000000)</p>
<p style="background-color: #333; color: #fff;">White (#fff = #ffffff)</p>

Common HEX Color Codes

Color HEX Code Short HEX Example
Red #ff0000 #f00 Red
Green #008000 - Green
Blue #0000ff #00f Blue
Yellow #ffff00 #ff0 Yellow
Purple #800080 - Purple
Cyan #00ffff #0ff Cyan
White #ffffff #fff White
Black #000000 #000 Black
Gray #808080 - Gray

Converting RGB to HEX

To convert RGB to HEX, convert each decimal value (0-255) to hexadecimal (00-FF):

Using HEX in CSS

Example
<style>
    .red-text {
        color: #ff0000;
    }
    .blue-bg {
        background-color: #0000ff;
    }
    .green-border {
        border: 2px solid #00ff00;
    }
</style>

<p class="red-text">Red text</p>
<div class="blue-bg" style="color: white; padding: 10px;">Blue background</div>
<p class="green-border" style="padding: 10px;">Green border</p>

HEX with Alpha (8-digit HEX)

You can add an alpha channel for transparency using 8-digit HEX codes:

Example
<div style="background-color: yellow; padding: 20px;">
    <p style="background-color: #ff0000ff;">Red - Fully opaque (FF)</p>
    <p style="background-color: #ff0000b3;">Red - 70% opacity (B3)</p>
    <p style="background-color: #ff000080;">Red - 50% opacity (80)</p>
    <p style="background-color: #ff00004d;">Red - 30% opacity (4D)</p>
</div>

Best Practices

← RGB Colors HSL Colors →