skip to main content
2020-06-19

Evolution of my colour system

I like to use my website, jakebaker.co.uk, to play with new ideas and systems. This time I decided that I need more experience working on colour systems and palettes.

Bear in mind this was before I decided I wanted to move the site to have both a dark and light theme so the original plan was to use the built-in tailwind colour palette and build it out with indigo, blue, orange etc.

But then I thought about other areas that I wanted to learn. I also haven’t used CSS custom properties, also known as CSS Variables, so now was a good time to explore. With this, I could also take advantage of them to build out themes for the site, namely light and dark.

background

For background colours, I started with just the one shade of the main background.

backgroundColor: {
default: 'var(--background)',
}
html {
--background: #f2f0f4;
}

It was soon clear that I needed more. Mainly to ensure that we can have some depth and spacing using just colour by itself. So we need a few shades of the base background colour, and then the colours for some highlights.

This evolved and changed name so I could use some of the standardised TailwindCSS naming so I went with the -hundreds naming scheme.

backgroundColor: {
900: 'var(--background-900)',
600: 'var(--background-600)',
300: 'var(--background-300)',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
}
html {
--color-primary: #1c0526;
--color-secondary: #faf089;
--background-900: #f2f0f4;
--background-600: #e8e5ec;
--background-300: #efefef;
}

At the moment background has 3 options:

  • The main background, which has some shades: 900, 600, 300, and 100. I have these set up as: background-900, background-600, background-300, background-100.

  • A primary colour, bg-primary.

  • A secondary colour for highlights or cta: bg-secondary.

The bg-900 is the darkest colour in the dark theme and lightest in the light theme.

text

Text has primary, a lighter primary, secondary and inverse.

so I wanted to also extend Tailwind as much as possible, using what is essentially it’s native functionality:

extend: {
textColor: {
primary: {
default: 'var(--text-primary)',
light: 'var(--text-primary-light)',
},
secondary: 'var(--text-secondary)',
inverse: 'var(--text-inverse)',
},

backgroundColor: {
900: 'var(--background-900)',
600: 'var(--background-600)',
primary: 'var(--color-primary)',
secondary: 'var(--color-secondary)',
},
borderColor: {
primary: {
default: 'var(--text-primary)',
alt: 'var(--color-secondary)',
},
secondary: 'var(--text-secondary)',
},
}

The tailwind output above relies on the following CSS:

html {
--text-primary: #333;
--text-primary-light: #666;
--text-secondary: #667eea;
--text-inverse: #fff;
--color-primary: #1c0526;
--color-secondary: #faf089;
--background-900: #f2f0f4;
--background-600: #e8e5ec;
--shadow: #f2f0f4a6;
}

html.dark-mode {
--text-primary: #fff;
--text-primary-light: #ddd;
--text-secondary: #ae19c9;
--text-inverse: #333;
--color-primary: #1c0526;
--color-secondary: #ae19c9;
--background-900: var(--color-primary);
--background-600: #2d0737;
--shadow: #f2f0f4a6;
}

Switching the class on the HTML will allow the CSS Variables to update the look and feel of the whole site.