Az RGB nem elég: HSL, CMYK és OKLCH színjelölések

Az előző cikkben, Hogyan állítja elő a számítógép a színeket: RGB, HEX és a bináris számok, láttuk, hogy egy szín csupán három szám — piros, zöld, kék, mindegyik 0–255 között. A képernyők ezekkel a számokkal tökéletesen működnek. De amint egy ember dolgozni kezd a színekkel, az RGB gyorsan kényelmetlenné válik.

Az RGB kényelmes, de nem intuitív

„Kicsit világosabb piros.” Hogyan csináljuk ezt RGB-ben? Mindhárom csatornát egyszerre kell egy kicsit emelni. „Csökkentsük le csak a telítettséget” — RGB-ből nézve nem egyértelmű, melyik értéket kell módosítani. „Nyomtassuk ki ugyanezt a színt papírra” — RGB-vel ez egyáltalán nem kivitelezhető.

Ezekre a problémákra válaszul születtek a többi színjelölési rendszerek.

HSL — ahogyan az ember gondolkodik

A HSL a színt árnyalat · telítettség · világosság szerint három összetevőre bontja. A hsl(14, 100%, 60%) ugyanaz a szín, mint a #FF5733, de az egyes értékek jelentése sokkal egyértelműbb.

Ha az RGB a számítógép nyelve — a HSL a tervező nyelve. Ugyanaz a szín, de most abból a szempontból közelítjük meg, mit szeretnénk megváltoztatni.

Hue — az árnyalat egy 360 fokos kör

Az árnyalat körkörösen változik, akár az óramutató. 0°-tól 360°-ig terjed. A 0° és a 360° ugyanaz a piros.

Saturation — a telítettség a szín erőssége

Ugyanaz az árnyalat, de ha csökkentjük a telítettséget, fokozatosan szürke lesz.

Lightness — a világosság feketétől fehérig

Ha L = 0%, az eredmény mindig fekete; ha L = 100%, akkor mindig fehér. Az 50% a szín „eredeti” világossága.

A HSL igazi ereje — paletta készítése

Ha az árnyalatot (Hue) állandón tartjuk, és csak az L értéket változtatjuk, harmonikus színskálát kapunk. Ugyanezt RGB-ben 9 értéket kellene külön-külön kézzel kiszámolni, HSL-ben elég az L-t 12%-tól 92%-ig léptetni.

Mindkét fenti paletta egyetlen sorban előállítható.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... csak az L-t kell 10-enként változtatni */
}

Ez az a pont, ahol a HSL igazán ragyog, amikor dizájnrendszert építünk.

CMYK — a tinta nyelve

Ha nem képernyőre, hanem papírra kerül a szín, teljesen más rendszerre van szükség. A CMYK a nyomdák által használt négy tinta arányát írja le.

Miért „K” a fekete jelölése „B” helyett? Mert a „B” összetéveszthető lenne a Blue-val. A „K” a nyomdai „Key plate” kifejezésből ered — ez az a lemez, amelyhez a többi tintát igazítják.

A fény összeadva világosodik, a tinta összeadva sötétedik

Az RGB és a CMYK legfőbb különbsége a keverési elv.

A piros tinta azért látszik pirosnak, mert elnyeli a többi fényt, és csak a pirosat veri vissza. A tinta feladata a fény elvétele. Ezért minél több tintát keverünk, annál sötétebb lesz a szín. Elméletileg a CMY három összetevő keveréke feketét adna, de a valóságban zavaros barnát kapunk. Ezért van külön fekete tinta (K).

Mikor használjuk a CMYK-t?

Ha csak képernyőre tervezünk, szinte soha nem találkozunk CMYK-val. Csak nyomtatáskor kerül elő.

• Nyomdának átadott fájloknál — névjegyek, plakátok, könyvek, csomagolás. Ha RGB fájlt kap a nyomda, az konvertálja CMYK-ra.
• Photoshop / Illustrator nyomtatási munkáknál — a színmódot már az elején CMYK-ra állítjuk.
• Márka arculati kézikönyvben — a képernyős HEX és a nyomtatási CMYK értékek egymás mellett szerepelnek, hogy a márka színe mindkét médiumban hasonlóan nézzen ki.

Miért tér el a képernyő és a nyomat színe — Gamut

A képernyő által megjeleníthető színtartomány (RGB gamut) és a tintával nyomtatható tartomány (CMYK gamut) nem egyezik meg. Az élénk neonrózsaszín a képernyőn ragyogó, de nyomtatva halvány lesz — tintával egyszerűen nem hozható létre.

Ezért a nyomtatási tervező már a munka elején csak a CMYK tartományba eső színeket választja. Az RGB-ben készült tervet közvetlenül kinyomtatva a színek fakóbbnak tűnnek.

Így írjuk fel a CMYK értékeket

Minden tintából megadjuk, hogy hány százalékot kell felvinni. A 0% azt jelenti, hogy egyáltalán nem kerül rá, a 100% a teljes fedettség.

Ha a feketéhez csak K 100%-ot használunk, az eredmény szürkébe hajló, tompa fekete. Ezért a nyomdák CMY alapozást adnak hozzá, hogy mélyebb feketét kapjanak.

OKLCH — az ember koordinátái

A 2020-as évek elején vált széles körben elterjedtté ez a színmodell. Egyetlen kulcsszó jellemzi — „az emberi szemnek természetesen.”

A három koordináta nevében hasonlít a HSL-re:

