Hue, saturation, lightness: így változik egy szín karaktere
Három külön tengelyen értsd meg a színeket: mi maga az árnyalat, mennyire intenzív, és mennyire világos vagy sötét.
Röviden
A hue az árnyalat helye a színkörön, a saturation a szín intenzitása, a lightness pedig a világos-sötét tengelyen elfoglalt helye.
Hue közvetlenül a színkörön, saturation és lightness külön
Ne csak nézd — manipuláld
220°
húzd a pontot
Saturation
72%
Lightness
52%
Hue – milyen színről beszélünk?
A hue egy 0–360 fokos körön jelöli az árnyalatot. A 0° környéke vörös, 120° zöld, 240° kék. Ha csak ezt mozgatod, a színcsalád változik, miközben a telítettség és világosság azonos marad.
Saturation – mennyire intenzív?
Alacsony telítettségnél a szín szürkés, visszafogott; magas telítettségnél élénk és erősen színes. Sok modern UI azért hat nyugodtnak, mert nagy felületeken alacsonyabb telítettséget, fókuszpontokon magasabbat használ.
Lightness – mennyi fényesség érzetet kap?
A HSL lightness 0%-nál fekete, 100%-nál fehér. 50% környékén jelenik meg az árnyalat legerősebb alapváltozata. A világosság módosítása különösen fontos színskálák és hover/active állapotok készítésénél.
A három tengely együtt ad használható rendszert
Egy jó palettában nem véletlen HEX kódok sorakoznak. Gyakran azonos vagy rokon hue értékekből, tudatos saturation és lightness lépcsőkkel épül fel a rendszer.
Ha kész árnyalatokon szeretnéd megfigyelni, mennyit számít a hue és a világosság, nyisd meg a színek és árnyalatok gyűjteményét.
Ha egy színt csak 'szebb kékre' próbálsz állítani, valójában általában e három tengely valamelyikét keresed.
Fontos korlát: a HSL nem perceptuálisan egyenletes
A HSL kiváló tanulási és gyakorlati modell, de nem jelenti azt, hogy két azonos lightness értékű, eltérő hue-jú szín az emberi szem számára ugyanannyira világosnak fog tűnni. Egy telített sárga és egy telített kék azonos HSL lightness mellett nagyon eltérő vizuális fényességet adhat.
Ezért színskálát nem érdemes kizárólag úgy készíteni, hogy minden lépcsőn ugyanannyival növeled vagy csökkented a HSL lightness értéket. Az eredményt mindig vizuálisan és kontraszt szempontból is ellenőrizni kell.
HSL gondolkodás UI-állapotoknál
Tegyük fel, hogy van egy elsődleges gombod. Hover állapotban szeretnéd egy kicsit sötétebbé tenni, disabled állapotban pedig visszafogni. HSL-ben könnyű ugyanahhoz a hue-hoz ragaszkodni, miközben a telítettségen és világosságon változtatsz.
A lényeg azonban nem az, hogy minden hover pontosan -6% lightness legyen, hanem hogy a változás észlelhető, következetes és kontraszt szempontból továbbra is megfelelő maradjon.
Ha ebből teljes, több lépcsős palettát szeretnél építeni, nézd meg a színpaletták gyűjteményét is, majd hasonlítsd össze, hogyan változnak az árnyalatok egy kész rendszerben.
Miért változik furcsán a hue nagyon alacsony telítettségnél?
Ha a saturation közel 0%, a szín egyre inkább szürkéhez közelít. Ilyenkor a hue numerikusan továbbra is létezhet, de vizuálisan alig érzékelhető. Ez jó példa arra, hogy a három HSL tengely nem egymástól teljesen független emberi benyomást ír le.
Design tokeneknél ezért a neutrális skálát gyakran nem egyszerűen egy brand hue 0–5%-os saturation változataiból építik. Egy enyhén színezett neutral működhet, de tudatos döntésnek kell lennie, különösen ha nagy felületeken használod.
A lightness módosítása nem egyenlő a kontraszt javításával
Ha egy szöveg túl halvány, intuitív megoldás lehet a HSL lightness csökkentése. Ez gyakran segít világos háttéren, de a tényleges kontrasztarányt a relatív luminancia határozza meg, nem maga a HSL lightness szám. Két eltérő hue ugyanazon lightness értéken eltérő kontrasztot adhat.
Ezért a HSL jó szerkesztési felület, a WCAG-ellenőrzés pedig külön validációs lépés. A kettő nem helyettesíti egymást.
A tényleges megfelelési küszöböket a kontraszt és WCAG leckében tudod élő színpárokon ellenőrizni.
Primary, hover és active: ne vakon használj fix százalékokat
Gyakori recept, hogy a hover állapot legyen például 5–10%-kal sötétebb. Ez gyors prototípusnál működhet, de nem univerzális szabály. Nagyon világos vagy nagyon sötét alapszínnél ugyanaz a numerikus lépés egészen más vizuális különbséget eredményezhet.
Jobb módszer, ha előbb meghatározod, milyen állapotkülönbséget szeretnél érzékeltetni, majd úgy hangolod a skálát, hogy a változás egyértelmű legyen, a szöveg kontrasztja pedig minden állapotban megmaradjon.
Gyakori kérdések
A brightness és lightness ugyanaz?
Nem feltétlenül. A HSL lightness egy matematikai modell része, míg a perceptuális fényesség attól is függ, hogyan érzékeli az ember a különböző hullámhosszakat.
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.