Skip to main content

CSS RGB Colors — exercises and bug fixes

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

Exercises(5)

  1. 1

    Use rgb()

    easy10 min

    Set the #box text colour to rgb(255, 87, 51).

  2. 2

    Use the space-separated form

    easy10 min

    Give #box a background of rgb(0 128 128).

  3. 3

    Add an alpha channel

    easy10 min

    Set the #box text to half-transparent red.

  4. 4

    Use slash alpha syntax

    easy10 min

    Give #box a background of blue at 25% opacity.

  5. 5

    Combine two rgb colours

    medium10 min

    rgb(255, 255, 255) text on rgb(20, 20, 20).

Find the bug(5)

  1. 1

    Fix the semicolon separators

    easy8 min

    rgb() channels are separated by commas or spaces.

  2. 2

    Fix the reversed channels

    easy8 min

    The order is red, green, blue.

  3. 3

    Fix the alpha above one

    easy8 min

    An alpha of 2 clamps to fully opaque.

  4. 4

    Fix the missing slash

    easy8 min

    In the space-separated form the alpha follows a slash.

  5. 5

    Fix the missing function

    easy8 min

    Bare numbers are not a colour.

Ready to write the code?

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

Open the workspace