Kortversionen
- 60-30-10-regeln säger att en balanserad design använder en dominant färg på ungefär 60 % av ytan, en sekundär färg på ungefär 30 % och en accentfärg på ungefär 10 %.
- Regeln kommer från inredning, där väggar, möbler och accessoarer av sig själva delar upp sig i just de tre rollerna.
- På skärmar är de 60 % oftast bakgrunden, de 30 % bär paneler, former eller text, och de 10 % går till det enda du vill att folk ska lägga märke till eller trycka på.
- I en gradient avgör regeln hur stor del av ytan varje färg får, och därför bör accenten synas på en liten yta och inte som ett helt band.
- Siffrorna är en startpunkt: neutrala toner kan räknas som de 60 %, och många starka designer ligger närmare 70-25-5 eller 90-10.
På den här sidan
60-30-10-regeln är en enkel tumregel för färgproportioner: använd en dominant färg på ungefär 60 % av en design, en sekundär färg på ungefär 30 % och en accent på de sista 10 %. Den kommer från inredning, där väggar, möbler och accessoarer av sig själva får de rollerna. Den fungerar lika bra för inlägg i sociala medier, bildspel, webbplatser och varumärkespaletter, eftersom den hindrar färgerna från att tävla om samma uppmärksamhet.
linear-gradient(90deg, #f3efe6 0% 60%, #1f3a5f 60% 90%, #e76f51 90% 100%)Vad varje andel gör
De tre andelarna har olika uppgifter. De 60 % sätter stämningen och är oftast lugna: en bakgrund, ett underlag, en vägg. De 30 % ger struktur och kontrast och bär paneler, former eller stor text. De 10 % är dit blicken går först, så de hör hemma på det allra viktigaste: en knapp, ett pris, ett datum, en logotyp.
| Andel | Roll | Typisk färg | Var den används |
|---|---|---|---|
| 60 % | Dominant | Stilla: en neutral ton, en blek nyans eller en djup mörk | Bakgrunder, stora ytor, sidans underlag |
| 30 % | Sekundär | Kontrasterande men inte högljudd | Paneler, kort, stor text, bildytor |
| 10 % | Accent | Den mest mättade färgen du har | Knappar, priser, nyckelord, små former |
60-30-10-regeln i ett inlägg i sociala medier
I ett inlägg är den dominanta färgen bakgrunden, den sekundära är rubriken eller en form bakom den, och accenten är en liten detalj som ett datum, ett pris eller ett enda understruket ord. Det vanliga misstaget är att ge accenten till hela rubriken. Då skriker 30 % av inlägget, och ingenting sticker ut eftersom allt gör det.
Dominant yta, sekundär text och accenten sparad till datumraden.
Samma proportioner på en bred bild. Andelarna håller även när formatet ändras.
Använd regeln i bildspel och på webbplatser
I bildspel sätter du de 60 % en gång, som bakgrund på varje bild, och behåller den. Använd de 30 % till rubriker, diagram och bildramar. Spara de 10 % till den enda siffra eller det enda ord per bild som publiken måste komma ihåg. Bakgrunder till presentationer går djupare in på underlag som inte konkurrerar med innehållet.
På en webbplats är sidans bakgrund och de stora sektionerna de 60 %, navigering, kort, sidfot och brödtext är de 30 %, och de 10 % går till knappar och länkar. Om din primära knapp har samma färg som dina rubriker finns det ingen accent kvar som kan leda besökaren.
:root {
--dominant: #f3efe6; /* 60%: page and section backgrounds */
--secondary: #1f3a5f; /* 30%: headings, cards, navigation, footer */
--accent: #e76f51; /* 10%: buttons, links, key numbers */
}
body { background: var(--dominant); color: var(--secondary); }
.card { background: var(--secondary); color: var(--dominant); }
.button { background: var(--accent); color: #1a0f0b; }För ett varumärke skriver du in andelarna i varumärkets stilguide bredvid hexkoderna. En palett utan proportioner bjuder in varje designer att välja sin favoritfärg till bakgrunden, och inom en månad ser varumärket ut som tre olika varumärken.
60-30-10-regeln i en gradient
Gradienter bryter lätt mot proportionerna, eftersom en jämn blandning ger varje färg samma andel. Använd regeln genom att flytta färgstoppen: låt den dominanta färgen hålla större delen av ytan, tona över i den sekundära under ungefär en tredjedel och låt accenten komma in först vid en kant eller som ett litet sken.
När du kan böja eller bryta regeln
Bryt den när
- Du jobbar i en enda nyans: ett monokromt färgschema ligger närmare 60-30-10 i ljushet än i nyans
- Designen mest är text på en neutral yta, där 90-10 blir renare
- Ett foto står för färgen och din palett bara ramar in det
- Varumärkesfärgen måste dominera, som en affisch helt i varumärkets röda
Behåll den när
- Färgerna börjar tävla och ingenting sticker ut
- Ett team delar en palett och behöver en regel att följa
- Du har tre eller fler starka färger att balansera
- Knappar och viktiga siffror försvinner i bilden
Siffrorna är ungefärliga. Vitt utrymme räknas också. Neutrala toner som off-white, koksgrått och sand kan vara dina 60 %, medan två verkliga färger delar på resten. Det som räknas är ordningen: en tydlig ledare, ett stöd, en sällsynt accent. För själva färgvalet, se så väljer du varumärkesfärger och grunderna i färglära.
Vanliga frågor
Vad är 60-30-10-regeln?
Det är en riktlinje för färgproportioner: ungefär 60 % av en design i en dominant färg, 30 % i en sekundär färg och 10 % i en accentfärg.
Var kommer 60-30-10-regeln ifrån?
Det är en gammal tumregel inom inredning, där väggar, möbler och accessoarer av sig själva får de tre andelarna.
Räknas vitt i 60-30-10-regeln?
Ja. Neutrala toner som vitt, off-white, sand eller koksgrått utgör ofta de dominanta 60 %, så att de 30 % och 10 % kan gå till riktiga färger.
Vilken färg ska accenten på 10 % ha?
Oftast din mest mättade färg, använd på det enda du vill ska synas först, som en knapp, ett pris eller ett datum.
Hur använder jag 60-30-10-regeln i en gradient?
Flytta färgstoppen så att den dominanta färgen täcker större delen av ytan, den sekundära tonar över under ungefär en tredjedel och accenten bara syns i ett litet område eller vid en kant.
Skriven av Gradiently
Teamet bakom Gradiently, ett designverktyg byggt kring Marks: levande gradienter som får allt du gör att kännas som ditt.
Se vår profil
