Defining color variables in CSS

CSS can at times become confusing or hard to work in and edit, especially color codes. A well designed website will have similar color codes due to shading and lighter areas. One way to make this easier is to define the main colors as variables. You can read about CSS variables here or check out my example below.

The first step is to declare the variable, this is done like so:

:root {
    --red:#ff0033;
    --navy:#152385;
    --grey:#767676;
}

Here I have defined a red, navy and grey color.

To use these variables is easy:

body {
    background: var(--navy);
}
h1 {
    color: var(--red);
}

This can now save me from having to copy the red color hex code for where I want to use that value.