Tutorial Article

CSS HEX Colors

HEX (Hexadecimal) colors are a popular way to define colors in CSS using a 6-digit combination of numbers and letters. A HEX color starts with a hash (#) followed by values representing Red, Green, and Blue (RGB). Each pair controls the intensity of a color: For example: 👉 This sets the text color to red […]

Apr 1, 2026CSSCSS Colors & BackgroundsTutorials

HEX (Hexadecimal) colors are a popular way to define colors in CSS using a 6-digit combination of numbers and letters.

A HEX color starts with a hash (#) followed by values representing Red, Green, and Blue (RGB).

Each pair controls the intensity of a color:

#RRGGBB

For example:

#FF0000 → Red
#00FF00 → Green
#0000FF → Blue

Syntax

selector {
    color: #RRGGBB;
}

Example

p {
color: #ff0000;
}

👉 This sets the text color to red using HEX value.

Attributes

Property	Description	Example
color	Sets text color	color: #0000ff;
background-color	Sets background color	background-color: #f0f0f0;
border-color	Sets border color	border-color: #ff0000;
outline-color	Sets outline color	outline-color: #00ff00;

Example

CSS Hex Colors Complete Example

<!DOCTYPE html>
<html>
<head>
    <title>CSS HEX Colors</title>
    <style>
        body {
            background-color: #f2f2f2;
        }

        h1 {
            color: #0000ff;
        }

        p {
            color: #008000;
        }

        div {
            border: 2px solid #ff0000;
            padding: 10px;
        }
    </style>
</head>
<body>

    <h1>HEX Color Example</h1>

    <p>This paragraph uses HEX color.</p>

    <div>This box has a red border using HEX.</div>

</body>
</html>

Output

Browser Output

The page will have a light gray background
The heading will appear in blue (#0000ff)
The paragraph will appear in green (#008000)
The box will have a red border (#ff0000)

Browser Support

Chrome	Firefox	Edge	Safari	Opera	IE9+
✅Yes	✅Yes	✅Yes	✅Yes	✅Yes	✅Yes

Notes

HEX values range from 00 to FF (0–255 in decimal)
You can use shorthand HEX values like #fff (for #ffffff)
HEX is widely used in web design for precise color control
Case-insensitive (#FF0000 = #ff0000)
Easy to copy and reuse across projects

Conclusion

HEX colors provide a precise and widely accepted way to define colors in CSS. They are essential for consistent and professional web design, allowing developers to control colors accurately across different elements.