Za prikaz barv na ekranu se uporablja barvni zapis RGB, ki barve prikazuje s kombinacijo rdeče, zelene in modre svetlobe.
Barve lahko spletnim stranem dodamo samo z uporabo slogovnig predlog CSS. To lahko storimo na več načinov:
- s poimenovanjem barve
- s šestnajstiškim zapisom
- barvo določimo s posameznimi komponentami RGB
- barvo določimo s posameznimi komponentami RGBA
- z barvnim modelom HSL
Človeško oko lahko loči med okoli 10.000.000 odtenki. Zato za dokaj realen zapis barv zadostuje 24-bitna barvna globina, z njo dobimo 16.777.216 različnih barv in njihovih odtenkov. To veliko številko smo dobili z množenjem 256×256×256.
Primer zapisovanja barv:
| Barva | Ime barve | Šestnajstiški zapis HEX | Barva RGB |
|---|---|---|---|
| aqua | #00FFFF | rgb(0,255,255) | |
| black | #000000 | rgb(0,0,0) | |
| blue | #0000FF | rgb(0,0,255) | |
| fuchsia | #FF00FF | rgb(255,0,255) | |
| gray | #808080 | rgb(128,128,128) | |
| green | #008000 | rgb(0,128,0) | |
| lime | #00FF00 | rgb(0,255,0) | |
| maroon | #800000 | rgb(128,0,0) | |
| navy | #000080 | rgb(0,0,128) | |
| olive | #808000 | rgb(128,128,0) | |
| orange | #FFA500 | rgb(255,165,0) | |
| purple | #800080 | rgb(128,0,128) | |
| red | #FF0000 | rgb(255,0,0) | |
| silver | #C0C0C0 | rgb(192,192,192) | |
| teal | #008080 | rgb(0,128,128) | |
| white | #FFFFFF | rgb(255,255,255) | |
| yellow | #FFFF00 | rgb(255,255,0) | |
| transparent |
Uporaba barv v HTML
Barve so v programskem jeziku HTML definirane v šestnajstiškem številskem sestavu (HEX) kot kombinacija rdeče, zelene in modre barve (red, green, blue; RGB).
Najmanjša vrednost, ki jo lahko priredimo posamezni barvi je 0 (v HEX: 00). Največja vrednost posamezne barve je 255 (v HEX: ff).
Barve lahko spletnim stranem dodamo samo z uporabo slogovnig predlog CSS.
Poimenovane barve
V CSS2.1 je 17 standardiziranih poimenovanih barv, v CSS3 pa je standardizirana še barva transparent:
| Barva | Ime barve |
|---|---|
| aqua | |
| black | |
| blue | |
| fuchsia | |
| gray | |
| green | |
| lime | |
| maroon | |
| navy | |
| olive | |
| orange | |
| purple | |
| red | |
| silver | |
| teal | |
| white | |
| yellow | |
| transparent |
V SGML obstaja še 123 poimenovanih barv. Večina brskalnikov zmore prikazati te poimnovane barve, čeprav jih standard CSS ne dovoljuje, zato jih ne uporabljamo.
Šestnajstiški zapis barv
Koda barve je sestavljena iz treh števil, za vsako izmed osnovnih barv: rdečo, zeleno, modro (ang. red, green, blue). V kodi RGB navedemo, koliko je katere od teh barv v mešanici. Barvo zapišemo na sledeč način:
#FF00FF
Pri tem je # simol za število, prvo dvomestno šestnajstiško število predstavlja rdečo barvo, drugo zeleno in tretje modro barvo. Najnižja vrednost števila je 00 (0), najvišja pa FF (255).
Primer:
- Modra barva ne vsebuje odtenkov rdeče in zelene, zato je njena koda
#0000FF. - Rumena barva vsebuje rdečo in zeleno a ne vsebuje modre, zato je koda za rumeno barvo
#FFFF00. - Črna ne vsebuje nobenih odtenkov, zato ima kodo
#000000, bela pa vsebuje vse barvne odtenke, zato ima kodo#FFFFFF.
Kadar sta števki za zapis posamezne barve enaki, kot npr. #0088FF, lahko barvo zapišemo tudi okrajšano #08F.
Določanje barve s posamezno komponento RGB
Zapis RBG ima obliko:
rgb(rdeča, zelena, modra)
Vrednosti posamesne barve so med 0 in 255 ali v odstotkih med 0% in 100%.
Primer:
Zelena barva ne vsebuje rdeče in modre, zato ima zapis rgb(0,255,0) ali rgb(0,100%,0).
| Barva | Barva RGB |
|---|---|
| rgb(0,255,255) | |
| rgb(0,0,0) | |
| rgb(0,0,255) | |
| rgb(255,0,255) | |
| rgb(128,128,128) | |
| rgb(0,128,0) | |
| rgb(0,255,0) | |
| rgb(128,0,0) | |
| rgb(0,0,128) | |
| rgb(128,128,0) | |
| rgb(255,165,0) | |
| rgb(128,0,128) | |
| rgb(255,0,0) | |
| rgb(192,192,192) | |
| rgb(0,128,128) | |
| rgb(255,255,255) | |
| rgb(255,255,0) |
Določanje barve s posamezno komponento RGBA
Zapis RBGA ima obliko:
rgba(rdeča, zelena, modra, alfa)
Vrednosti posamesne barve so med 0 in 255 ali v odstotkih med 0% in 100%, vrednost alfa je med 0.0 (popolna prozornost) in 1.0 (popolna neprosojnost).
Primer:
Zelena barva ne vsebuje rdeče in modre, zato ima zapis rgb(0,255,0,0) ali rgb(0,100%,0,0).
| Barva | Barva RGBA |
|---|---|
| rgb(0,255,0,1) | |
| rgb(0,255,0,0.8) | |
| rgb(0,255,0,0.6) | |
| rgb(0,255,0,0.4) | |
| rgb(0,255,0,0.2) | |
| rgb(0,255,0,0) |
Določanje barve s posamezno komponento HSL
HSL je kratica za hue, saturation, lightness (barva, nasičenost, svetlost) in predstavlja valnji barvni koordinatini sistem.
hsl(H, S, L)
H je barva na obroču. 0 je rdeča, 120 je zelena in 240 je modra. S predstavlja odstotek barve. 0% je sivina, 100% je polna barva. L je tudi podana v odstotkih. 0% je črna, 100%je bela.
Tudi HSL podpira prosojnost, kjer ima alfa enako kot pri RGBA modelu vrednost med 0 in 1.
hsl(H, S, L, alfa)
Primer:
<div style="background-color: hsla(0,100%,50%,0.2);"></div>
<div style="background-color: hsla(0,100%,50%,0.4);"></div>
<div style="background-color: hsla(0,100%,50%,0.6);"></div>
<div style="background-color: hsla(0,100%,50%,0.8);"></div>
<div style="background-color: hsla(0,100%,50%,1);"></div>