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
selector {
color: #RRGGBB;
}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
<!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.