CSS Colors

1. Introduction

Colour is one of the most important parts of visual design. CSS gives you multiple ways to specify any colour — from simple keywords like red to precise hex codes like #2563eb to fully transparent colours using rgba.

Understanding colour formats helps you:

Match brand colours precisely (most brands use hex codes)
Create hover effects with transparent overlays
Define colour systems with CSS variables
Ensure accessible colour contrast ratios

In this lesson you will learn all the major colour formats, when to use each, and two key colour-related properties: color and background-color.

2. Theory

The Two Main Colour Properties

Property	What it controls
`color`	Text colour and text decoration colour
`background-color`	Background colour behind the element

Named Colours

CSS has 140+ named colours. Easy to remember but not precise enough for professional design.

color: red;
color: blue;
color: darkslategray;
background-color: lightcoral;
background-color: papayawhip;

Hex Colours

The most common format in web development. A hex code starts with # followed by six hexadecimal digits (0–9 and A–F) representing Red, Green, Blue.

#RRGGBB
#000000  /* black  — no red, no green, no blue */
#ffffff  /* white  — full red, full green, full blue */
#ff0000  /* red    — full red, no green, no blue */
#2563eb  /* blue   — a commonly used brand blue */
#f59e0b  /* amber  — used for warnings */

Shorthand: if both digits are the same, you can use 3 characters: #fff = #ffffff, #000 = #000000, #f00 = #ff0000.

RGB Colours

Uses three numbers from 0–255 for Red, Green, Blue. More readable than hex for mixing colours mentally.

color: rgb(37, 99, 235);   /* same as #2563eb */
color: rgb(255, 0, 0);     /* red */
color: rgb(0, 0, 0);       /* black */
color: rgb(255, 255, 255); /* white */

RGBA — RGB with Alpha (Transparency)

The fourth value is alpha (transparency): 0 = fully transparent, 1 = fully opaque.

background-color: rgba(37, 99, 235, 0.5);  /* 50% transparent blue */
background-color: rgba(0, 0, 0, 0.8);      /* dark overlay */
background-color: rgba(255, 255, 255, 0.1); /* subtle white tint */

HSL Colours

HSL stands for Hue, Saturation, Lightness. Designers often prefer HSL because it is intuitive — you can easily make a colour lighter or darker by just changing the L value.

Hue: 0–360 degrees on the colour wheel (0 = red, 120 = green, 240 = blue)
Saturation: 0% = grey, 100% = vivid colour
Lightness: 0% = black, 50% = normal, 100% = white

color: hsl(217, 91%, 60%);   /* bright blue */
color: hsl(217, 91%, 40%);   /* darker blue */
color: hsl(217, 91%, 80%);   /* lighter blue */
color: hsl(0, 0%, 50%);      /* medium grey */

HSLA — HSL with Alpha

background-color: hsla(217, 91%, 60%, 0.2); /* transparent blue */

Modern: `oklch()` and `color-mix()`

Newer CSS colour functions are gaining browser support. You do not need them yet, but it is good to know they exist.

/* oklch: perceptually uniform colour space */
color: oklch(60% 0.2 250);

/* color-mix: mix two colours */
background: color-mix(in srgb, blue 30%, white);

Gradients

CSS can create gradients (colour transitions) without images.

