spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

František Čaník 24.8.2020
Hodnoť článok:
0 0

Farbičky v HTML a CSS, alebo?

Prečo je lepšie používanie HLS namiesto RGB

Keď som sa túlal internetom, zaujal ma názor, prečo je lepšie využívať pri CSS definícii farieb, radšej štandard HLS/HLSA a nie RGB/RGBA. Aj vám to príde ako zaujímavé zamyslenie sa?

RGB / RGBA - miešanie farieb

Vezmime si ako príklad práve farbu loga ZAJTRA.sk, teda tú zelenú, ktorá chce byť nejakým akcentom celého webu.

Jej HEX

#71ac27 a prípadne iné formy:
RGB 113, 172, 39
a HSL 86°, 63%, 41%.

Pri možnosti RGB sa (už asi zo skratky je zrejmé Red, Green, Blue) vieme na farbu pozrieť podľa jej zloženia. Na stupnici od 0 do 255 sa berie do úvahy množstvo farby, ktoré je zahrnuté vo výsledku. 113 červenej, 172 zelenej a 39 modrej.

Ako vidíte v ukážkach, všetky farby sú rovnaké a je jedno, ako som ich zapísal. Čo však v prípade, že bude chcieť portál využívať rôzne odtiene či saturácie alebo kompletne budú chcieť web "prefarbičkovať"?

Uľahčenie dizajnovania - HSL

Ak teda píšem o uľahčení dizajnovania, myslím tým skôr fakt, že môžete využívať rôzne varianty tej istej farby v jej sýtejšej farbe, prípadne vo svetlejšom či tmavšom odtieni.

Ako príklad si vezmime túto jednoduchú paletu

Základ
20% svetlosť
#375313
55, 83, 19
40% svetlosť
#6FA626
111, 166, 38
60% svetlosť
#A2D959
162, 217, 89
80% svetlosť
#D0ECAC
208, 236, 172

Ako vidíte, zmenou jediného parametru sme dostali viacero odtieňov tej istej farby, čo by nám však v hexadecimálnej škále spravilo celkom pekný "bordel". Dokonca aj v RGB by sa veľmi veľa hodnôt muselo zmeniť. Neviem, či by to vám ako programátorom prišlo úplne easy, ale za mňa zmenou jediného parametru je určite lepšie, keď viem zmeniť všetko.

Farby ako premenné v CSS

Odkedy vieme krásne využívať premenné (vars) v CSS, vieme si spraviť krásnu pomôcku, ktorou vytvoríme celú škálu a vlastne aj farebnú paletu.

/**  zakladne farby  **/
:root{
  /* Zelena farba z loga */
  --base-green: 86;
  --green-light:  hsla(var(--base-green), 63%, 75%, 100%);
  --green-normal: hsla(var(--base-green), 63%, 41%, 100%);
  --green-darker: hsla(var(--base-green), 63%, 30%, 100%);

  /* pekná modrá farbva */
  --base-blue: 200;
  --blue-light:  hsla(var(--base-blue), 50%, 75%, 100%);
  --blue-normal: hsla(var(--base-blue), 50%, 50%, 100%);
  --blue-darker: hsla(var(--base-blue), 50%, 30%, 100%);
}
Svetlá zelená
Zelená
Tmavá zelená
Svetlá modrá
Modrá
Tmavá modrá
Svetlá fialová
Fialová
Tmavá fialová


Pochopenie HSL/HSLA miešania

Ono by sa mohlo zdať, že je to ťažké avšak treba si uvedomiť, že kdežto pri RGB či HEX-e musíte poznať všetko (farby v rgb), pri HSL potrebuejte poznať iba paletu 360 farieb, nakoľko prvé číslo - teda farba - Hue, je z palety 360° stupňov kruhu.

Následne už sa potom berú do úvahy Saturácia a svetlosť z anglického Lightness. Ak by sme ešte pridali aj to A, ktoré je zástupcom ALPHA opacity, teda priehľadnosti, tak je nám asi jasné, kam smerujeme.

Ak si teda vezmeme úvodný zápis z CSS, ktorým sme určili --base-green: 86 a vymeníme ju za inú číselnú hodnotu medzi 0-359, dostaneme okamžite úplne inú farbu, pričom zostanú zachované všetky odtiene, pre novú farbu. Pozrime sa teda na príklad:

/**  zakladne farby  **/
:root{
  /* Accent Color */
  --base-accent-color: 352.7;
  --green-light:  hsla(var(--base-accent-color), 63%, 75%, 100%);
  --green-normal: hsla(var(--base-accent-color), 63%, 50%, 100%);
  --green-darker: hsla(var(--base-accent-color), 63%, 30%, 100%);

  /* Accent Color 3 */
  --base-accent-color2: 251.2;
  --green-light:  hsla(var(--base-accent-color2), 50%, 75%, 100%);
  --green-normal: hsla(var(--base-accent-color2), 50%, 50%, 100%);
  --green-darker: hsla(var(--base-accent-color2), 50%, 30%, 100%);

  /* Accent Color 3 */
  --base-accent-color3: 251.2;
  --green-light:  hsla(var(--base-accent-color3), 39.3%, 75%, 100%);
  --green-normal: hsla(var(--base-accent-color3), 39.3%, 45.9%, 100%);
  --green-darker: hsla(var(--base-accent-color3), 39.3%, 30%, 100%);
}
Svetlý odtieň
Základ
Tmavý odtieň
Svetlý odtieň
Základ
Tmavý odtieň
Svetlý odtieň
Základ
Tmavý odtieň


Čo na záver?

Je samozrejmosťou, že všetko sa stále posúva dopredu a to, čo sme vedeli včera je dnes už pomaly nemoderné a zajtra to už odvial čas, takže... Hlavu hore a pekné weby.

František Čaník František Čaník

Programátor, webdesigner a webdeveloper niekoľkých webových projektov. Má za sebou prácu v reklamnej agentúre, médiách a na rôznych pozíciách v oblasti IT.


Hodnoť článok:
0 0

0 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

Zajtra.sk > Programovanie > CSS/HTML > Farbičky v HTML a CSS, alebo?


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama