Evolution of my colour system

March 16, 2020

3 min read

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.