[{"data":1,"prerenderedAt":629},["ShallowReactive",2],{"guide-60-30-10-color-rule-web-design":3},{"id":4,"title":5,"body":6,"date":618,"description":619,"extension":620,"meta":621,"navigation":443,"path":625,"readingTime":211,"seo":626,"stem":627,"__hash__":628},"guides\u002Fguides\u002F60-30-10-color-rule-web-design.md","The 60-30-10 Color Rule for Web Design: A Practical Guide",{"type":7,"value":8,"toc":598},"minimark",[9,14,18,41,44,48,51,62,65,69,74,130,134,137,228,231,235,299,303,307,310,314,317,321,324,328,331,351,354,358,379,388,392,540,544,564,568,574,578,594],[10,11,13],"h2",{"id":12},"what-is-the-60-30-10-rule","What Is the 60-30-10 Rule?",[15,16,17],"p",{},"The 60-30-10 rule is a classic proportion guideline from interior design, adapted for web design. It divides your color usage into three roles:",[19,20,21,29,35],"ul",{},[22,23,24,28],"li",{},[25,26,27],"strong",{},"60% — Dominant color",": Backgrounds, large areas, the overall feel",[22,30,31,34],{},[25,32,33],{},"30% — Secondary color",": Navigation, sidebars, cards, sections",[22,36,37,40],{},[25,38,39],{},"10% — Accent color",": CTAs, links, highlights, alerts",[15,42,43],{},"This ratio creates visual balance. The dominant color provides foundation, the secondary adds structure, and the accent draws attention where it matters.",[10,45,47],{"id":46},"why-it-works","Why It Works",[15,49,50],{},"Human perception prefers hierarchy. When every color competes for attention, the result is visual noise. The 60-30-10 rule enforces a clear ordering:",[19,52,53,56,59],{},[22,54,55],{},"Your eye first lands on the accent (10%) — that is intentional",[22,57,58],{},"Then it absorbs the structure defined by the secondary (30%)",[22,60,61],{},"Finally, it rests on the dominant backdrop (60%)",[15,63,64],{},"Without this hierarchy, users cannot quickly identify what is important on the page.",[10,66,68],{"id":67},"applying-it-to-web-interfaces","Applying It to Web Interfaces",[70,71,73],"h3",{"id":72},"mapping-colors-to-ui-elements","Mapping Colors to UI Elements",[75,76,77,93],"table",{},[78,79,80],"thead",{},[81,82,83,87,90],"tr",{},[84,85,86],"th",{},"Proportion",[84,88,89],{},"Role",[84,91,92],{},"UI Elements",[94,95,96,108,119],"tbody",{},[81,97,98,102,105],{},[99,100,101],"td",{},"60%",[99,103,104],{},"Dominant",[99,106,107],{},"Page background, hero backgrounds, body text on background (if dark UI)",[81,109,110,113,116],{},[99,111,112],{},"30%",[99,114,115],{},"Secondary",[99,117,118],{},"Navbar, footer, card backgrounds, sidebar, section backgrounds",[81,120,121,124,127],{},[99,122,123],{},"10%",[99,125,126],{},"Accent",[99,128,129],{},"Buttons, links, badges, icons, active states, form focus rings",[70,131,133],{"id":132},"example-saas-dashboard","Example: SaaS Dashboard",[15,135,136],{},"A modern SaaS dashboard might use:",[138,139,144],"pre",{"className":140,"code":141,"language":142,"meta":143,"style":143},"language-css shiki shiki-themes github-light github-dark",":root {\n  \u002F* 60% — Dominant: Off-white *\u002F\n  --color-bg: #F8FAFC;\n  \u002F* 30% — Secondary: Slate gray *\u002F\n  --color-surface: #334155;\n  \u002F* 10% — Accent: Blue *\u002F\n  --color-accent: #3B82F6;\n}\n","css","",[145,146,147,160,167,184,190,203,209,222],"code",{"__ignoreMap":143},[148,149,152,156],"span",{"class":150,"line":151},"line",1,[148,153,155],{"class":154},"sScJk",":root",[148,157,159],{"class":158},"sVt8B"," {\n",[148,161,163],{"class":150,"line":162},2,[148,164,166],{"class":165},"sJ8bj","  \u002F* 60% — Dominant: Off-white *\u002F\n",[148,168,170,174,177,181],{"class":150,"line":169},3,[148,171,173],{"class":172},"s4XuR","  --color-bg",[148,175,176],{"class":158},": ",[148,178,180],{"class":179},"sj4cs","#F8FAFC",[148,182,183],{"class":158},";\n",[148,185,187],{"class":150,"line":186},4,[148,188,189],{"class":165},"  \u002F* 30% — Secondary: Slate gray *\u002F\n",[148,191,193,196,198,201],{"class":150,"line":192},5,[148,194,195],{"class":172},"  --color-surface",[148,197,176],{"class":158},[148,199,200],{"class":179},"#334155",[148,202,183],{"class":158},[148,204,206],{"class":150,"line":205},6,[148,207,208],{"class":165},"  \u002F* 10% — Accent: Blue *\u002F\n",[148,210,212,215,217,220],{"class":150,"line":211},7,[148,213,214],{"class":172},"  --color-accent",[148,216,176],{"class":158},[148,218,219],{"class":179},"#3B82F6",[148,221,183],{"class":158},[148,223,225],{"class":150,"line":224},8,[148,226,227],{"class":158},"}\n",[15,229,230],{},"The page background fills most of the viewport (60%). The sidebar and navbar use the dark slate (30%). CTAs and active elements pop in blue (10%).",[70,232,234],{"id":233},"dark-mode-version","Dark Mode Version",[138,236,238],{"className":140,"code":237,"language":142,"meta":143,"style":143},":root.dark {\n  \u002F* 60% — Dominant: Dark navy *\u002F\n  --color-bg: #0F172A;\n  \u002F* 30% — Secondary: Darker surface *\u002F\n  --color-surface: #1E293B;\n  \u002F* 10% — Accent: Brighter blue for dark backgrounds *\u002F\n  --color-accent: #60A5FA;\n}\n",[145,239,240,247,252,263,268,279,284,295],{"__ignoreMap":143},[148,241,242,245],{"class":150,"line":151},[148,243,244],{"class":154},":root.dark",[148,246,159],{"class":158},[148,248,249],{"class":150,"line":162},[148,250,251],{"class":165},"  \u002F* 60% — Dominant: Dark navy *\u002F\n",[148,253,254,256,258,261],{"class":150,"line":169},[148,255,173],{"class":172},[148,257,176],{"class":158},[148,259,260],{"class":179},"#0F172A",[148,262,183],{"class":158},[148,264,265],{"class":150,"line":186},[148,266,267],{"class":165},"  \u002F* 30% — Secondary: Darker surface *\u002F\n",[148,269,270,272,274,277],{"class":150,"line":192},[148,271,195],{"class":172},[148,273,176],{"class":158},[148,275,276],{"class":179},"#1E293B",[148,278,183],{"class":158},[148,280,281],{"class":150,"line":205},[148,282,283],{"class":165},"  \u002F* 10% — Accent: Brighter blue for dark backgrounds *\u002F\n",[148,285,286,288,290,293],{"class":150,"line":211},[148,287,214],{"class":172},[148,289,176],{"class":158},[148,291,292],{"class":179},"#60A5FA",[148,294,183],{"class":158},[148,296,297],{"class":150,"line":224},[148,298,227],{"class":158},[10,300,302],{"id":301},"common-mistakes","Common Mistakes",[70,304,306],{"id":305},"mistake-1-counting-the-logo-as-accent","Mistake 1: Counting the Logo as Accent",[15,308,309],{},"Your brand logo might use a bold color, but if it sits in the navbar (secondary zone), it does not count toward the 10% accent allocation. The rule applies to visible area, not number of elements.",[70,311,313],{"id":312},"mistake-2-multiple-accent-colors","Mistake 2: Multiple Accent Colors",[15,315,316],{},"Some designs use blue for primary buttons and green for success states. That is fine — but both together still need to occupy roughly 10% of the visual area. If your accents dominate more than 10%, reduce the accent usage or merge accent roles.",[70,318,320],{"id":319},"mistake-3-ignoring-text-color","Mistake 3: Ignoring Text Color",[15,322,323],{},"Body text color is part of the ratio. On a light background, dark text might dominate far more than 10%. Consider your text color part of the dominant or secondary zone, not an extra layer.",[10,325,327],{"id":326},"adapting-the-rule","Adapting the Rule",[15,329,330],{},"The 60-30-10 ratio is a guideline, not a law. Common adaptations:",[19,332,333,339,345],{},[22,334,335,338],{},[25,336,337],{},"60-30-5-5",": Split the accent into two colors for primary actions vs. success\u002Ferror states",[22,340,341,344],{},[25,342,343],{},"70-20-10",": Push more toward minimalism with a very dominant neutral",[22,346,347,350],{},[25,348,349],{},"50-30-20",": For bold, brand-forward designs with more accent presence",[15,352,353],{},"The key is maintaining hierarchy — whatever ratio you choose, there should be a clear dominant, secondary, and accent distinction.",[10,355,357],{"id":356},"building-a-60-30-10-palette","Building a 60-30-10 Palette",[359,360,361,367,373],"ol",{},[22,362,363,366],{},[25,364,365],{},"Choose your dominant",": Start with a neutral — white, off-white, light gray, or a dark shade for dark mode",[22,368,369,372],{},[25,370,371],{},"Pick your secondary",": Select a color that contrasts with the dominant but does not compete with the accent — typically a muted or darker shade",[22,374,375,378],{},[25,376,377],{},"Select your accent",": This should be the most saturated color in your palette. It needs to stand out against both dominant and secondary",[15,380,381,382,387],{},"Use our ",[383,384,386],"a",{"href":385},"\u002Ftools\u002Fcolor-palette","Color Palette Generator"," to create harmonious palettes and see them applied to a sample layout.",[10,389,391],{"id":390},"using-css-custom-properties","Using CSS Custom Properties",[138,393,395],{"className":140,"code":394,"language":142,"meta":143,"style":143},":root {\n  --color-dominant: #F8FAFC;\n  --color-secondary: #334155;\n  --color-accent: #3B82F6;\n}\n\nbody {\n  background-color: var(--color-dominant);\n  color: var(--color-secondary);\n}\n\n.btn-primary {\n  background-color: var(--color-accent);\n  color: white;\n}\n",[145,396,397,403,414,425,435,439,445,453,472,489,494,499,507,523,535],{"__ignoreMap":143},[148,398,399,401],{"class":150,"line":151},[148,400,155],{"class":154},[148,402,159],{"class":158},[148,404,405,408,410,412],{"class":150,"line":162},[148,406,407],{"class":172},"  --color-dominant",[148,409,176],{"class":158},[148,411,180],{"class":179},[148,413,183],{"class":158},[148,415,416,419,421,423],{"class":150,"line":169},[148,417,418],{"class":172},"  --color-secondary",[148,420,176],{"class":158},[148,422,200],{"class":179},[148,424,183],{"class":158},[148,426,427,429,431,433],{"class":150,"line":186},[148,428,214],{"class":172},[148,430,176],{"class":158},[148,432,219],{"class":179},[148,434,183],{"class":158},[148,436,437],{"class":150,"line":192},[148,438,227],{"class":158},[148,440,441],{"class":150,"line":205},[148,442,444],{"emptyLinePlaceholder":443},true,"\n",[148,446,447,451],{"class":150,"line":211},[148,448,450],{"class":449},"s9eBZ","body",[148,452,159],{"class":158},[148,454,455,458,460,463,466,469],{"class":150,"line":224},[148,456,457],{"class":179},"  background-color",[148,459,176],{"class":158},[148,461,462],{"class":179},"var",[148,464,465],{"class":158},"(",[148,467,468],{"class":172},"--color-dominant",[148,470,471],{"class":158},");\n",[148,473,475,478,480,482,484,487],{"class":150,"line":474},9,[148,476,477],{"class":179},"  color",[148,479,176],{"class":158},[148,481,462],{"class":179},[148,483,465],{"class":158},[148,485,486],{"class":172},"--color-secondary",[148,488,471],{"class":158},[148,490,492],{"class":150,"line":491},10,[148,493,227],{"class":158},[148,495,497],{"class":150,"line":496},11,[148,498,444],{"emptyLinePlaceholder":443},[148,500,502,505],{"class":150,"line":501},12,[148,503,504],{"class":154},".btn-primary",[148,506,159],{"class":158},[148,508,510,512,514,516,518,521],{"class":150,"line":509},13,[148,511,457],{"class":179},[148,513,176],{"class":158},[148,515,462],{"class":179},[148,517,465],{"class":158},[148,519,520],{"class":172},"--color-accent",[148,522,471],{"class":158},[148,524,526,528,530,533],{"class":150,"line":525},14,[148,527,477],{"class":179},[148,529,176],{"class":158},[148,531,532],{"class":179},"white",[148,534,183],{"class":158},[148,536,538],{"class":150,"line":537},15,[148,539,227],{"class":158},[10,541,543],{"id":542},"key-takeaways","Key Takeaways",[19,545,546,549,552,555,558,561],{},[22,547,548],{},"The 60-30-10 rule divides color into dominant (60%), secondary (30%), and accent (10%) roles",[22,550,551],{},"Hierarchy guides the eye: accent draws attention, secondary provides structure, dominant sets the foundation",[22,553,554],{},"Map proportions to UI zones: backgrounds, surfaces\u002Fnavigation, and interactive elements",[22,556,557],{},"Text color counts toward the ratio — do not treat it as a separate layer",[22,559,560],{},"Adapt the ratio to your brand (60-30-5-5, 70-20-10) but always maintain clear hierarchy",[22,562,563],{},"Build palettes starting with the dominant neutral, then secondary, then the most saturated accent",[10,565,567],{"id":566},"try-it-yourself","Try It Yourself",[15,569,570,571,573],{},"Generate balanced palettes with proportion previews using our ",[383,572,386],{"href":385},". See how dominant, secondary, and accent colors look together before committing.",[10,575,577],{"id":576},"related-guides","Related Guides",[19,579,580,587],{},[22,581,582,586],{},[383,583,585],{"href":584},"\u002Fguides\u002Fcolor-palette-guide","Color Palette Guide"," — building harmonious palettes from scratch",[22,588,589,593],{},[383,590,592],{"href":591},"\u002Fguides\u002Faccessibility-first-color-palettes","Accessibility-First Color Palettes"," — ensuring contrast compliance at every proportion",[595,596,597],"style",{},"html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}",{"title":143,"searchDepth":162,"depth":162,"links":599},[600,601,602,607,612,613,614,615,616,617],{"id":12,"depth":162,"text":13},{"id":46,"depth":162,"text":47},{"id":67,"depth":162,"text":68,"children":603},[604,605,606],{"id":72,"depth":169,"text":73},{"id":132,"depth":169,"text":133},{"id":233,"depth":169,"text":234},{"id":301,"depth":162,"text":302,"children":608},[609,610,611],{"id":305,"depth":169,"text":306},{"id":312,"depth":169,"text":313},{"id":319,"depth":169,"text":320},{"id":326,"depth":162,"text":327},{"id":356,"depth":162,"text":357},{"id":390,"depth":162,"text":391},{"id":542,"depth":162,"text":543},{"id":566,"depth":162,"text":567},{"id":576,"depth":162,"text":577},"2026-05-28","Learn how to apply the 60-30-10 color rule to web design projects. Understand dominant, secondary, and accent color proportions for balanced palettes.","md",{"keywords":622,"immutable":443},[623,624],"color-palette","60-30-10-color-rule-web-design","\u002Fguides\u002F60-30-10-color-rule-web-design",{"title":5,"description":619},"guides\u002F60-30-10-color-rule-web-design","At48ni4h6zljwm6B8Oxe8beodd0DdicKgIXSY9RoXhc",1780401331195]