Zápis barev v HTML a CSS

Přehled a příklady - Možnosti zápisu barvy - Pojmenované barvy - RGB model - Desítkový RGB zápis - Šestnáctkový (hexadecimální) zápis barvy - Bezpečné barvy - Nejistota výsledné barvy - Zápis barev v CSS

Přehled a příklady

Tato stránka se zabývá zejména tím, jak se barvy kódují a pojmenovávají. Napřed ale příklady použití. Na stránce se barví písmo, pozadí nebo okraje. Dá se to dělat třemi způsoby:

Příklad barvení písma tagem <font>

<font color="red">červené písmo</font> a normální písmo.
<font color="blue">modré písmo</font>.

Příklad barvení celého dokumentu tagem <body>

<body bgcolor="white" text="#808080" link="green" vlink="blue">

Dokument je šedým (#808080) písmem na bílém pozadí. Odkazy má zelené, navštívené odkazy modré. (Zobrazit podobný příklad. Více infromací o barvách odkazů, více o pozadí.)

Příklad barvení čehokoliv pomocí CSS

CSS (kaskádové styly) jsou doporučovanější způsob barvení dokumentu, ale jsou těžší. Na začátek kódu se přidá stylopis:

<style>
body {background-color: yellow; color: blue}
h2 {color: green; border: red}
</style>

Zápis může být mnohem delší. Význam: stránka (<body>) bude mít žluté pozadí a modré písmo. Všechny nadpisy druhé úrovně (tagy <h2>) budou mít zelené písmo a červené orámování. (Zobrazit podobný příklad.)

Možnosti zápisu barvy

Barva se dá v HTML zapsat šesti způsoby:

Způsob zápisu Příklad: červené písmo Poznámka
Jménem v angličtině <font color="red"> Existuje mnoho "pojmenovaných" barev.
Procentuálním RGB zápisem <font color="rgb(100%,0%,0%)"> rgb znamená Red Green Blue (v prohlížečích Opera a Mozilla to funguje jenom v CSS)
Desetinným RGB zápisem <font color="rgb(255,0,0)">
Desetinným RGBA zápisem <span style="background-color: rgba(255,0,0,0.3)">
Šestnáctkovým RGB zápisem <font color="#ff0000"> Tento způsob je nejjistější, nejpoužívanější a nejlepší.
Zkráceným šestnáctkovým RGB zápisem <font color="#f00"> Jenom v případě, že se všechny dvojice cifer shodují

V tabulce používám zastaralý tag font pouze pro názornost, samozřejmě je lepší používat zápis barvy v css. Detailním rozborem rgb zápisů se budu zabývat níže.

Poznámka: pokud pro tvorbu stránek používáte nějaký wysiwyg editor, nepotřebujete zápisům barev rozumět, protože editor většinou dá barvy vybrat myší a pak je zapíše sám.

V prohlížečích Chrome, Opera a Firefox se dá v CSS použít tak zvaný RGBa zápis, kde to "a" znamená průhlednost. Např. rgba(255, 0, 0, 0.2) znamená hodně průhlednou červenou barvu (na bílém pozadí je slabě růžová). Hodně průhledná je kvůli tomu, že 0.2 je nízké číslo. Ještě méně fungují hsla() barvy (hue, saturation, luminance, alpha). Takže pozor, RGBa a HSLa nelze běžně použít, protože se potom barvy nezobrazí v Exploreru 8 a nižších.

základní barvyPojmenované barvy

Ačkoliv se dnes uvádí několik desítek pojmenovaných barev, je dobré držet se základních šestnácti windowsáckých barev. Jsou to black, white, green, maroon, olive, navy, purple, gray, yellow, lime, aqua, fuchsia, silver, red, blue a teal. Hlavní výhoda tohoto zadávání spočívá ve snadné zapamatovatelnosti, nemusíte analyzovat světelné složky.

Jako všude v HTML nemusíte dávat pozor na velká písmena, RED funguje stejně dobře jako red nebo ReD.

Příklad: <font color="purple"> udělá takovouhle barvu.

Pro zadávání dalších barev je nutné ovládnout rgb zápisy.

RGB model

RGB znamená red green blue, čili červená zelená modrá. Lidské oko chápe každé barevné světlo jako směs tří složek:

Stejným způsobem jsou barvy tvořeny na monitoru. Když se na zapnutý monitor podíváte lupou, uvidíte červené, zelené a modré body (nemáte-li lupu, stačí si na monitor plivnout). Rozsvícením sousedních bodů různou kombinací intenzit se tvoří barvy. Například žlutá barva se vytvoří rozsvícením zelených a červených bodů, když modré zůstanou zhasnuté.

RGB v HTML funguje úplně stejně. Říká, jak moc se mají rozsvítit červené, zelené a modré body na obrazovce. Například modrá barva se dá procentuálně napsat jako rgb(0%,0%,100%), protože v ní není žádné červené světlo (to je ta první nula), žádné zelené světlo (druhá nula) a je v ní naplno modrá (100%). Žlutá by byla rgb(100%,100%,0%) neboť je tvořena červeným a zeleným světlem.

Myslím, že procentuální zápis je natolik zřejmý, že jej nebudu dále rozvíjet. Nejlepší je zápis šestnáctkový, napřed ale vyložím jednodušší desítkový. Pokud máte raději praxi než teorii, podívejte se na tabulku základních barev, ve které jsem vypsal příklady včetně grafických složek barev.

Desítkový RGB zápis

Namísto procent se v desítkovém zápisu používají čísla od 0 do 255, kde 0 odpovídá 0% a 255 je 100%. Například zelená barva, která má procentuálně rgb(0%,50%,0%), se desítkově zapíše jako rgb(0,128,0). Proč je maximum zrovna 255? To vyplývá z toho, jak počítače zacházejí s informacemi. Pro škálování intenzity pixelu mají (v hi color) vymezeno 8 bitů, což znamená 28 = 256 možností. Protože tam patří i nula, tak maximum je 255.

Desítkový zápis se v praxi příliš nepoužívá, ale je dobré jej pochopit, jinak zůstane záhadou i nejpoužívanější zápis šestnáctkový. Moderní prohlížeče Opera a Mozilla RGB zápisy akceptují pouze v CSS.

Šestnáctkový (hexadecimální) zápis barvy

Začíná se vždy dvojkřížkem (#, na české klávesnici pravý alt+X), za kterým následuje šest znaků. První dva znaky patří červené (red), prostřední dva zelené (green) a poslední dva modré (blue). Symbolicky to lze zapsat takto: #ČČZZMM, nebo chcete-li anglicky #RRGGBB. Každá dvojice znaků je číslo v šestnáctkové soustavě. Nejvyšší hodnotou je zde FF (odpovídá 100%), nejnižší 00. (FF je 15 . 16 + 15 = 255)

Například modrá barva je #0000FF. Žádná červená ani zelená, jenom naplno modrá.

Kdo nerozumí šestnáctkové soustavě, může pro něj být tento zápis na první pohled záhadný. Důležitý je v té dvojici znaků vždycky ten první, druhý jenom drobně škáluje. Čím je ten první znak vyšší, tím více barva svítí. Přitom znak A odpovídá číslu 10, B = 11, C = 12, D = 13, E = 14, F = 15. Nelamte si s tím hlavu, nechte to koňovi, má ji větší. Za chvíli pochopíte, že se to při používání "bezpečných barev" zjednoduší.

Zkrácený zápis

Protože se oba znaky zastupujících jedno světlo často zapisují stejným znakem, existuje zkrácená varianta zápisu. Místo šesti znaků se použijí jenom 3. Pak symbolicky barva #RGB odpovídá barvě #RRGGBB. 

Například vyblitá barva, která se normálně zapisuje #aabbcc, se dá zapsat také #abc. Toho se bohatě využívá zejména při zápisu bezpečných barev. 

Bezpečné barvy

Některé nové mobily, starší monitory a starší grafické karty (obecně zařízení s 256 barvami) dokáží zobrazovat jenom některé barvy. Všechny ostatní barvy se snaží napodobovat kropenatou plochou (dithering), což se ale mnohdy nedaří. Naštěstí existují barvy, kterým se říká bezpečné a které tato zařízení dokáží zobrazit bez problémů. Říká se tomu Netscape paleta.

Tyto barvy mají v šestnáctkovém zápisu pro každou barvu pouze šest možných hodnot: 00, 33, 66, 99, CC nebo FF. Například #33CC66 je bezpečná barva (nazelenalá). Nebo #FF0066 je bezpečná červená. V procentuálním zápisu se mohou používat násobky 20%, což odpovídá násobkům čísla 51 v zápisu desetinném.

Takových bezpečných barev je 216. Můžete si je prohlédnout na samostatné stránce.

Dále k bezpečným barvám patří šestnáct odstínů šedi (#xxxxxx, kde x je 0 až F). Někdy se udává, že k bezpečným barvám patří též základní barvy Windows, nevím, co je na tom pravdy.

Bezpečné barvy by se správně měly používat i ve všech souborech gif. (U jpg je to jedno, tam to stejně moc nejde.)

Nejistota výsledné barvy

Každý uživatel vidí barvy na stránce úplně jinak. Ne že by každý byl barvoslepý (lidí s nějakou oční vadou je ovšem překvapivě hodně), ale mají různé monitory. Na každém monitoru vypadá každá barva trochu jinak. Navíc si lidé nastavují různý jas a kontrast, takže se na konkrétní zobrazení barvy nelze ani trochu spolehnout. To obzvlášť platí pro kombinace barev písma a pozadí -- co se na jednom monitoru zdá docela čitelné, na jiném může beznadějně splývat v jednu plochu.

Zápis barev v CSS

Zatímco v normálním HTML se zapisuje (symbolicky) <tag vlastnost="barva>, v CSS je to

<style>
tag {vlastnost: barva}
</style>

nebo

<tag style="vlastnost: barva">.

Pro zápis "barvy" platí vše, co bylo řečeno výše, i zde jsou tedy ty čtyři způsoby. Za zmínku stojí, že se barva nedává do uvozovek. Například obarvení všech nadpisů druhé úrovně na zeleno se dělá takto:

<style>
h2 {color: #009900}
</style>

Obarvení jenom jednoho konkrétního nadpisu se dá docílit v CSS přímým zápisem:

<h2 style="color: #009900">Nadpis</h2>

RGBA, HSL a HSLA v CSS

V CSS, kde se barvy zapisují nejčastěji, se přibližně od roku 2011 dá běžně pracovat se zadáváním barev pokročilejšími způsoby.

RGBA znamená red green blue alpha, přičemž to alpha znamená průhlednost. Barva se potom zapisuje třeba:

h2 {color: rgba(0,0,255,0.5);}

což je zápis barvy modré (žádná červená, žádná zelená, plná palba modré), která je navíc poloprůhledná. Ta poloprůhlednost je zajištěna onou poslední hodnotou 0.5.

Možná si říkáte, k čemu je dobré mít poloprůhledné nadpisy. Využije se to opravdu málokdy. Obecně pouze v situacích, kdy pod textem je nějaké grafické pozadí a má trochu jakoby prosvítat.

Zápis HSL znamená hue saturation luminance, což lze přibližně přepsat jako odstín, sytost a světlost. V těchto jednotkách jsou zvyklí pracovat mnozí grafici (kromě toho tiskaři pracují v systému CMYK, ale ten není v CSS podporován vůbec). Sám s hodnotami v systému HSL nepracuji, ale zapisuje se to podobně jako RGB, tak si udělejte pár experimentů:

h2 {color: hsl(45,128,204);}

HSLA k systému HSL pouze přidává průhlednost coby alpha kanál, zápis je opět velmi podobný zápisu RGBA.

U RGBA, HSL a HSLA zápisů je nutno myslet na zpětnou kompatibilitu. Starší prohlížeče například zápis RGBA neznají, a tak hodnotu barvy vůbec nepochopí a prvek vykreslí v jeho původní barvě. Doporučuji proto RGBA používat pouze ve dvojitém zápisu jištěném RGB zápisem záložní barvy, nějak takto:

#prvek{
    background-color: rgb(128,128,192); /* pro starší prohlížeče bez průhlednosti a raději světlejší*/
    background-color: rgba(0,0,128,0.5); /* pro moderní prohlížeče poloprůhledně */
}

Starší prohlížeče potom použijí první barvu, jejímuž zápisu rozumějí. Moderní prohlížeče rozumějí i tomu prvnímu zápisu, ale ten druhý je uveden později, a proto podle pravidel kaskády vyhraje. Prvek se tedy vykreslí poloprůhledně. Příklad použití RBGA(). Podobný příklad uvádím u popisu vlastnosti background-color, protože to je asi jediná vlastnost, u které lze RGBA rozumně použít.

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB

 

 

 

o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

Základy Prvky stránek Tvorba webu

 

Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 01. října 2014.