Skip to main content

CSS HEX Colors — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the CSS HEX Colors lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.

Sign in to start solvingCreate a free account

Exercises(5)

  1. 1

    Use a six-digit hex

    easy10 min

    Set the #box text colour to #ff5733.

  2. 2

    Use a three-digit hex

    easy10 min

    Give #box a #0f0 background.

  3. 3

    Mix the channels

    easy10 min

    Set the #box text colour to #000080.

  4. 4

    Shorthand with three channels

    easy10 min

    Give #box a #fc0 background.

  5. 5

    Use two hex colours

    medium10 min

    #ffffff text on a #333333 background.

Find the bug(5)

  1. 1

    Fix the missing hash

    easy8 min

    A hex colour starts with #.

  2. 2

    Fix the five-digit hex

    easy8 min

    Hex colours have three, six or eight digits.

  3. 3

    Fix the out-of-range digit

    easy8 min

    Hex digits only run 0-9 and a-f.

  4. 4

    Fix the wrong shorthand

    easy8 min

    The background should be #fc0, not #f00.

  5. 5

    Fix the swapped colours

    easy8 min

    The light colour belongs on the text.

Ready to write the code?

The editor, the automatic checks and the worked solutions open up with an account.

Open the workspace