Colors and Backgrounds: Painting Your Web Canvas

CSS colours and backgrounds – how to set text colour, fill areas with solid colours or images, and keep text readable on top.

Colour in web design

Colour affects readability, hierarchy, and mood. CSS gives you full control over text colour, backgrounds, and borders across a page.

CSS colour properties

The main properties:

color: text colour.
background-color: fill colour behind content.
border-color: border colour.

Values can be written several ways:

Named colours: red, blue, green.
Hexadecimal: six-digit codes like #ff0000 for red.
RGB and RGBA: rgb(255, 0, 0) or rgba(255, 0, 0, 0.5) with an alpha channel for transparency.
HSL and HSLA: hsl(0, 100%, 50%) or hsla(0, 100%, 50%, 0.5) – often easier to adjust lightness and saturation.

A basic example

Setting text and background colours:

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            color: #333333; /* Dark grey text */
            background-color: #f8f8f8; /* Light grey background */
        }
        .highlight {
            color: blue;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <p>This is a paragraph with default styling.</p>
    <p class="highlight">This paragraph is highlighted.</p>
</body>
</html>

Default paragraphs use dark grey on light grey. The .highlight class swaps to blue text on a yellow background.

Backgrounds beyond solid colours

The background property covers more than flat fills:

background-image: an image as the background.
background-repeat: whether and how the image tiles.
background-position: where the image sits.
background-size: how large the image is.
background shorthand: sets several background properties in one declaration.

Adding a background image

A full-page background image:

body {
    background-image: url('path-to-image.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

No repeat, centred, scaled to cover the entire background area.

Gradient backgrounds

CSS can blend colours without an image file:

Linear gradient: colours transition along a straight line.
Radial gradient: colours transition outward from a centre point.

.gradient-background {
    background: linear-gradient(to right, red, yellow);
}

Semi-transparent backgrounds

RGBA and HSLA values include an alpha channel for transparency:

.semi-transparent-background {
    background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

Text on backgrounds

Text over coloured or photographic backgrounds needs enough contrast to stay readable. A semi-transparent overlay or a lighter/darker text colour usually does the job.

Colours and backgrounds are straightforward to set but worth getting right. Test combinations for contrast and readability, especially on mobile.