Hex colors in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Hex Color Codes

What color will the CSS rule color: #FF0000; produce when applied to text?

A Black

B Bright green

C Bright red

D Bright blue

💡 Hint

The first two digits in a hex color code represent the red component.

The hex color #FF0000 means full red (FF), no green (00), and no blue (00), so the color is bright red.

📝 Syntax

intermediate

Valid Hex Color Syntax

Which of the following CSS hex color codes is invalid and will cause the browser to ignore the color?

A #12G45F

B #FFF

C #123ABC

D #000000

💡 Hint

Hex digits can only be 0-9 and A-F.

Option A contains the letter 'G', which is not a valid hex digit. Valid hex digits are 0-9 and A-F.

❓ rendering

advanced

Visual Result of Short Hex Color

What color will the CSS rule background-color: #0F0; produce on a webpage?

A Bright red

B Bright green

C Bright blue

D Dark gray

💡 Hint

Short hex colors repeat each digit to form the full 6-digit code.

The short hex #0F0 expands to #00FF00, which is bright green.

❓ selector

advanced

CSS Selector and Hex Color Application

Given the CSS rule p.highlight { color: #800080; }, what color will the text inside a paragraph with class highlight be?

CSS

<p class="highlight">Sample text</p>

A Purple

B Orange

C Teal

D Yellow

💡 Hint

The hex code #800080 is a common purple color.

The hex color #800080 is a shade of purple, so the text will appear purple.

❓ accessibility

expert

Hex Color Contrast for Accessibility

Which hex color combination provides the best contrast for text readability on a white background?

A Text color: #FF0000 (bright red)

B Text color: #777777 (medium gray)

C Text color: #CCCCCC (light gray)

D Text color: #000000 (black)

💡 Hint

High contrast means very different brightness between text and background.

Black (#000000) on white (#FFFFFF) provides the highest contrast, making text easiest to read for most users.