60–30–10 színszabály: hasznos arány, nem kötelező recept
A klasszikus 60–30–10 arány a színek hozzávetőleges vizuális jelenlétéről szól: mennyi legyen domináns, mennyi támogató, és mennyi maradjon ritka accent. Nem a komponensek méretét írja elő.
Röviden
A 60–30–10 szabály a paletta hozzávetőleges vizuális használati arányát írja le: körülbelül 60% domináns szín, 30% támogató szín és 10% accent. Nem azt jelenti, hogy a layout dobozait 60/30/10 méretűre kell osztani.
Válts az előre megadott arányok között, és hasonlítsd össze a hatást
Ne csak nézd — manipuláld
Színhasználati arány
60 / 30 / 10
60% domináns
30% támogató
10% accent
Ugyanaz a felület, más színhasználati arány
A form mérete, szerkezete és spacingje nem változik. Csak azt módosítjuk, milyen gyakran találkozol az egyes színekkel.
FIÓK BEÁLLÍTÁSA
Profil létrehozása
Add meg az alapadataidat a folytatáshoz.
Név
Balogh Bence
hello@example.com
Cég
ByBence
Érdeklődési terület
Design
SEO
Fejlesztés
Mégsem
Profil létrehozása
Kiegyensúlyozott színhasználat
A domináns szín adja a felület vizuális alapját, a támogató szín elkülöníti a másodlagos felületeket, az accent pedig ritkán jelenik meg. Emiatt az accent valóban képes figyelmet irányítani.
A vizualizáció szemléltetés, nem pixelpontos mérés. A 60–30–10 szabály a színek hozzávetőleges vizuális jelenlétét írja le, nem azt, hogy minden weboldalon pontosan ki kell mérni a színes pixelek arányát.
A szabály valójában dominanciáról szól
A 60% a teljes vizuális jelenlét domináns részét jelenti: tipikusan háttér, nagy surface-ek és neutrális alapok adják. A 30% rendszeresen visszatérő támogató szín, a 10% pedig ritkább accent. Nem a komponensek szélességét kell ezekre a százalékokra állítani, hanem azt figyelni, az összképben mennyit találkozik a felhasználó az egyes színekkel.
Weben ne méricskéld pixelenként
Egy hosszú landing page, dashboard vagy mobilapp tényleges pixelaránya viewport és tartalom szerint folyamatosan változik. Használd mentális modellként arra, hogy melyik szín milyen gyakran és mekkora összfelületen jelenik meg. Ugyanaz a layout maradhat teljesen változatlan, miközben a színhasználati arány drasztikusan megváltozik.
Gyakori hiba: túl sok erős szín
Ha a navbar, gombok, ikonok, kártyák és dekorációk külön erős színeket kapnak, a vizuális hierarchia szétesik. Az aránygondolkodás segít visszafogni a zajt.
A 60–30–10 nem matematikai törvény
A szabály tervezési heurisztika: azt írja le, hogy a teljes felület vizuális színhasználatában nagyjából milyen arányban jelenjen meg domináns, támogató és accent szín. Nem azt jelenti, hogy a layout dobozait 60%, 30% és 10% szélességűre vagy magasságúra kell méretezned.
Egy minimalista landing oldal lehet 85–10–5 jellegű, míg egy adatvizualizációs dashboard ennél sokkal összetettebb színelosztást igényelhet. A fontos kérdés az, hogy ugyanazon komponensstruktúrán belül melyik szín mennyi felületen és milyen gyakorisággal jelenik meg, és ettől megmarad-e a világos dominancia és ritka fókusz.
A jó arány nem attól jó, hogy 60–30–10, hanem attól, hogy a vizuális hierarchiát szolgálja.
Mit figyelj, amikor eltérsz az aránytól?
- Ha a három szín közel azonos arányú, versengenek-e a figyelemért?
- Ha az accent túl nagy területet kap, elveszíti-e a kiemelő szerepét?
- Ha a domináns szín túl nagy, marad-e elég rétegkülönbség a komponensek között?
- A színek területe mellett a telítettség és kontraszt vizuális súlyát is figyelembe veszed-e?
Különböző színelosztású kombinációkat a színpaletta-oldalakon is összevethetsz, de mindig teljes UI-ban dönts.
A felületi százalék és a vizuális súly nem ugyanaz
Egy 5%-nyi neon narancs felület vizuálisan erősebb lehet, mint egy 25%-nyi halvány kék surface. A 60–30–10 szabály ezért nem értelmezhető pusztán pixelterületként. Telítettség, kontraszt, pozíció, méret és ismétlődés együtt adják a tényleges vizuális súlyt.
Az interaktív példában a százalékok jó gondolkodási segédletet adnak, de egy valódi auditnál azt kérdezd: melyik réteg dominál a figyelemben, nem csak azt, hány pixelt foglal el.
Nem kell az egész weboldalt egyetlen 60–30–10 képlettel mérni
A hero, a pricing blokk és a dashboard külön-külön is rendelkezhet saját vizuális egyensúllyal. Egy sötét hero lehet szinte teljesen brand-színű, miközben az oldal többi része neutrális. Oldalszinten mégis kiegyensúlyozott lehet az összhatás.
Érdemes ezért több léptékben vizsgálni az arányt: komponens, szekció, teljes oldal és akár teljes termék. A szabály akkor segít, ha észreveszed vele a versengő dominanciát.
Mikor ne erőltesd a 60–30–10 szabályt?
Adatvizualizációban, komplex dashboardban, szerkesztőfelületen vagy erősen tartalomvezérelt oldalon más célok fontosabbak lehetnek. Egy chartnak például több kategóriaszínre van szüksége, míg egy szöveges tudásbázis szinte teljesen neutrális is lehet.
Ilyenkor használj más döntési keretet: szemantikus szerepek, információs hierarchia, kontraszt és hozzáférhetőség. A heurisztika akkor jó, ha egyszerűsíti a döntést; ha torzítja a termék funkcióját, engedd el.
A szerepalapú alternatívát a színrendszer leckében tudod felépíteni.
Gyakori kérdések
Muszáj pontosan 60%, 30% és 10% legyen?
Nem. A 60–30–10 hozzávetőleges vizuális használati arány. A hasznos része a domináns, támogató és ritka accent szerep; nem kell pixelenként kimérni, és a komponensek méretét sem ez határozza meg.
Rossz egy design, ha nem 60–30–10 arányt használ?
Nem. Ez egy heurisztika, nem kötelező szabvány. Akkor hasznos, ha segít dominanciát és fókuszt létrehozni; indokolt esetben teljesen rendben van eltérni tőle.
Gyakorold tovább
Használd a saját szín- és palettaeszközöket
Az elmélet akkor rögzül, amikor konkrét árnyalatokon és kombinációkon is kipróbálod. Ezek a kapcsolódó ByBence oldalak ugyanennek a tananyagnak a gyakorlati folytatásai.
Források és további olvasnivaló
A webes színmodelleknél és accessibility részeknél szabványokra és elsődleges dokumentációra támaszkodj. A konkrét palettadöntéseket pedig mindig a saját felületeden, valódi komponenseken teszteld.