• L — Lightness (világosság, 0–1)
• C — Chroma (telítettség, 0–kb. 0,4)
• H — Hue (árnyalat, 0–360°)

A HSL-nek azonban van egy rejtett problémája. Ugyanaz az L = 50% érték, mégis a különböző szín esetén a szemünk teljesen eltérő világosságot érzékel. Nézzük meg egymás mellett.

Egy mondatban összefoglalva — az RGB és a HSL a gép koordinátái. Az OKLCH az ember koordinátái.

L · C · H, az egyes koordináták szerepe

Nézzük meg, mi történik, ha ugyanazon a színen egyszerre csak egy koordinátát változtatunk.

Mire használható?

• Egyenletes világosságú paletta — ha 8 kategóriaszínt azonos érzékelt fényességre szeretnénk hozni
• Sötét/világos mód automatikus átváltása — az L értéket megfordítva természetes sötét témát kapunk
• Akadálymentesség — a szöveg és a háttér kontrasztja pontosan előrejelezhető
• Átmenetek (gradientek) — nincs szürkés sáv a közepén, a fokozatok természetesek

A CSS Color Level 4-től hivatalos, és a modern böngészőkben azonnal használható.

.btn { background: oklch(67% 0.18 30); }       /* narancssárga */
.btn:hover { background: oklch(60% 0.18 30); } /* csak L csökkent 7-tel → pontosan annyival sötétedik */

Mit mikor használjunk?

A legtöbb digitális munkához RGB/HEX elegendő. Palettakészítéskor érdemes HSL-ben gondolkodni, OKLCH pedig sötét/világos módos dizájnnál jelent nagy segítséget.

Hogyan kezeli a fns a színeket?

Ha tudjuk, hogy a szín szám, a következő lépés az, hogy a leggyakrabban használt színek mindig kéznél legyenek. A fns a szín kiemelését, mentését és újrafelhasználását egyetlen billentyű mögé zárja.

Eyedropper — szín a képernyő bármely pontjáról — ⌘+Shift+K

Az Eyedropper pontosan azt a színt veszi fel, amelyik pixelen a kurzor áll. Olyan, mintha a Figma/Photoshop belső pipettáját kivinnénk az egész rendszerre.

A ⌘+Shift+K lenyomásával bárhol megjelenik a fns Eyedropper. Tervfájl egy pixele, fotó egy területe, másik alkalmazás háttérszíne — mozgassa oda az egeret, kattintson, és a szín pontos értékét megkapja.

• Minden kattintáskor automatikusan a vágólapra kerül. Külön „másolás” műveletre nincs szükség.
• Az Eyedropper widgetben kiválasztható, hogy RGB / HEX / HSL / CMYK / OKLCH formátumban kerüljön a vágólapra.
• A felvett szín vizuális előnézete és a legközelebbi rendszerszín is megjelenik.

Eyedropper → automatikus vágólapra mentés → visszakeresés a vágólap-előzmények közül — a folyamat megszakítás nélkül gördülékeny. Nincs szükség külön ablakra, mint a Mac beépített Digital Color Meterénél, és nem kell minden alkalommal másolási billentyűparancsot nyomni.

A vágólap automatikusan felismeri a színeket

A fns vágólap-előzmények automatikusan érzékelik, ha a másolt szöveg színkód. A formátumtól függetlenül felismeri.

Ha a mentett színeket visszakeressük az előzményekből, puszta szövegből nehéz visszaemlékezni, melyik szín volt melyik. A fns minden elem mellé kis színes chipet jelenít meg, így egyetlen pillantással beazonosítható.

Csak a színek megjelenítése

Egyetlen billentyűvel csak a színkódokra szűrhetők a vágólap-előzmények. Ha tervezés közben csak a legutóbb használt színekre van szükség, nem kell szövegek, URL-ek és kódrészletek között keresgélni.

• Ugyanabban a pickerben a color: szűrőkulcsszóval → csak a szín elemek látszanak
• Szín neve szerint keresés — a „blue”, „red” szavakra csak az adott árnyalatcsalád jelenik meg
• Hasonló színek vizuálisan csoportosítva rendeződnek

Egy szín más formátumban

Ugyanaz a szín más jelölésre konvertálva is kinyerhető. Ha Figmából másolt #FF5733-t CSS-ben rgb(...) formátumban szeretnénk beilleszteni, elég a fns vágólap-pickerben kijelölni az elemet, és egy billentyűparanccsal automatikusan átkonvertálódik.

A Figma (HSB) és a CSS (HSL/HEX/OKLCH) között váltáskor nem kell minden alkalommal külön konverter programot megnyitni.

Szövegbővítés és gyorskódok

A leggyakrabban használt márkacolourokat szöveges rövidítésként lehet regisztrálni.

CSS-ben, Figma színbeviteli mezőiben, Slack-üzenetekben és kódszerkesztőkben egyaránt ugyanazok a rövidítések működnek. Vége annak az időnek, amelyet a márkapaletta színeinek keresgélésével és másolásával töltöttünk.

Ha elegett van abból, hogy minden alkalommal konverterprogramot kelljen megnyitni és a színkódot más formátumba átírni, érdemes kipróbálni a fns-t.

Kíváncsi, honnan erednek ezek a számok — az RGB három csatornájának alapjai, a bináris rendszer és a HEX jelölés? Kezdje az Hogyan állítja elő a számítógép a színeket: RGB, HEX és a bináris számok cikkel.