CSS Colors and Backgrounds
CSS HEX Colors
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
| 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; |
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 colors | 1 | 12 | 1 | 1 |
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.