Hex colors in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the background color to red using a hex color.

CSS

body {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

A#FF0000

B#00FF00

C#0000FF

D#FFFF00

Attempts:

3 left

💡 Hint

Common Mistakes

Using color names instead of hex codes.

Forgetting the # symbol before the hex code.

The hex code #FF0000 represents red color in CSS.

2fill in blank

medium

Complete the code to set the text color to blue using a hex color.

CSS

p {
  color: [1];
}

Drag options to blanks, or click blank then click option'

A#FF00FF

B#FFFF00

C#0000FF

D#00FF00

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up red and blue hex codes.

Using shorthand hex codes incorrectly.

The hex code #0000FF represents blue color in CSS.

3fill in blank

hard

Fix the error in the hex color code to make the background green.

CSS

div {
  background-color: [1];
}

Drag options to blanks, or click blank then click option'

A#00FF0

B#00FF00

C00FF00

D#0F0F00

Attempts:

3 left

💡 Hint

Common Mistakes

Leaving out the # symbol.

Using 5 characters instead of 6.

The correct hex code for green is #00FF00. It must have 6 characters and start with #.

4fill in blank

hard

Fill both blanks to set the border color to purple and the text color to yellow using hex colors.

CSS

h1 {
  border-color: [1];
  color: [2];
}

Drag options to blanks, or click blank then click option'

A#800080

B#FFFF00

C#FF00FF

D#008000

Attempts:

3 left

💡 Hint

Common Mistakes

Confusing purple with pink hex codes.

Mixing up border-color and color properties.

#800080 is purple and #FFFF00 is yellow in hex colors.

5fill in blank

hard

Fill all three blanks to create a CSS rule that sets background to light gray, text to dark gray, and border to black using hex colors.

CSS

.box {
  background-color: [1];
  color: [2];
  border: 2px solid [3];
}

Drag options to blanks, or click blank then click option'

A#D3D3D3

B#A9A9A9

C#000000

D#FFFFFF

Attempts:

3 left

💡 Hint

Common Mistakes

Using white instead of light gray for background.

Mixing up dark gray and black hex codes.

#D3D3D3 is light gray, #A9A9A9 is dark gray, and #000000 is black.

Practice

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