Skip to main content
HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Colors and Backgrounds

CSS HEX Colors

Written by Updated

Write hexadecimal colors using short, long, and alpha forms, and understand how each pair of digits represents an sRGB channel.

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). The supporting concepts are explained in CSS Colors and CSS RGB Colors.

Each pair controls the intensity of a color:

  • #RRGGBB

For example:

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

Syntax

css

selector {
    color: #RRGGBB;
}

Example

css

p {
color: #ff0000;
}

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

Attributes

PropertyDescriptionExample
colorSets text colorcolor: #0000ff;
background-colorSets background colorbackground-color: #f0f0f0;
border-colorSets border colorborder-color: #ff0000;
outline-colorSets outline coloroutline-color: #00ff00;

Alpha and shorthand expansion

Three- and four-digit forms duplicate each digit, so #3a7 expands to #33aa77 and #3a7c expands to #33aa77cc. Eight-digit notation places alpha last as #RRGGBBAA, which differs from formats that put alpha first. Hex notation is concise, but functional color syntax is usually clearer when channels or transparency are calculated.

Example

CSS Hex Colors Complete Example

html

<!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>

Browser Support

Feature
Chrome
Edge
Firefox
Safari
Hexadecimal colors11211

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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.

PreviousCSS ColorsNextCSS RGB Colors