0
0
CSSmarkup~5 mins

Hex colors in CSS

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Hex colors let you pick exact colors for your website using a simple code. They help make your site look nice and match your style.

When you want to set a background color for a webpage or section.
When you want to change the color of text to make it easier to read.
When you want to style buttons or links with specific colors.
When you want to match colors from a logo or brand exactly.
When you want to create a color theme that looks consistent everywhere.
Syntax
CSS
color: #RRGGBB;

Each pair (RR, GG, BB) is a two-digit hexadecimal number from 00 to FF.

Hex colors start with a # followed by 6 hex digits (0-9, A-F).

Examples
This sets the color to bright red.
CSS
color: #FF0000;
This sets the background color to bright green.
CSS
background-color: #00FF00;
This sets the border color to bright blue.
CSS
border-color: #0000FF;
This sets the text color to a dark gray, softer than black.
CSS
color: #333333;
Sample Program

This webpage shows how hex colors change text and background colors. The background is a soft blue, the heading is blue, normal text is dark gray, and a highlighted box uses bright yellow.

CSS
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Hex Colors Example</title>
  <style>
    body {
      background-color: #f0f8ff;
      color: #333333;
      font-family: Arial, sans-serif;
      padding: 2rem;
    }
    h1 {
      color: #0077cc;
    }
    p.highlight {
      background-color: #ffeb3b;
      color: #000000;
      padding: 1rem;
      border-radius: 0.5rem;
      max-width: 20rem;
    }
  </style>
</head>
<body>
  <h1>Hex Colors in CSS</h1>
  <p>This text uses a dark gray color <code>#333333</code>.</p>
  <p class="highlight">This highlighted box uses a bright yellow background <code>#ffeb3b</code>.</p>
</body>
</html>
OutputSuccess
Important Notes

Hex colors are case-insensitive, so #FF0000 and #ff0000 are the same.

You can use shorthand hex colors like #F00 for #FF0000, but 6 digits are clearer for beginners.

Use browser DevTools (right-click > Inspect) to try changing hex colors live and see results immediately.

Summary

Hex colors use 6-digit codes starting with # to define colors in CSS.

Each pair of digits controls red, green, and blue parts of the color.

They help you pick exact colors for text, backgrounds, borders, and more.