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

Kat Irwin Design
3 min readMay 1, 2023

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…

--

--

Kat Irwin Design

Web Design for Impact-Driven Entrepreneurs | 10 Years UX Experience | Build Business Stability without the Burnout