Webové farby: definícia, formáty (RGB, HEX, sRGB) a použitie na webe
Naučte sa webové farby: definícia, formáty RGB, HEX a sRGB, príklady a praktické použitie na webe — tipy na presné zobrazenie, správu farieb a kompatibilitu naprieč prehliadačmi.
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.
Šesťnástková trojica
Šesťmiestny trojbodový kód je šesťmiestne trojbajtové číslo, ktoré sa používa v jazykoch HTML, CSS, SVG a iných počítačových programoch na reprezentáciu farieb. Byty predstavujú červenú, zelenú a modrú časť farby. Jeden bajt predstavuje číslo v rozsahu 00 až FF alebo 0 až 255 v desiatkovej notácii. To predstavuje najmenšiu (0) až najväčšiu (255) intenzitu každej z farebných zložiek. Šesťnástkový triplet sa vytvorí spojením troch bajtov v šestnástkovom zápise v nasledujúcom poradí:
Byte 1: hodnota červenej farby (typ farby červená)
Bajt 2: hodnota zelenej farby (typ farby zelená)
Bajt 3: hodnota modrej farby (typ farby modrá)
Zoberme si napríklad farbu, kde hodnoty červená/zelená/modrá sú desatinné čísla: červená=36, zelená=104, modrá=160 (sivomodrá farba). Desatinné čísla 36, 104 a 160 sú podobné číslam 24, 68 a A0. Šesťnástkovú trojicu získate spojením 6 šestnástkových číslic dohromady, v tomto príklade 2468A0.
Webové farby HTML
Farba bola vytvorená v roku 1997 a pôvodne obsahovala 16 farieb. Neskôr bola pridaná oranžová, takže ich bolo spolu 17. Pôvodných 16 bolo súčasťou niečoho, čo sa nazýva "šablóna VGA systému Windows", čo znamená, že ide o farby, ktoré možno použiť na akcie, ako je napríklad zvýrazňovanie. []
| Farba | Hexadecimálne | Farba | Hexadecimálne | Farba | Hexadecimálne | Farba | Hexadecimálne |
| #00FFFF | #808080 | námorníctvo | #000080 | striebro | #C0C0C0 | ||
| čierna | #000000 | #008000 | #808000 | teal | #008080 | ||
| #0000FF | #00FF00 | fialová | #800080 | biela | #FFFFFF | ||
| #FF00FF | bordová | #800000 | #FF0000 | žltá | #FFFF00 |
Farba HTML pridaná neskôr
| Farba | Hexadecimálne |
| #FFA500 |
Farby X11 (formulované v roku 1987)
Tieto farby sa nazývajú "webové farby X11" od vynálezu World Wide Webu v roku 1991.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Graf vybraných webových farieb
Táto tabuľka zobrazuje vybrané farby HTML a X11, ako aj vybrané neoficiálne konsenzuálne webové farby vyvinuté webovými dizajnérmi od roku 2002. Pri zadávaní kódu s použitím neoficiálnych farieb je potrebné namiesto názvu farby uviesť jej hexadecimálny kód.
| · zobraziť · hovoriť · upraviť Webové farby (zoznam) | |||||||||||||||
| Biela | striebro | čierna | námorníctvo | nebeská modrá | tyrkysová | azure | teal | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| žltá | jantár | hnedá | oranžovo-červená | bordová | rose | ružová | fialová | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| slonovina | fialová | broskyňa | marhuľa | okrová | slivka | ||||||||||
|
|
|
|
|
|
|
| |||||||||
Otázky a odpovede
Otázka: Aké sú farby webu?
Odpoveď: Webové farby sú farby používané pri navrhovaní webových stránok a spôsoby opisu a uvádzania týchto farieb.
Otázka: Koľko rôznych farieb možno vytvoriť pomocou trojíc RGB?
Odpoveď: Trojicami RGB možno vytvoriť 16 777 216 rôznych farieb.
Otázka: Existujú pre niektoré z týchto farieb bežné anglické názvy?
Odpoveď: Áno, mnohé bežné farby možno vybrať aj podľa ich bežných anglických názvov.
Otázka: Aký softvér sa zvyčajne používa na vytváranie hodnôt farieb?
Odpoveď: Na vytváranie hodnôt farieb sa často používa nástroj na vytváranie farieb alebo iný grafický softvér.
Otázka: Z čoho vychádzali pôvodné zoznamy farieb pre Mosaic a Netscape Navigator?
Odpoveď: Prvé verzie aplikácií Mosaic a Netscape Navigator používali názvy farieb X11 ako základ pre svoje zoznamy farieb, pretože obe začali ako aplikácie systému X Window.
Otázka: S čím súvisí sRGB, keď ide o webové farby?
Odpoveď: Každá webová farba má svoju vlastnú definíciu sRGB, ktorá sa vzťahuje na chromatickosti jednej sady luminoforov, danú prenosovú krivku, adaptívny biely bod a podmienky zobrazenia.
Otázka: Ako používateľskí agenti zobrazujú tieto farby presne?
Odpoveď: Lepší používateľskí agenti používajú správu farieb na vytvorenie lepšej vernosti farieb, ktorá je dôležitá pre webové aplikácie na tlač.
Prehľadať