DIY Your Way to a Professional Website with the 60–30–10 Rule

Kat Irwin Design
3 min readMay 1

As a business owner, creating a website that really reflects your brand is critical to your success. However, getting the right colour scheme is not an easy task. And even once you’ve chosen the perfect palette you need to know how to use it. That’s where the 60–30–10 rule comes in — this simple formula can help you use your chosen colour palette effectively as you DIY your website.

The 60–30–10 rule is a guideline used in design to balance the use of colours. This balance creates a sense of consistency which makes your websites more visually appealing and therefore easier to use (I’ll go deeper into this in another article but basically, when your website feels inconsistent in design, it can feel overwhelming to your customers which can turn them away from your site — which loses you sales!)

The 60–30–10 rule suggests using your colours with a ratio of 60%, 30% and 10%. Depending on the style you want to represent, you can use this guideline in different ways. Let’s look at some examples.

Example 1: Minimal

For a website with a minimal style you’ll want to limit the amount of colour you are using. Take your dominant brand colour and use it for buttons, highlighted text and in imagery — this is your 10%. Then take black as your text colour (30%) and white as your background colour (60%) and there you have it — a nicely balanced website.

Example 2: Minimal but Energetic

If you have more than one brand colour, but still want your website to be relatively minimal in style, we can split the 10% between two brand colours. This will create a bit more energey than example 1.

Example 3: Bold

For a bolder design, you can swap out the white background for your brand colour and split text colours across the 30% and 10%.

Example 4: Colourful

Kat Irwin Design

Web Designer - I create websites for entrepreneurs and help you to DIY your website 😊