One colour, three ways – CSS Exercise with Solution

Write colours in different notations.

What to build

Three rules.

Requirements

.a has the colour #ff6347, written in hex.
.b has the colour red 0, green 128, blue 128, written with rgb().
.c has a background of black at 50% transparency, written with rgb() and an alpha value.

Constraints

Do not use colour names.

Example

rgb(0 0 0 / 0.25) is black at one quarter strength.

Why it works

Each notation describes the same red, green and blue amounts, and an alpha value says how much shows through.

Hints

Hint 1

#ff0000 and rgb(255 0 0) are the same red.

Hint 2

Alpha is the fourth value, after a slash.

Solution

Show one correct solution (try it yourself first)

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Colours</title>
  <style>
    .a { color: #ff6347; }
    .b { color: rgb(0 128 128); }
    .c { background: rgb(0 0 0 / 0.5); }
  </style>
</head>
<body>
  <p class="a">Tomato</p>
  <p class="b">Teal</p>
  <p class="c">Shaded</p>
</body>
</html>

Lesson: Colours, units and values →