Webové farby sú farby používané pri navrhovaní webových stránok a spôsoby opisu a uvádzania týchto farieb.

Existuje niekoľko spôsobov výberu farieb pre časti webových stránok. Farby môžu byť uvedené ako trojica RGB (súbor troch čísel) v hexadecimálnom formáte (hexadecimálna trojica). Triplet RGB môže tvoriť 16 777 216 rôznych farieb. Mnohé bežné farby možno vybrať aj podľa ich bežných anglických názvov. Na vytvorenie hodnôt farieb sa často používa nástroj na tvorbu farieb alebo iný grafický softvér.

Prvé verzie aplikácií Mosaic a NetscapeNavigator používali názvy farieb X11 ako základ pre svoje zoznamy farieb. Bolo to preto, že obe začali ako aplikácie systému X Window System.

Každá webová farba má svoju vlastnú definíciu sRGB. Tá sa vzťahuje na chromatickosti jednej sady luminoforov, danú prenosovú krivku, adaptívny biely bod a podmienky zobrazenia. Tie boli zvolené tak, aby boli podobné mnohým reálnym monitorom a podmienkam zobrazovania. Aj bez správy farieb sú vytvorené farby pomerne blízko daným hodnotám. Používateľskí agenti sa však môžu líšiť vo vernosti, s akou zobrazujú farby. Lepšie používateľské agenti používajú správu farieb na vytvorenie lepšej vernosti farieb. To je dôležité pre aplikácie na prenos z webu do tlače.

Formáty a zápis farieb na webe

  • RGB – určuje sa troma hodnotami pre červenú (R), zelenú (G) a modrú (B). V CSS sa používa zápis rgb(255, 0, 0) pre červenú. Hodnoty môžu byť celé čísla 0–255 alebo percentá 0%–100%.
  • RGBA – pridáva kanál alfa pre priehľadnosť: rgba(255, 0, 0, 0.5) je polopriehľadná červená.
  • HEX – hexadecimálna trojica #RRGGBB, kde každá dvojica je v rozsahu 00–FF (napr. #FF0000 pre červenú). Skrátený zápis #RGB je tiež podporovaný (#F00 = #FF0000).
  • HSL / HSLA – hue (odtieň), saturation (sýtosť), lightness (svetlosť), napr. hsl(120, 100%, 50%) je čistá zelená; hsla pridáva alfa kanál.
  • CSS4 rozšírenia – moderné prehliadače podporujú zápisy ako #RRGGBBAA (hex s alfa), lab(), lch() a priame špecifikácie gamutov, avšak podpora sa líši podľa prehliadača.
  • Názvy farieb – CSS definuje množinu názvov (napr. "red", "blue", "rebeccapurple"), vrátane historických X11 názvov použiteľných v mnohých kontextoch.

sRGB a správa farieb

sRGB je štandardná farebná priestorová definícia, ktorú väčšina webu a monitorov používa ako predvolenú. Je navrhnutá tak, aby reprezentovala bežné zobrazovacie zariadenia, vrátane charakteristík gamma korekcie a bieleho bodu. Pri práci s obrázkami a grafikou je dôležité:

  • mať obrázky uložené so správnym farebným profilom (ICC) alebo konvertované do sRGB,
  • používať správu farieb v prehliadači a grafických programoch, ak je presnosť farieb kritická (napr. pri tlači),
  • vedieť, že bez správy farieb sa výsledné zobrazenie môže líšiť medzi monitormi a zariadeniami.

Praktické rady pre vývojárov a dizajnérov

  • Pre konzistentné výsledky používajte sRGB ako cieľový farebný priestor pri exporte rastrových obrázkov (PNG, JPG).
  • Používajte CSS zápisy vhodné pre kontext—napr. rgba() alebo hsl() sú pohodlné pri práci s priehľadnosťou alebo variáciami odtieňa.
  • Testujte farby na rôznych zariadeniach a pri rôznych nastaveniach jasu/kontrastu, ak je vernosť farby dôležitá.
  • Pri návrhu dodržujte pravidlá prístupnosti: WCAG odporúča kontrastný pomer aspoň 4,5:1 pre bežný text a 3:1 pre veľký text, aby bol obsah čitateľný aj pre ľudí so zhoršeným videním.
  • Otestujte návrhy aj na bežné formy farebnej slepoty (deuteranopia, protanopia, tritanopia), pomocou simulátorov alebo nástrojov v návrhovom softvéri.

Historické a technické poznámky

Historicky existoval pojem „web-safe“ paleta (216 farieb) kvôli obmedzeniam starých 8-bitových displejov a webových prehliadačov. Dnešné zariadenia sú zvyčajne schopné zobrazovať milióny farieb, takže táto paleta je už väčšinou nepotrebná.

Pre náročnejšie farebné práce (profesionálna tlač, tlačové proofy) sa používajú pokročilejšie farebné priestory (Adobe RGB, ProPhoto RGB) a ICC profily. Tieto priestory majú širší gamut než sRGB, ale pri prechode na web je často potrebné ich konvertovať do sRGB, aby sa predišlo nečakanej zmene farieb v prehliadači.

Nástroje a postupy

  • Používajte color pickery v grafických nástrojoch (Photoshop, Figma, Sketch) a exportujte farby v požadovanom formáte.
  • Kontrolujte súlad farieb medzi návrhom a implementáciou cez devtools a nástroje pre kontrolu kontrastu.
  • Pri animáciách alebo dynamickej zmene farieb využite HSL pre plynulejšie prechody odtieňov.

Celkové zvládnutie webových farieb zahŕňa pochopenie formátov (RGB, HEX, HSL), farebných priestorov (sRGB) a praktík správy farieb. Tým dosiahnete konzistentnejšie a prístupnejjšie rozhrania naprieč zariadeniami a prehliadačmi.