Színskála építése: egyetlen brand színből használható UI-rendszer
Egy terméknek ritkán elég egyetlen primary HEX. Állapotokhoz, hátterekhez és interakciókhoz világosabb és sötétebb lépcsők kellenek.
Röviden
A színskála ugyanannak a színcsaládnak több világossági és gyakran telítettségi lépcsője. A lépcsők szerepe fontosabb, mint az, hogy pontosan 50, 100 vagy 900 néven futnak.
Színskála közvetlen hue-választással
Ne csak nézd — manipuláld
220°
húzd a pontot
Miért kell több árnyalat ugyanabból a színből?
A primary gomb, hover állapot, halvány badge háttér, fókuszgyűrű és dekoratív felület ugyanahhoz a brandhez tartozhat, de nem használhatja ugyanazt az intenzitást. A skála következetes átmenetet ad ezek között.
A jó skála nem feltétlen lineáris
Az emberi fényességérzékelés nem tökéletesen lineáris, ezért azonos HSL lightness lépések nem mindig tűnnek azonos távolságúnak. Gyakorlatban vizuálisan és kontrasztméréssel is ellenőrizd a skálát.
A szám helyett a szerepet is tartsd fejben
- primary-subtle: halvány háttér
- primary: alap CTA vagy brand szín
- primary-hover: interakciós állapot
- primary-strong: sötétebb kiemelés
- on-primary: a primary felületen olvasható foreground
A jó színskála nem egyszerű lineáris világosítás
Ha egyetlen hue-ból 50–950 skálát készítesz, csábító minden lépcsőn ugyanannyival módosítani a lightness értéket. Ez azonban gyakran egyenetlen vizuális lépéseket ad. A nagyon világos tartományban kisebb változás is észrevehető lehet, míg sötétebb részeken más elosztás kellhet.
Egy használható skálát ezért a konkrét szerepek felől érdemes finomítani: melyik legyen háttér, border, hover, primary, primary-hover és erős szövegszín. A számozás csak rendszer, nem cél.
A skála akkor hasznos, ha tokenekké válik
A fejlesztésben a skálák akkor adnak valódi értéket, amikor a komponensek nem véletlen HEX kódokra, hanem stabil tokenekre hivatkoznak. Így egy későbbi brand-frissítésnél nem több száz komponens színét kell kézzel újrahangolni.
Még jobb, ha a nyers skála fölött szemantikus tokenréteg is van. A `blue-600` megmondja, melyik árnyalatról van szó; a `primary` azt mondja meg, mire használod.
Ha több kész palettán szeretnéd megfigyelni az árnyalatlépcsőket, böngéssz a ByBence színpaletták között.
A skála szélei nem csak ugyanannak a színnek világosabb változatai
Nagyon világos és nagyon sötét lépcsőknél a saturation és akár a hue finom módosítása is segíthet természetesebb vizuális eredményt adni. Egyszerű HSL-skálában a világos lépcsők néha túl szürkék, a sötétek pedig túl telítettek vagy koszosak lehetnek.
Ezért a professzionális skálák gyakran kézi vagy perceptuális finomhangolást kapnak. A cél nem matematikai szabályosság, hanem hogy a 50, 100, 500 vagy 900 jellegű lépcsők a saját szerepükben vizuálisan kiszámíthatóak legyenek.
Építs kontrasztmátrixot a fontos párokból
Egy színskála önmagában még nem mondja meg, melyik lépcső jó szöveghez vagy gombhoz. Hasznos lehet előre ellenőrizni a gyakori párokat: 50-es háttér + 800-as szöveg, 600-as primary + fehér felirat, 700-as hover + fehér felirat és így tovább.
Ezzel a skála nem csak esztétikai választék lesz, hanem validált komponens-alapanyag. Ha egy kritikus pár nem teljesíti a kontrasztot, még a design system bevezetése előtt módosíthatod a megfelelő lépcsőt.
A szükséges küszöböket a WCAG kontraszt leckében tudod ellenőrizni.
Nyers skála fölé építs szemantikus réteget
A skála lehet `blue-50`–`blue-950`, de a komponenseknek nem feltétlenül kell közvetlenül ezeket használniuk. A semantic réteg olyan neveket adhat, mint `primary`, `primary-hover`, `focus-ring` vagy `link`.
Ez megakadályozza, hogy a kód tele legyen olyan implicit szabályokkal, mint 'minden primary gomb blue-600'. Ha később a brand lila lesz, a semantic mapping változik, a komponensek pedig érintetlenek maradhatnak.
Gyakori kérdések
Kell 10 vagy 11 árnyalat minden színből?
Nem. Annyi lépcső kell, amennyit a termék ténylegesen használ. A túl sok token ugyanúgy növeli a komplexitást, mint a túl kevés.
Kell minden projekthez 50–950 közötti teljes színskála?
Nem. Csak annyi lépcsőt érdemes fenntartani, amennyinek valódi szerepe van. Kis oldalaknál kevesebb árnyalat is elég, nagy design systemnél viszont a részletes skála következetességet adhat.
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.