📑 What are Colours in HTML?

Colours style text, backgrounds, borders and other elements. They are applied using CSS properties such as color, background-color, and border-color. HTML provides structure; CSS provides colour and design.

🔹 Different Ways to Define Colours

1. By Name

Use one of the 140+ predefined colour names (case-insensitive).

<p style="color:red;">This is red text.</p>
<p style="background-color:lightblue;">This has a light blue background.</p>

2. By HEX Code

Hex codes use #RRGGBB.

<p style="color:#ff0000;">This is red (hex).</p>

3. By RGB Values

<p style="color:rgb(0,255,0);">This is green (rgb).</p>

4. By RGBA (with transparency)

<p style="color:rgba(0,0,255,0.5);">This is semi-transparent blue.</p>

5. By HSL (Hue, Saturation, Lightness)

<p style="color:hsl(120,100%,50%);">This is green (hsl).</p>

6. By HSLA (with transparency)

<p style="color:hsla(300,100%,50%,0.5);">This is transparent pink (hsla).</p>

Back to top

📑 HTML Colour Names

HTML supports 140 standard colour names (e.g., red, blue, LightBlue). Colour names are case-insensitive.

<h1 style="color:Red;">This is Red</h1>
<p style="color:Blue;">This is Blue</p>
<p style="background-color:LightGreen;">This has a Light Green background</p>

Popular Names

Basic: Red, Blue, Green, Yellow, Orange, Pink, Purple, Brown, Black, White, Gray — Shades: LightBlue, DarkBlue, LightGreen, etc.

Back to top

🔹 Color Values: HEX, RGB, RGBA, HSL, HSLA

HEX

<p style="color:#ff0000;">Red (HEX: #ff0000)</p>

RGB

<p style="color:rgb(255,0,0);">Red (RGB)</p>

RGBA (with Alpha)

<p style="color:rgba(0,0,255,0.3);">Transparent blue (RGBA)</p>

HSL

<p style="color:hsl(200,100%,50%);">Bright blue (HSL)</p>

HSLA

<p style="color:hsla(120,100%,50%,0.3);">Transparent green (HSLA)</p>

Where to use

Use color for text, background-color for backgrounds, and border-color for borders. Prefer CSS classes instead of inline styles for maintainability.

Back to top

✅ Example Code (Various Methods)

<!DOCTYPE html>
<html>
<head><title>HTML Colours Example</title></head>
<body style="background-color:LightYellow;">
  <h1 style="color:DarkBlue;">Heading in DarkBlue</h1>
  <p style="color:#008000;">This is Green (Hex)</p>
  <p style="color:rgb(255,165,0);">This is Orange (RGB)</p>
  <p style="color:rgba(0,0,255,0.5);">Transparent Blue (RGBA)</p>
  <div style="color:white; background-color:blue; border:3px solid red; padding:10px;">
    Styled Box with Colours
  </div>
</body>
</html>

Back to top

📝 Quick Quiz

Q1. Which property sets text colour?
Q2. What is the hex code for black?
Q3. What does the "A" in RGBA/HSLA stand for?

Back to top

🏋️ Practice Questions

  1. Create a page with:
    • A heading in DarkBlue.
    • A paragraph in Gray.
    • Background colour LightYellow.
  2. Display three paragraphs using HEX, RGB and HSL respectively.
  3. Show "Transparent Text" in blue with 50% transparency using rgba().
  4. Create three coloured boxes (<div>) using HEX, RGB, and HSL.

Back to top

✅ Summary

HTML colours can be defined using names, HEX, RGB, RGBA, HSL and HSLA. Use color for text, background-color for backgrounds, and border-color for borders. RGBA/HSLA add transparency. Prefer CSS classes for maintainable styling.