/* Linear gradient — top to bottom */
background: linear-gradient(to bottom, #2563eb, #7c3aed);

/* Linear gradient — left to right */
background: linear-gradient(to right, #f59e0b, #ef4444);

/* Radial gradient — from centre outward */
background: radial-gradient(circle, #2563eb, #1e293b);

Opacity Property

Unlike rgba, the opacity property makes the entire element (including its children and content) transparent.

.overlay {
  opacity: 0.5; /* 50% transparent — affects element AND its content */
}

/* vs */
.overlay {
  background-color: rgba(0, 0, 0, 0.5); /* only the background is transparent */
}

3. Real World Example

Professional websites use a colour palette — typically 2–4 main colours used consistently:

Primary: The brand colour (e.g. #2563eb — used for buttons, links, headings)
Secondary: Supporting colour (e.g. #7c3aed — used for accents)
Neutral: Greys for text and backgrounds (e.g. #1e293b, #64748b, #f8fafc)
Semantic: #16a34a (success), #dc2626 (error), #f59e0b (warning)

These colours are typically defined as CSS custom properties (variables) and reused throughout the entire stylesheet — a technique covered in Module 08.

4. Code Example

/* ===== COLOUR SYSTEM ===== */

/* Named colours for quick prototyping */
body { background-color: white; color: black; }

/* Hex — most common in production */
h1 { color: #0f172a; }
a  { color: #2563eb; }
a:hover { color: #1d4ed8; }

/* Highlight bar */
.highlight {
  background-color: #fef3c7;
  border-left: 4px solid #f59e0b;
  padding: 12px 16px;
}

/* Dark overlay on hero image */
.hero {
  position: relative;
  background-image: url('hero.jpg');
  background-size: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55); /* dark overlay */
}

/* Gradient button */
.btn-gradient {
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 6px;
}

/* Status colours */
.status-success { color: #16a34a; background-color: #dcfce7; }
.status-error   { color: #dc2626; background-color: #fee2e2; }
.status-warning { color: #d97706; background-color: #fef3c7; }
.status-info    { color: #0369a1; background-color: #e0f2fe; }

/* Semi-transparent card */
.glass-card {
  background-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

5. Code Breakdown

rgba(0, 0, 0, 0.55): Black (0, 0, 0) at 55% opacity. Used to create dark overlays over images so white text remains readable on top.
linear-gradient(135deg, #2563eb, #7c3aed): Gradient going at 135 degrees from blue to purple. The angle 0deg = bottom to top; 90deg = left to right; 135deg = diagonal.
inset: 0: A shorthand for top: 0; right: 0; bottom: 0; left: 0; — makes the overlay cover its entire parent element.
backdrop-filter: blur(10px): Blurs whatever is behind this element — creates a "frosted glass" effect. Works only when the element has a semi-transparent background.
#dcfce7 with #16a34a text: A light green background with dark green text. This ensures sufficient colour contrast for readability (WCAG compliant).

6. Common Mistakes

Confusing color and background-color. color is for text; background-color is for the background. Using one when you mean the other gives unexpected results.
Poor colour contrast. Light grey text on a white background looks "clean" but many users cannot read it. Use a contrast checker (e.g. WebAIM Contrast Checker). Minimum ratio for normal text is 4.5:1.
Inconsistent colour values. Using #2563eb in one place and #2563EC in another (different case) creates two separate colours. Use CSS variables to keep colours consistent.
Overusing opacity vs rgba. opacity: 0.5 makes the element AND all its children transparent — including text. Use rgba() on the background-color if you only want the background to be transparent.
Using too many colours. Beginners often use many different colours which looks chaotic. Stick to a palette of 4–6 colours.

7. Best Practices

Use hex codes for solid brand colours — they are the most universally understood format.
Use rgba() or hsla() for transparency — more readable than hex with alpha.
Define colours once as CSS variables — --color-primary: #2563eb; then reuse everywhere. (Covered in Module 08.)
Always check colour contrast — use WebAIM Contrast Checker or the browser DevTools accessibility panel.
Do not rely on colour alone to convey information — colourblind users need other cues (icons, patterns, text).
Use a consistent colour palette — 1 primary, 1 secondary, 3–4 neutral greys, 4 semantic colours.

8. Practice Exercise

Create colours.html and colours.css. Build a page with:

Four <div> elements — give each a different background colour using different formats:
- First: a named colour
- Second: a hex code
- Third: rgb()
- Fourth: hsl()
A paragraph with semi-transparent background using rgba()
A heading with a gradient background using linear-gradient
Four status messages: success, error, warning, info — each with appropriate background and text colour

Give each div a minimum height of 80px and padding: 16px so you can see the colours.

9. Assignment

Design a colour palette page that demonstrates your chosen brand colours. Requirements:

Choose a colour palette: one primary colour, one secondary, and four neutral shades
Create a swatch for each colour: a <div> showing the colour, its name, and its hex code
Create a mock "button row" showing primary, secondary, success, danger, and warning button styles
Show the same text in both good contrast (readable) and bad contrast (hard to read) to demonstrate why contrast matters
Add a gradient banner using your primary and secondary colours

10. Interview Questions

Q1: What are the different ways to specify colour in CSS?

Answer: Named colours (e.g. red), hex codes (e.g. #ff0000), RGB (e.g. rgb(255, 0, 0)), RGBA with transparency (e.g. rgba(255, 0, 0, 0.5)), HSL (e.g. hsl(0, 100%, 50%)), and HSLA. Modern CSS also supports oklch() and color-mix().

Q2: What is the difference between `color` and `background-color`?

Answer: color sets the colour of text and text decorations. background-color sets the colour of the background area behind the element's content.

Q3: When would you use `rgba()` instead of a hex colour?

Answer: When you need transparency. Hex colours are always fully opaque. rgba() lets you set the alpha channel (0 = fully transparent, 1 = fully opaque), which is useful for overlays, glass effects, and subtle backgrounds.

Q4: What is colour contrast and why does it matter?

Answer: Colour contrast is the difference in luminance between text colour and background colour. It matters for accessibility — low contrast text is hard to read for users with visual impairments. WCAG guidelines require a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text.

Q5: What is the advantage of HSL over hex?

Answer: HSL is more intuitive for humans to adjust. To make a colour lighter, increase the L value. To make it less vivid, decrease S. This makes it easy to create colour scales and variations. With hex, you need a colour picker or tool to make such adjustments.

11. Additional Resources

MDN Web Docs — CSS Color (search "MDN CSS color value")
WebAIM Contrast Checker — webaim.org/resources/contrastchecker
Coolors — coolors.co (colour palette generator)
CSS Gradient Generator — cssgradient.io
Tailwind CSS Colour Palette — tailwindcss.com/docs/customizing-colors