H5 - Using Color

With CSS you can give text, backgrounds, links, borders and accents a color.

body {
    background-color: white;
    color: black;
}

a {
    color: blue;
}

• color controls text color.
• background-color controls background color.
• border-color controls border color.

• Color names: red, blue, black.
• Hex values: #ff0000.
• RGB values: rgb(255 0 0).
• HSL values: hsl(0 100% 50%).
• Modern color functions such as oklch().

p {
    color: red;
}

p {
    color: #222222;
}

section {
    background-color: rgb(255 230 120);
}

div {
    background-color: rgb(0 0 0 / 50%);
}

The last example uses transparency: the background is black with 50% opacity.

• Hue is the color angle.
• Saturation is how strong the color is.
• Lightness is how light or dark the color is.

h1 {
    color: hsl(220 80% 50%);
}

oklch() is a modern CSS color method. It is useful because colors can be adjusted in a way that often feels more natural to the human eye.

h1 {
    color: oklch(60% 0.18 250);
}

color-mix() lets CSS create a new color by mixing two colors.

section {
    background-color: color-mix(in oklch, blue 10%, white);
    border: 2px solid color-mix(in oklch, blue 35%, white);
}

CSS variables let you store important colors once and reuse them.

:root {
    --background-color: white;
    --text-color: black;
    --accent-color: royalblue;
}

body {
    background-color: var(--background-color);
    color: var(--text-color);
}

a {
    color: var(--accent-color);
}

A common guideline is: normal text needs a contrast ratio of at least 4.5:1. Large text needs at least 3:1.

/* Good contrast */
p {
    background-color: white;
    color: black;
}

/* Often too little contrast */
p {
    background-color: white;
    color: lightgray;
}

You often set the page background on the body. Start with a plain color as fallback. You can also use an image and let it cover the screen.

body {
    background-color: #888888;
}

body {
    background: #888888 url("background.jpg") center center fixed;
    background-size: cover;
}