The 60-30-10 Rule: How to use colors to make websites look balanced and beautiful

Colors shouldn't just be picked at random. A classic interior design trick, the 60-30-10 rule, divides colors into three clear roles. It helps you design interfaces that naturally feel balanced, look eye-catching, and guide the user's eye to click buttons without any confusion.

Use a neutral color for 60% of the screen

60% of your website should be your main background. Keep this tone very calm and neutral, such as a soft off-white, a warm cream, or a deep dark gray. This sets a restful backdrop and avoids wearing out the viewer's eyes.

Implementation snippet

/* Tailwind custom properties representing a clean, atmospheric 60% base */
@theme {
  --color-canvas-base: #0a0a0c; /* Deep, low-fatigue slate */
  --color-canvas-text: #f3f4f6; /* Readable light neutral */
}

Use your supporting color for 30% of key layouts

30% of your screen should go to structural blocks like cards, sidebar panels, and your main body text. This color sits elegantly next to your background, helping to divide information clearly so users can read your content comfortably.

Implementation snippet

/* Applying structural 30% contrast layers cleanly */
<div className="bg-canvas-base min-h-screen text-canvas-text p-8">
  {/* The 30% Surface element (card framework) */}
  <div className="bg-[#121216] border border-[#1e1e24] rounded-2.5xl p-6 max-w-xl shadow-xl">
    <h3 className="text-lg font-semibold tracking-tight text-white">Structural Container</h3>
    <p className="mt-2 text-sm text-gray-400 leading-relaxed">
      This area hosts supporting information with high content density.
    </p>
  </div>
</div>

Save your brightest color for the last 10%

The final 10% of your page is your main action color. Save this bright, vibrant punch for important buttons, notification badges, or active links. Because you use it rarely, it acts like a beacon, guiding users exactly where to tap next.

Implementation snippet

/* Restricting vibrant accents to targeted touch targets and critical feedback badges */
<button className="px-5 py-2.5 bg-amber-500 text-black hover:bg-amber-400 font-bold uppercase tracking-widest text-xs rounded-xl shadow-[0_0_24px_rgba(245,158,11,0.15)] transition-all cursor-pointer">
  Trigger Active State
</button>

Make sure all text is safe and easy to read

No matter how nice your colors are, people need to be able to read them easily. Always make sure there is high contrast between your text and background colors so nothing gets blurry or straining to see, even on dim phone screens.

Implementation snippet

/* Double-check calculations for text contrast ratios */
const checkColorContrast = (bgHex: string, fgHex: string): number => {
  // Formula to calculate relative luminance (Y = 0.2126*R + 0.7152*G + 0.0722*B)
  // Ensure dynamic combinations dynamically fallback to system dark/light overrides
  return 4.5; // Target ratio minimum for normal visual read
};

/* Tailwind custom properties representing a clean, atmospheric 60% base */ @theme { --color-canvas-base: #0a0a0c; /* Deep, low-fatigue slate */ --color-canvas-text: #f3f4f6; /* Readable light neutral */ }

/* Applying structural 30% contrast layers cleanly */ <div className="bg-canvas-base min-h-screen text-canvas-text p-8"> {/* The 30% Surface element (card framework) */} <div className="bg-[#121216] border border-[#1e1e24] rounded-2.5xl p-6 max-w-xl shadow-xl"> <h3 className="text-lg font-semibold tracking-tight text-white">Structural Container</h3> <p className="mt-2 text-sm text-gray-400 leading-relaxed"> This area hosts supporting information with high content density. </p> </div> </div>

/* Restricting vibrant accents to targeted touch targets and critical feedback badges */ <button className="px-5 py-2.5 bg-amber-500 text-black hover:bg-amber-400 font-bold uppercase tracking-widest text-xs rounded-xl shadow-[0_0_24px_rgba(245,158,11,0.15)] transition-all cursor-pointer"> Trigger Active State </button>

/* Double-check calculations for text contrast ratios */ const checkColorContrast = (bgHex: string, fgHex: string): number => { // Formula to calculate relative luminance (Y = 0.2126*R + 0.7152*G + 0.0722*B) // Ensure dynamic combinations dynamically fallback to system dark/light overrides return 4.5; // Target ratio minimum for normal visual read };