Barve v HTML

Barve so pomemben del videza spletne strani. Z njimi poudarimo pomembne dele vsebine, izboljšamo preglednost in vplivamo na splošni vtis strani. Na spletnih straneh barve praviloma določamo z uporabo slogovnih predlog CSS.

Pomni: V sodobnih spletnih straneh HTML določa pomen in zgradbo vsebine, CSS pa njen videz. Zato barve praviloma določamo v CSS in ne neposredno v HTML.

Osnovna pravila

Barve na spletnih straneh praviloma določamo s CSS.
Za besedilo in ozadje moramo izbrati dovolj kontrastne barve.
Na isti strani je priporočljivo uporabljati manjše število usklajenih barv.
Barva naj ne bo edini nosilec pomembne informacije.
Za zapis barv lahko uporabimo poimenovane barve, HEX, rgb() ali hsl().

Pozor: Če je kontrast med besedilom in ozadjem premajhen, je vsebina težje berljiva. Pri običajnem besedilu je priporočeno razmerje kontrasta najmanj 4.5 : 1, pri večjem besedilu pa najmanj 3 : 1.

Primerjave

Barvni modeli

V spletnem razvoju se najpogosteje srečamo z naslednjimi načini zapisa barv:

Zapis	Primer	Opis
poimenovana barva	`red`	barva je določena z imenom
`HEX`	`#FF0000`	šestnajstiški zapis barve v modelu `RGB`
`rgb()`	`rgb(255, 0, 0)`	zapis z rdečo, zeleno in modro komponento
`rgba()`	`rgba(255, 0, 0, 0.5)`	zapis `RGB` z dodatno prosojnostjo
`hsl()`	`hsl(0, 100%, 50%)`	zapis z odtenkom, nasičenostjo in svetlostjo
`hsla()`	`hsla(0, 100%, 50%, 0.5)`	zapis `HSL` z dodatno prosojnostjo

Za prikaz barv na zaslonu se pogosto uporablja model RGB, saj temelji na kombinaciji rdeče, zelene in modre svetlobe. Funkcija hsl() pa je pogosto pregledna pri ročnem spreminjanju odtenka, nasičenosti in svetlosti.

Poimenovana barva in `HEX`

Poimenovane barve so preproste za zapis, na primer red, blue ali white. Zapis HEX omogoča natančnejše določanje barve.

p {
   color: red;
}

h1 {
   color: #0000FF;
}

`rgb()` in `hsl()`

Pri rgb() barvo določimo s tremi številskimi komponentami, pri hsl() pa z odtenkom, nasičenostjo in svetlostjo.

div {
   background-color: rgb(240, 240, 240);
}

a {
   color: hsl(120, 100%, 25%);
}

Pomni: Zapis barve lahko vsebuje tudi podatek o prosojnosti. Zato poleg rgb() in hsl() pogosto srečamo tudi rgba() in hsla().

Barve v CSS

Na spletnih straneh barve najpogosteje določamo z lastnostmi CSS, kot so color, background-color in border-color.

Lastnost CSS	Opis
`color`	določa barvo besedila
`background-color`	določa barvo ozadja elementa
`border-color`	določa barvo roba elementa

Primer zapisovanja barv v CSS:

p { color: red; }
h1 { color: #0000FF; }
div { background-color: rgb(240, 240, 240); }
a { color: hsl(120, 100%, 25%); }

Podrobnejšo razlago zapisovanja barv, barvnih modelov in primerov uporabe najdeš na strani Barve v CSS.

Dostopnost in preglednost

Pri uporabi barv moramo paziti predvsem na berljivost in preglednost. Besedilo naj bo dovolj kontrastno glede na ozadje, da ga uporabniki brez težav preberejo.

Dobro je, da na isti strani ne uporabljamo preveč različnih barv. Običajno je boljši vtis, če uporabimo manjše število usklajenih barv in jih dosledno ponavljamo.

Barve naj ne bodo edini način za posredovanje pomembne informacije. Če na primer z barvo označimo opozorilo, je dobro dodati še besedilo, ikono ali drug jasen znak.

Pomni: Barva lahko izboljša videz in preglednost strani, vendar naj pomembnih informacij ne posreduje sama. Pomembno vlogo imajo tudi besedilo, oznake, ikone in dobra struktura vsebine.

Priporočila

Barve določaj s CSS in ne z zastarelimi načini v HTML.
Za besedilo in ozadje uporabljaj dovolj kontrastne barve.
Na eni strani uporabljaj manjše število usklajenih barv.
Za natančnejši zapis barve uporabi HEX, rgb() ali hsl().
Pomembnih informacij ne označuj samo z barvo.

Pogoste napake

Barve besedila in ozadja imajo premajhen kontrast.
Na isti strani je uporabljenih preveč različnih barv brez jasnega reda.
Barva je edini način za prikaz opozorila, napake ali pomembnega podatka.
Barve se določajo v HTML, čeprav je za to namenjen CSS.
Zapis barve je izbran brez razumevanja, kaj posamezen način zapisa pomeni.

Nazaj

Naprej