Module 2: Colour Systems0 Level Beginner

11. HTML Colors (Colors: Names, HEX, RGB, RGBA, HSL)

4 ways to decorate a website with vibrant and attractive colours

Real-life analogy

Just as a painter can mix red, green and blue to make any new colour in the world, a computer monitor makes millions of colours from these three colours.

Explanation

The 4 main formats for specifying colours in HTML:

Colour Names (Color Names): Write the name directly, such as Red, Tomato, DodgerBlue, SlateGray (140 standard names are valid).
HEX code (Hexadecimal): The most popular way, such as #ff6347 (a 6-digit code with #).
RGB values: rgb(255, 99, 71) where each colour ranges from 0 to 255.
RGBA values: Here 'A' (Alpha) means transparency (Opacity), such as rgba(0, 0, 0, 0.5) (50% transparent).

Golden rules

Never forget to put the hash # at the front of a HEX code.
Keep good contrast between text and background so that it is easy to read.

Common mistake

Making a mistake in a 3-digit or 6-digit HEX code. If you give an invalid code, the colour may turn black or transparent.

Example code

<!DOCTYPE html>
<html>
<body style="font-family: sans-serif; padding: 20px;">
  <div style="background-color: Tomato; color: white; padding: 8px; margin-bottom: 6px; border-radius: 4px;">1. By name: Tomato</div>
  <div style="background-color: #2563eb; color: white; padding: 8px; margin-bottom: 6px; border-radius: 4px;">2. HEX code: #2563eb (Royal Blue)</div>
  <div style="background-color: rgb(16, 185, 129); color: white; padding: 8px; margin-bottom: 6px; border-radius: 4px;">3. RGB value: rgb(16, 185, 129)</div>
  <div style="background-color: rgba(15, 23, 42, 0.8); color: #38bdf8; padding: 8px; border-radius: 4px;">4. RGBA value (80% opaque)</div>
</body>
</html>

Run & edit this in the live editor

Quick quiz

Which symbol must be placed in front of a HEX colour code?

Show answer

Answer: #

HEX colour codes always start with a hash '#', such as #ffffff (white).