Triadikus és split-komplementer színek: több accent kontrolláltan
Ha kettőnél több karakteres árnyalatot szeretnél, a szabályos hue-távolságok segíthetnek úgy bővíteni a palettát, hogy ne essen szét.
Röviden
Triadikus harmóniánál három árnyalat nagyjából 120 fokra van egymástól. Split-komplementernél egy alapszínhez a komplementer két szomszédját választod, így erős, de valamivel lágyabb feszültséget kapsz.
Triadikus harmónia – három pont 120°-onként
Ne csak nézd — manipuláld
220°
húzd a pontot
Mozgasd az egész harmóniát a körön.
A pontok egymáshoz viszonyított távolsága rögzített marad. Így azonnal látszik, hogy a harmónia nem konkrét HEX kódokhoz, hanem hue-k közötti kapcsolathoz kötődik.
Triád: három egyenletesen elosztott árnyalat
A triadikus rendszer több vizuális karaktert enged, de ha mindhárom szín maximális telítettséggel és azonos arányban jelenik meg, könnyen játékossá vagy kaotikussá válik.
Split-komplementer: kisebb vizuális feszültség
Ahelyett, hogy a komplementer árnyalatot használnád, annak két oldaláról választasz. Így megmarad az elkülönülés, de ritkábban ütközik annyira agresszívan a főszínnel.
Adj szerepet a színeknek
A paletta nem attól lesz rendszer, hogy a színkörön szabályos. Nevezd ki, melyik primary, melyik secondary, melyik információs vagy dekoratív szerepű.
Három szín esetén még fontosabb a szerepkiosztás, mint maga a harmónia.
Három hue nem jelent három egyforma hangsúlyt
A triadikus rendszer három, nagyjából 120 fokra lévő hue-t ad. A geometriai egyensúly azonban nem azt jelenti, hogy a felületet három egyforma színmezőre kell osztani. Digitális termékben általában jobb, ha van egy főszín, a másik kettő pedig ritkább szerepet kap.
A három árnyalat közül valamelyik lehet például primary, egy másik marketing- vagy illusztrációs accent, a harmadik pedig csak különleges állapotokban jelenik meg. Így a rendszer változatos marad anélkül, hogy szétesne.
Triadikus paletta tesztelése
- Kapcsold ki fejben a hue-t: van-e világossági hierarchia a három szín között?
- Egyértelmű-e, melyik a fő CTA színe?
- A három szín neutrális felületeken is működik, vagy csak egymás mellett látványos?
- Státuszszínekkel együtt sem lesz túl sok vizuális jel?
A palettaoldalakon többféle háromszínű kombinációt is összevethetsz, mielőtt saját rendszert építesz.
Három erős hue mellett a saturation szabályozza a hangerőt
A triadikus geometria eleve nagy hue-távolságot hoz létre. Ha mindhárom színt magas telítettséggel és hasonló világossággal használod, a paletta könnyen játékos vagy túl intenzív karaktert kap. Ez bizonyos márkáknál kívánatos, másoknál zavaró.
Gyakori megoldás, hogy csak a primary marad erősen telített, a másik két hue visszafogottabb vagy világosabb változatként jelenik meg. Így a triadikus kapcsolat megmarad, de a vizuális hangerő nem lesz azonos.
Figyelj a szemantikus ütközésekre
Ha a triád egyik színe zöld, egy másik vöröses, könnyen összeütközhet a success és danger státuszok megszokott jelölésével. Ez nem tiltás, de a rendszerben világosan el kell választani a brand/dekorációs és a szemantikus használatot.
Például egy brand-vörös primary gomb mellett a hibaállapotnak lehet külön ikonja, szövege és saját sötétebb tokenje. A színnév önmagában nem elég a szerep kommunikálásához.
Mobilon hamarabb túl soknak érződik
Kisebb kijelzőn kevesebb komponens látszik egyszerre, ezért ugyanaz a három erős szín sűrűbbnek tűnhet, mint desktopon. A reszponzív design nem csak elrendezés: érdemes a színek gyakoriságát és felületi arányát is ellenőrizni.
Ha desktopon három külön színes kártya egymás mellett jól működik, mobilon egymás alá kerülve hosszú, intenzív színfolyamot alkothatnak. Ilyenkor neutral surface vagy ritkább accent használat javíthatja az egyensúlyt.
Az arányok hatását a 60–30–10 szabály interaktív leckéjében tudod szabadon széthúzni.
Gyakori kérdések
A triadikus paletta jó vállalati weboldalhoz?
Lehet, de nem kell mindhárom árnyalatot erősen használni. Visszafogottabb saturationnel és világos szerepkiosztással komoly felületen is működhet.
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.