Bird
Raised Fist0
CSSmarkup~5 mins

Hex colors in CSS

Choose your learning style10 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf

Start learning this pattern below

Jump into concepts and practice - no test required

or
Recommended
Test this pattern10 questions across easy, medium, and hard to know if this pattern is strong
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.

Practice

(1/5)
1. What does the hex color code #FF0000 represent in CSS?
easy
A. Black color
B. Bright green color
C. Bright red color
D. Bright blue color

Solution

  1. Step 1: Understand hex color format

    Hex colors start with # followed by 6 digits: two for red, two for green, two for blue.

  2. Step 2: Analyze the code #FF0000

    The first two digits FF mean full red, the next two 00 mean no green, and the last two 00 mean no blue.

  3. Final Answer:

    Bright red color -> Option C

  4. Quick Check:

    Red = FF, Green = 00, Blue = 00 [OK]
Hint: First two hex digits control red color intensity [OK]
Common Mistakes:
  • Confusing red with green or blue
  • Ignoring the order of RGB in hex
  • Thinking #FF0000 is black
2. Which of the following is the correct syntax for a hex color in CSS?
easy
A. #12345G
B. 123456
C. #XYZ123
D. #1A2B3C

Solution

  1. Step 1: Check hex color syntax rules

    A valid hex color starts with # followed by exactly 6 hexadecimal digits (0-9, A-F).

  2. Step 2: Validate each option

    #12345G has a 'G' which is invalid. 123456 misses the #. #1A2B3C has valid digits and #. #XYZ123 has invalid letters 'X' and 'Z'.

  3. Final Answer:

    #1A2B3C -> Option D

  4. Quick Check:

    Valid hex = # + 6 hex digits [OK]
Hint: Hex colors start with # and use digits 0-9, A-F only [OK]
Common Mistakes:
  • Using letters outside A-F
  • Omitting the # symbol
  • Using fewer or more than 6 digits
3. What color will the CSS rule color: #00FF00; display on the webpage?
medium
A. Green
B. Blue
C. Red
D. Yellow

Solution

  1. Step 1: Decode the hex color #00FF00

    The first two digits 00 mean no red, the next two FF mean full green, and the last two 00 mean no blue.

  2. Step 2: Identify the color from RGB values

    Full green with no red or blue results in bright green color.

  3. Final Answer:

    Green -> Option A

  4. Quick Check:

    Green = FF, Red & Blue = 00 [OK]
Hint: Middle two hex digits control green color [OK]
Common Mistakes:
  • Mixing up red and green positions
  • Assuming #00FF00 is blue
  • Ignoring hex digit order
4. You wrote background-color: #12345; in your CSS. What is the problem?
medium
A. Hex code is missing one digit
B. Hex code has invalid letters
C. Hex code should start with '0x'
D. Hex code is correct

Solution

  1. Step 1: Count digits in the hex code

    The code #12345 has only 5 digits after the #, but hex colors require exactly 6 digits.

  2. Step 2: Check other options

    Letters are valid digits (1,2,3,4,5). Hex colors do not start with '0x' in CSS. So the only issue is missing one digit.

  3. Final Answer:

    Hex code is missing one digit -> Option A

  4. Quick Check:

    Hex colors need 6 digits after # [OK]
Hint: Count digits after #; must be exactly 6 [OK]
Common Mistakes:
  • Using 3, 5, or 7 digits instead of 6
  • Confusing hex with other number formats
  • Thinking '0x' prefix is needed
5. You want a color with equal parts red and blue but no green. Which hex code should you use?
hard
A. #00FFFF
B. #FF00FF
C. #FFFF00
D. #0000FF

Solution

  1. Step 1: Understand RGB parts in hex

    Hex colors are #RRGGBB. Equal red and blue means red and blue digits are the same, green digits are zero.

  2. Step 2: Check each option

    #FF00FF: #FF00FF has red = FF, green = 00, blue = FF (equal red and blue, no green). #00FFFF has green = FF. #FFFF00 has green = FF. #0000FF has no red.

  3. Final Answer:

    #FF00FF -> Option B

  4. Quick Check:

    Red = Blue, Green = 00 means magenta [OK]
Hint: Set green digits to 00, red and blue equal [OK]
Common Mistakes:
  • Mixing green with blue or red
  • Choosing colors with green included
  • Not knowing hex digit order