Deutsche Version

In this article I will show you how to change the colour theme of your website using a relatively simple method. I use CSS Custom Properties (also called CSS Variables) to design different colour themes.

colour themes change moods – Image: Simon Berger on Pixabay

In this way, you can customize your own website in no time, e.g. according to the season, a monthly focus or simply the mood.

The Template Example

My example is not about exact design or winning a beauty award. The examples are what they are: Examples or templates for interested readers who want to develop them further and use them to design their own website.

Monochromatic Colour Palettes

Therefore, I keep the design as simple as possible. I use four monochromatic colour palettes that I assign to the four seasons: Green (with yellow-orange splashes of colour for the blossom) for spring, blue (with sunny-sandy splashes of colour) for summer, brown (with reddish accents) for fall and red (with green splashes of hope) for winter.

Nevertheless, a little work is involved. Depending on how many colour changes are to be possible, just as many colour palettes must be created.

I use the hexadecimal notation for the colours in the CSS file so that it remains clear. However, I created the colour palettes using the hsl notation. Advantage: I keep the tone (hue, that's what the h in hsl stands for) and vary the colour nuances via the saturation (that's what the s in hsl stands for) and the brightness (lightness or luminosity, that's what the l in hsl stands for). Saturation and lightness are given as percentages so that you can easily adjust the variants.

(For more on colour coding and the differences, see. here and here )

Use Colour Picker

To determine the colour shades, it is best to use a colour picker, which are available online in large numbers or in the popular editors. Simply start an online search with "colour picker online" or "editor with colour picker".

Practical for this purpose are the online colour scheme generators or colour palette generators (see links below this article).

Theming with CSS Variables

For each colour palette, I chose a starting colour that has about medium saturation and brightness. From this I then created graduated lighter and darker shades. There are also some online tools that do this for you, which I have listed below under "Links".

It is important that the variables are given general names such as --light-color or --darker-color and not --light-green or --darker-green. Behind --light-green there is always a green colour, while --light-color can stand for any light colour. This means that for each colour palette, the names of the variables must be identical so that they are easily exchangeable.

Approach

I work in the CSS file and only need one CSS file. In this CSS file I store all four colour themes and comment out the three I do not need. If I want to change the colour theme, I comment out the current theme and comment in the colour scheme I want (see also here). In the following example I change from spring/green to summer/blue:

Before - Theme "Spring/Green" is active

/* Green Theme - Spring */
:root {
  --colored-white: #F7FFF2;
  --pale-color: #E0FFCC;
  --lightest-color: #BCE6A1;
  --lighter-color: #9BCC7A;
  --light-color: #7BBF4D;
  --default-color: #69B336;
  --dark-color: #51991F;
  --darker-color: #30660A;
  --darkest-color: #1C4003;
  --strong-color: #102600;
  --color-accent-1: #FFA500;
  --color-accent-2: #E6E600;
}


/* Blue Theme - Sommer */
/*
:root {
  --colored-white: #F2F4FF;
  --pale-color: #CCD5FF;
  --lightest-color: #99ABFF;
  --lighter-color: #6681FF;
  --light-color: #3357FF;
  --default-color: #002BFF;
  --dark-color: #0024CC;
  --darker-color: #001B99;
  --darkest-color: #001266;
  --strong-color: #000933;
  --color-accent-1: #FFFF40;
  --color-accent-2: #E6E61F;
}
*/

...

After - Theme "Summer/Blue" is active

/* Green Theme - Spring */
/*
:root {
  --colored-white: #F7FFF2;
  --pale-color: #E0FFCC;
  --lightest-color: #BCE6A1;
  --lighter-color: #9BCC7A;
  --light-color: #7BBF4D;
  --default-color: #69B336;
  --dark-color: #51991F;
  --darker-color: #30660A;
  --darkest-color: #1C4003;
  --strong-color: #102600;
  --color-accent-1: #FFA500;
  --color-accent-2: #E6E600;
}
*/

/* Blue Theme - Sommer */
:root {
  --colored-white: #F2F4FF;
  --pale-color: #CCD5FF;
  --lightest-color: #99ABFF;
  --lighter-color: #6681FF;
  --light-color: #3357FF;
  --default-color: #002BFF;
  --dark-color: #0024CC;
  --darker-color: #001B99;
  --darkest-color: #001266;
  --strong-color: #000933;
  --color-accent-1: #FFFF40;
  --color-accent-2: #E6E61F;
}
...

Well, that was it. A simple but effective way to quickly change the look and feel of a website as needed!

You can see the result on my demo site. You can also download the template of the variations of the colour theme.

Links

Especially suitable for monochromatic palettes, are the tools from hexcolortool.com and 0to255.com.

The following tools ease the creation of complex colour palettes: donesmart.com and pinetools.com.

And those who prefer to work with CSS colour names will find what they are looking for at enes.in.

If you want to dig a little deeper and are looking for more complex methods, read the article of Dieter Raber on css-tricks.com and the post by Michelle Barker on the blog of logrocket.com.

--> This template on Codepen.

--> Click here for the demo site.

--> Here you can download the template.

In the ZIP file you will find the HTML file and the CSS file for the template.

Have fun using and developing the template!