Barve v CSS

Barve so med najpogosteje uporabljenimi vrednostmi v CSS. Z njimi določamo barvo besedila, ozadja, robov in številnih drugih elementov. Za prikaz barv na zaslonu se pogosto uporablja zapis RGB, v CSS pa lahko isto barvo zapišemo na več različnih načinov.

Osnovna pravila

Barve lahko na spletnih straneh dodamo z uporabo slogovnih predlog CSS. To lahko storimo na več načinov:

• s poimenovanjem barve,
• s šestnajstiškim zapisom,
• z zapisom rgb(),
• z zapisom rgba(),
• z zapisom hsl() in hsla().

Vrednosti barv lahko uporabimo pri različnih lastnostih, na primer pri color, background-color in border-color. Lastnost color določa barvo besedila, lastnost background-color pa barvo ozadja elementa.

Primerjave

Primeri zapisovanja iste barve

Zgledi

Poimenovane barve

CSS podpira veliko poimenovanih barv. Najprej si oglejmo osnovne oziroma standardne barve, ki se pogosto uporabljajo pri začetnem učenju CSS. Med posebne vrednosti sodita tudi transparent in currentColor.

Osnovne poimenovane barve

Celoten seznam poimenovanih barv si lahko ogledaš na uradni strani MDN: CSS named colors.

Šestnajstiški zapis barv

Koda barve je sestavljena iz treh parov šestnajstiških števil za rdečo, zeleno in modro komponento. Tak zapis opisuje barvo v barvnem prostoru sRGB. V sodobnem CSS lahko v šestnajstiški zapis vključimo tudi alfa komponento za prosojnost. Šestnajstiški zapis barve lahko uporabimo povsod, kjer je v CSS dovoljena vrednost barve.

Znak # uvede šestnajstiški zapis. Prvi par predstavlja rdečo barvo, drugi zeleno in tretji modro. Najnižja vrednost posamezne komponente je 00, najvišja pa FF.

V sodobnem CSS lahko v HEX zapis vključimo tudi prosojnost. Tak zapis ima osem znakov, na primer #00000022, kjer zadnji par 22 predstavlja alfa komponento.

Primeri:

• Modra barva ne vsebuje rdeče in zelene, zato je njena koda #0000FF.
• Rumena barva vsebuje rdečo in zeleno, ne vsebuje pa modre, zato je njena koda #FFFF00.
• Črna ne vsebuje nobene komponente svetlobe, zato ima kodo #000000, bela pa vsebuje vse tri komponente v največji meri, zato ima kodo #FFFFFF.
• Polprosojna črna je lahko zapisana kot #00000022.

Določanje barve z zapisom RGB

Zapis RGB ima obliko:

Funkcija rgb() izraža barvo v barvnem prostoru sRGB z rdečo, zeleno in modro komponento. V sodobnem zapisu lahko vsebuje tudi alfa komponento, torej prosojnost.

Primer:
Zelena barva ne vsebuje rdeče in modre, zato ima zapis rgb(0,255,0).

Določanje barve z zapisom RGBA

Zapis RGBA ima obliko:

RGBA je uveljavljen zapis, ki RGB komponentam doda še alfa vrednost za prosojnost. Alfa med 0 in 1 določa stopnjo prosojnosti, kjer 0 pomeni popolno prosojnost, 1 pa popolno neprosojnost.

Primer:
Zelena barva ne vsebuje rdeče in modre, zato ima popolnoma neprosojen zapis rgba(0,255,0,1).

Določanje barve z zapisom HSL

HSL je kratica za hue, saturation, lightness oziroma odtenek, nasičenost in svetlost. Funkcija hsl() izraža barvo v sRGB glede na odtenek na barvnem krogu ter na nasičenost in svetlost. Podpira tudi neobvezno alfa komponento za prosojnost.

H predstavlja odtenek na barvnem krogu. 0 pomeni rdečo, 120 zeleno in 240 modro. S predstavlja nasičenost v odstotkih, L pa svetlost v odstotkih.

Tudi HSL podpira prosojnost. Tak zapis imenujemo hsla(), kjer ima alfa enako kot pri modelu RGBA vrednost med 0 in 1.

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>

Priporočila

• Pri preprostih primerih lahko uporabiš poimenovane barve, kadar je zapis jasen in pregleden.
• Za natančno določanje barv pogosto uporabi HEX ali funkcijo rgb().
• Kadar potrebuješ prosojnost, uporabi zapis z alfa komponento, na primer rgba(), hsla() ali 8-mestni HEX zapis.
• Za svetlejše in temnejše različice barv je pogosto zelo uporaben zapis hsl().

Pogoste napake

• Zamenjevanje šestnajstiškega zapisa in zapisov s funkcijami.
• Napačno razumevanje alfa komponente pri prosojnosti.
• Nepravilno zapisane vrednosti v funkcijah rgb(), rgba(), hsl() ali hsla().
• Izbira barv brez upoštevanja preglednosti in kontrasta.