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.