Načrtovanje in razvoj spletnih aplikacij

Barve v CSS

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>