Member-only story

The 60–30–10 rule of colour

Hriday Checker
Bootcamp
Published in
3 min readNov 5, 2024

The 60–30–10 rule is a foundational guideline in design, particularly in color theory, that helps achieve visually pleasing and harmonious color schemes. It originated in interior design but has become popular across various fields, including web and UI design.

By dividing colours into three proportions (60%, 30%, and 10%), this rule guides designers to create balanced compositions that are both functional and aesthetically compelling.

Colour has power which directly influences the soul.

What is the 60–30–10 Rule?

The 60–30–10 rule is all about balance and dominance in a color palette:

  1. 60% (Primary Color) — This is the dominant colour and covers the largest area. It’s usually the background or main color and sets the overall tone of the design.
  2. 30% (Secondary Color) — The secondary color complements the primary, creating a sense of contrast and visual interest. It’s used on elements like backgrounds, buttons, or other areas that support the main color.
  3. 10% (Accent Color) — This is the highlight color that adds personality and brings attention to key elements. It’s often applied to elements like call-to-action buttons, icons, or links.

Choosing Colours for the…

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Hriday Checker
Hriday Checker

Written by Hriday Checker

👋 I'm Hriday, a UX & Interaction Designer passionate about crafting digital magic. 🎨 Exploring design's untold stories and tips! 🚀 Follow me!

Responses (1)

Write a response

I will add that a ratio like this also works well in culinary and musical endeavors (think balancing a cocktail recipe or creating harmony in a 3-note chord)