Mýtus bezpečných barev pro Internet - Grafika.cz - vše o počítačové grafice

13. února 2002, 00.00 | Paletu bezpečných barev zná snad každý adept webdesignu už od okamžiku, kdy se pokusí napsat svůj první tag. Je ale natolik bezpečná, jak inzeruje její název, nebo vás ani důsledné používání jejích odstínů neuchrání od nezamýšlených barevných efektů?

Způsobů, jak takové efekty vznikají, je povícero. Pokud nemá počítač v zásobě barvu, kterou po něm požadujete (kupříkladu pracuje v 256 odstínech a stránka po něm požaduje odstín mimo tuto paletu), vyrovná se se situací po svém. Může kupříkladu vybrat "nejpodobnější" barvu a žádanou jí nahradit. Může se také pokusit žádané barvě co nejvíce přiblížit "smícháním" barev, které má k dispozici: pak dojde k tzv. ditheringu. Obojí může způsobit potíže: pokud selže barevný posun, grafické prvky, které měly původně splynout s pozadím, mohou nepříjemně vystoupit. Dithering na pozadí stránky může zase způsobit hromadný úprk potenciálních návštěvníků - text se na "vzorovaném" pozadí stane prakticky nečitelným.

Příklad ditheringu

Co je paleta bezpečných barev

Aby bylo možné předejít těmto jevům, vznikla tzv. paleta bezpečných barev (Browser-safe palette, jak tuto paletu označila autorka Lynda Weinman), která je integrována v prohlížečích - ať už jde o IE, Netscape nebo jakýkoli jiný. Obsahuje 216 odstínů, které by měly browsery zobrazovat stejně, bez ohledu na platformu, barevnou hloubku (pokud máte aspoň 8 bitů), nebo operační systém. Tyto barvy jsou uspořádány do tabulek 6 x 6 polí, ty do 6 vrstev (dohromady tzv. color cube). Dalších 40 barev (do výsledných 256) do bezpečné palety nepatří, protože se jejich zobrazení může v závislosti na platformě a použitém prohlížeči lišit.

Barvy z "bezpečné" palety se doporučují především na větší jednolité plochy (pozadí stránky či buněk apod.), nevhodné jsou naopak pro obrázky s jemnými barevnými přechody - kupříkladu fotografie.

Výběr barev v paletě je výsledkem výpočtů, nikoli něčího (poněkud zvláštního) vkusu. Pokud jste se někdy dívali na hexadecimální hodnoty barev v paletě, všimli jste si jistě, že barvy jsou kombinací číslic FF, CC, 99, 66, 33, 00 - čili v decimálních hodnotách 255, 204, 153, 102, 53 a 0.

Pro použití v praxi je však uspořádání palety přece jen docela podstatné - proto je k dispozici hned několik způsobů, jak odstíny poskládat do smysluplné palety. (Klasické palety Lyndy Weinman podle odstínů a podle hodnot; výtečná paleta z dílny VisiBone atd.)

Paleta bezpečných barev podle VisiBone

Předpoklad, že barvy z "bezpečné" palety budou vypadat na všech počítačích bez ohledu na platformu, browser či barevnou hloubku, je však z větší části mýtem, než skutečností. Jedním z problémů jsou odchylky mezi barevnými tabulkami u jednotlivých systémů. A podstatným problémem může být zvolená barevná hloubka.

Barevná hloubka a její vliv na bezpečné barvy

Pro začátek špetka teorie: vezmeme-li 24 bitovou barevnou hloubku (True Color se svými milióny barev) jako největší množinu barev, bude 8bitová barevná hloubka (256 barev) její podmnožinou. Totéž však nelze říci o barevných škálách 15 a 16bitových (High Color) - s 24bitovou sdílejí prakticky jen černou a bílou.

Důvod, proč tomu tak je, tkví v oblasti matematických výpočtů. Praktický příklad: u 24bitové barevné hloubky máme na jednu barvu (červenou, zelenou nebo modrou) 8 bitů, tedy (2 na 8), což je 256 (tedy 0-255). Posun o nejmenší jednotku (1) znamená posun o 0,39%. Oproti tomu u 15 bitů (pro zjednodušení), máme na barvu 5 bitů (2 na 5), což je 32 (tedy 0 - 31). Posun o nejmenší jednotku činí už 3,22%. Posun nejenže neodpovídá - ale nedá se žádným rozumným způsobem "napasovat" na sebe.

Výsledkem je situace, kdy 15 a 16 bitové systémy zhusta barvy "posouvají", což může zejména starším verzím browserů způsobit značné problémy. Chovají se totiž "nerozhodně" a tak se stává, že část stránky byla barevně "posunuta" určitým směrem, zatímco jiná část se stejnou výchozí hodnotou byla přepočtena trochu jinak (typicky k tomu dochází u přepočtů barvy pozadí a barvy gifu).

Celý problém názorně zobrazuje test na Webmonkey - autoři vytvořili sadu obdélníků s definovaným pozadím, ve kterých jsou menší obdélníky téže barvy ve formě obrázkového gifu. Účelem testu bylo zjistit, jak se jednotlivé browsery a operační systémy vypořádají se zobrazením barev z palety tzv. bezpečných barev.

Výsledek testu byl poměrně překvapivý - podle autorů si označení "bezpečná" zasluhuje pouze 22(!) barev z původních 216. Ve 24 bitové barevné hloubce podle očekávání k problémům nedocházelo. V 16bitové už ano - bez ztráty kytičky vyšel IE verze 5 a NN verze 4.6. Čtyřková verze IE už měla problémy, stejně jako ostatní druhy browserů. U 8bitové barevné hloubky se "bezpečně" nechovaly čtyři barvy v IE čtyřkové verze; jak se ukázalo, šlo o bug v browseru.

Problém s barevnými posuny v IE 4.0 v barevné hloubce 256 barev - pozadí i gif uprostřed mají tutéž hexadecimální hodnotu, kterou browser interpretuje rozdílně.

Co s tím?

Pokud máte rádi věci absolutně pod kontrolou (vážně se s touhle vlastností chcete věnovat webdesignu? :-)), můžete celou řadu potíží eliminovat vhodným nastavením průhledností u gifů, rozumným seskládáním obrázků na stránce a podobně. Netrpíte-li averzí k zelené a modré, můžete vsadit i na ony absolutně bezpečné barvy. Zcela zavrhnout paletu bezpečných barev není třeba - ale je dobré vědět, že ani ona se nemusí za všech okolností chovat zcela předvídatelně - a počítat s tím už při tvorbě webu.