Stuff & Nonsense product and website design

Designing Zombie Hunt part one: Colour

Designing Zombie Hunt part one: Colour

Two weeks ago, I took a week—away from work on Nozomi Networks—and spent some time working on a redesign for Zombie Hunt. The team are franchising their successful business and needed a new design to attract customers and potential franchisees.

Here’s a link to the completed website.

Over the next week, I’m going to show you my process and the decisions I make when I work on a project like this. Starting today, with how I make colour palettes.

The team at Zombie Hunt had already made certain choices about colour. The page backgrounds were pure black and text was pure white. Their branding was near-primary red and green, and the website was filled with camouflage-coloured graphics and icons.

Colours sampled from the original Zombie Hunt website.

I understood what they were hoping to achieve with their colour choices, but they’d left plenty of room for improvement. Black (0% brightness) and white (100% brightness) have the highest contrast, making the text more difficult to read and even causing eye strain over long periods. The near-primary red and its complementary green—two colours opposite one another on the colour wheel—created uncomfortable vibrations when placed next to each other.

The near-primary red and its complementary green created uncomfortable vibrations.

I needed to find an alternative red on which to base all my colour decisions, so I chose one analogous to the original. Analogous colours are three colours which are adjacent on the colour wheel. My new red (R224 G11 B69) contains blue and a hint of green. It’s 91% saturated and has 46% lightness (H344 S91 L46), making it more adaptable against various background colours.

My new red is more adaptable against various background colours.

Isaac Newton’s colour wheel

Maybe you’re as surprised as I was to learn that the colour wheel— the basis of all colour theory and is used to define relationships between colours—was invented by none other than Sir Isaac Newton of falling apple fame. Those relationships include:

  • Analogous colours which are adjacent on the wheel
  • Complementary colours at opposite sides of the wheel
  • Split complementary: Two colours on either side of the complementary
  • Double split complementary (tetradic:) Two complementary colour pairs which form a rectangle on the wheel
  • Monochromatic which are shades, tints, and tones of the same base colour
  • Triadic: Three colours which are evenly spaced around the wheel

Unless I aim for a very high impact in a design, I mostly avoid using pure complementary colours as they often make creating a broader palette of colours tricky.

Colours which are complementary to my new red.

Whereas a split complementary palette provides a more flexible choice of colours which feel easier on the eye.

Colours from a split complementary palette based on my new red.

A double split complementary palette offers even more options for harmonious colours.

Colours from a double split complementary palette based on my new red.

And, a triadic palette—where colours are spaced evenly around the wheel—offers a range of hues which all feel connected to the base colour.

Colours from a triadic palette based on my new red.

Science plus intuition

The mathematics of colour theory is only the starting point of colour design. The end result often comes from experience, intuition, and what feels right. I learned a long time ago that although there’s a definite science to the relationships between colours, there are no rules for how you can combine them. I regularly choose some colours from a split or double split combinations and combine them with other colours from triadic combinations.

Left: I regularly choose colours with different relationships to my base colour. Right:Desaturating colours makes them look less vibrant.

My choice of three colours for the Zombie Hunt design felt right, but they still seemed too vibrant for the look I was aiming for. As I mentioned, colour theory is a starting point, not a set of hard and fast rules, so I desaturated those colours to make them feel better.

I then used the desaturated yellow to develop a small set of extra accent colours, which I could use sparingly across my design.

A small set of extra accent colours based on my desaturated yellow.

Even though colour theory gives me a firm basis for colour design, I often rely on a bit of intuition to get the precise colours I need. The theory had helped me decide on a desaturated yellow for the new Zombie Hunt design; somehow, it still didn’t feel right. So, I experimented with combining the green from my double split complementary palette with the yellow from my triadic palette and found that a screen blending mode gave me the colour I was looking for.

A screen blending mode gave me the yellow I was looking for.

Recolouring the illustrations

To save money and time on the project, the team at Zombie hunt and I decided to launch the new design using illustrations from a stock library. We found a style we all enjoyed, but the colouring of these illustrations troubled me as they felt out of step with the rest of my design. So, I developed a palette of new colours and created tints by adjusting their lightnesses.

A palette of new colours helps illustrations feel in step with the rest of my design.

These extra colours—together with my freshly designed colour palette of red, green, and yellow, gave me a broad range of harmonious colours that feel like they belong together.

My freshly designed colour palette feels harmonious.

Considering colour contrast accessibility

I’ve always believed that considering accessibility should be part of the design process alongside intuition and theory. It also shouldn’t be a consideration we test at the end of the process, but instead should be an aspect we consider from the beginning of a design.

There are plenty of tools available online to help ensure that colour choices remain accessible and, at the very least, have sufficient contrast between colours. The Institute for Disability Research, Policy, and Practice (WebAIM) has its own popular tool, although I prefer Alex Clapperton’s Colour Contrast Checker and Lea Verou’s Contrast Ratio Checker.

Dark theme

Background colour Foreground colour Colour contrast Ratio
Page: #262626 Text: #d3d3d3 AAA (all sizes) 10.1:1
Page: #262626 Link text: #c2cc46 AAA (all sizes) 8.66:1
Buttons: #c2cc46 Link text: #262626 AAA (all sizes) 8.66:1

Light theme

Background colour Foreground colour Colour contrast Ratio
Page: #c2ce46 Text: #262626 AAA (all sizes) 8.79:1
Page: #c2ce46 Link text: #7b509f AA (large) 3.49:1
Buttons: #7b509f Link text: #f9a61a AA (large) 3:1

Having checked the contrast between background and foreground colours in my design’s dark and light themes—and even though my light theme has lower contrast that its dark counterpart for buttons and link text—I was happy with my choices.

Throughout the rest of this week, I’ll write more about my process and many other decisions I make when I work on projects like Zombie Hunt. So, stay tuned for the next instalment.

  1. Part one: Colour
  2. Part two: Dark and light themes
  3. Part three: Designing a layout grid
  4. Part four: Catering for small screens
  5. Part five: Coding my designs
  6. Zombie Hunt website

Written by Andy Clarke who tagged this with accessibility, design

Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.