Skip to main content

Modern Colors — exercises and bug fixes

5 hands-on exercises and 5 find-the-bug challenges for the Modern 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 oklch()

    easy10 min

    Set the #box text colour to oklch(0.7 0.15 200).

  2. 2

    Use lab()

    easy10 min

    Set the #box text colour to lab(50% 20 -30).

  3. 3

    Mix two colours

    easy10 min

    Give #box a background that is half red, half blue.

  4. 4

    Use oklab()

    easy10 min

    Set the #box text colour to oklab(0.5 0.1 -0.1).

  5. 5

    Use lch()

    medium10 min

    Give #box a background of lch(50% 30 200).

Find the bug(5)

  1. 1

    Fix the legacy notation

    easy8 min

    This should use oklch, not hsl.

  2. 2

    Fix the commas in lab()

    easy8 min

    Modern colour functions separate values with spaces.

  3. 3

    Fix the missing colour space

    easy8 min

    color-mix() needs an interpolation space.

  4. 4

    Fix the misspelled function

    easy8 min

    The function is oklab.

  5. 5

    Fix lch confused with oklch

    easy8 min

    This background should use lch().

Ready to write the code?

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

Open the workspace