Načrtovanje in razvoj spletnih aplikacij

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.
hsla(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>