60‐30‐10 Color Rule - johnverz22/webdev1-lessons GitHub Wiki

What is the 60-30-10 Rule?

This rule helps you balance colors in web design.

• 60% – Dominant color (main background or large containers)
• 30% – Secondary color (headers, cards, sidebars)
• 10% – Accent color (buttons, links, highlights)

It keeps your design clean, readable, and visually appealing.

---

Step-by-Step: How to Choose Colors

1. Pick a color palette

Choose:

• 1 dominant color
• 1 secondary color
• 1 accent color

Use tools like:

• Coolors
• Adobe Color
• Canva Color Palette

Example:

• Dominant: #f5f5f5 (light gray)
• Secondary: #3498db (blue)
• Accent: #e74c3c (red)

---

CSS Example Using the 60-30-10 Rule

:root {
  --dominant-color: #f5f5f5;
  --secondary-color: #3498db;
  --accent-color: #e74c3c;
}

body {
  background-color: var(--dominant-color); /* 60% */
  color: #333;
  font-family: Arial, sans-serif;
}

header, footer, aside {
  background-color: var(--secondary-color); /* 30% */
  color: white;
  padding: 1rem;
}

button, a {
  background-color: var(--accent-color); /* 10% */
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  text-decoration: none;
  cursor: pointer;
}

button:hover, a:hover {
  opacity: 0.8;
}

---

Where to Apply Each Color

Area	Use this color
Page background	Dominant (60%)
Headers/Sidebar	Secondary (30%)
Buttons/Links	Accent (10%)

---

Tips

• Use neutral shades for dominant colors (whites, grays).
• Keep contrast high between text and background.
• Use accent colors sparingly to draw attention.