CSS Barve (ang. Colors)
Barve so podane z vnaprej določenimi imeni barv ali vrednostmi RGB, HEX, HSL, RGBA in HSLA.
V CSS je mogoče barvo določiti z uporabo vnaprej določenega imena barve:
| ime barve |
slog |
primer |
| Črna |
style="color: black" |
ČRNA |
| Bela |
style="color: white" |
BELA |
| Modra |
style="color: blue" |
MODRA |
| Rdeča |
style="color: red" |
RDEČA |
| Oranžna |
style="color: orange" |
ORANŽNA |
| Rumena |
style="color: yellow" |
RUMENA |
| Zelena |
style="color: green" |
ZELENA |
| Siva |
style="color: gray" |
SIVA |
| Rjava |
style="color: brown" |
RJAVA |
| Vijolična |
style="color: purple" |
VIJOLIČNA |
| Roza |
style="color: pink" |
ROZA |
Za HTML elemente lahko nastavimo/določimo tudi barvo ozadja:
| ime barve |
slog |
primer |
| Črna |
style="background-color: black" |
ČRNA |
| Bela |
style="background-color: white" |
BELA |
| Modra |
style="background-color: blue" |
MODRA |
| Rdeča |
style="background-color: red" |
RDEČA |
| Oranžna |
style="background-color: orange" |
ORANŽNA |
| Rumena |
style="background-color: yellow" |
RUMENA |
| Zelena |
style="background-color: green" |
ZELENA |
| Siva |
style="background-color: gray" |
SIVA |
| Rjava |
style="background-color: brown" |
RJAVA |
| Vijolična |
style="background-color: purple" |
VIJOLIČNA |
| Roza |
style="background-color: pink" |
ROZA |
V CSS barve lahko določimo tudi z vrednostmi RGB, HEX, HSL, RGBA in HSLA:
CSS Barve: RGB
Barvna vrednost RGB predstavlja RDEČE (ang. RED), ZELENE (ang. GREEN) in MODRE (ang. BLUE)
vire svetlobe. V CSS je barvo RGB barvo mogoče določite z uporabo formule:
style="color: rgb(0, 0, 0)" - črna barva
style="color: rgb(255, 255, 255)" - bela barva
| ime |
slog |
primer |
| Črna |
style="background-color: rgb(0, 0, 0)" |
|
| Bela |
style="background-color: rgb(255, 255, 255)" |
|
| Modra |
style="background-color: rgb(0, 0, 255)" |
|
| Rdeča |
style="background-color: rgb(255, 0, 0)" |
|
| Oranžna |
style="background-color: rgb(255, 165, 0)" |
|
| Rumena |
style="background-color: rgb(255, 255, 0)" |
|
| Zelena |
style="background-color: rgb(0, 128, 0)" |
|
| Siva |
style="background-color: rgb(128, 128, 128)" |
|
| Rjava |
style="background-color: rgb(165, 42, 42)" |
|
| Vijolična |
style="background-color: rgb(128, 0, 128)" |
|
| Roza |
style="background-color: rgb(255, 192, 203)" |
|
| RGB |
RDEČA (ang. RED), ZELENA (ang. GREEN) in MODRA (ang. BLUE) |
Glej primer |
CSS Barve: HEX
Šestnajstiška barva je določena z #rrggbb, kjer šestnajstiška cela števila RR (rdeča), GG (zelena) in
BB (modra) določajo barvne komponente.
style="color: #000000" - črna barva
style="background-color: #000000" - črno ozadje
| ime |
slog |
primer |
| Črna |
style="background-color: #000000" |
|
| Bela |
style="background-color: #ffffff" |
|
| Modra |
style="background-color: #0000ff" |
|
| Rdeča |
style="background-color: #ff0000" |
|
| Oranžna |
style="background-color: #ffa500" |
|
| Rumena |
style="background-color: #ffff00" |
|
| Zelena |
style="background-color: #008000" |
|
| Siva |
style="background-color: #808080" |
|
| Rjava |
style="background-color: #a52a2a" |
|
| Vijolična |
style="background-color: #800080" |
|
| Roza |
style="background-color: #ffc0cb" |
|
| HEX #rrggbb |
RR (rdeča), GG (zelena) in BB (modra) |
Glej primer |
CSS Barve: HSL
HSL pomeni odtenek, nasičenost in lahkotnost (ang. Hue, Saturation and Lightness). Odtenek (ang. Hue) je stopinja
na barvnem kolesu od 0 do 360, kjer je 0 rdeča, 120 zelena in 240 modra barva. Nasičenost (ang. Saturation) je
vrednost v odstotkih, kjer 0% pomeni odtenek sive, 100% pa celotno barvo. Tudi svetlost (ang. Lightness) se meri
v odstotkih in sicer 0% je črna, 50% ni niti svetla niti temna, 100% pa predstavlja belo barvo. V CSS je mogoče
barvo določiti z barvnim odtenkom, nasičenostjo in svetlostjo v HSL obliki:
style="color: hsl(0, 0%, 0%)" - črna barva
style="background-color: hsl(0, 0%, 0%)" - črno ozadje
| ime |
slog |
primer |
| Črna |
style="background-color: hsl(0, 0%, 0%)" |
|
| Bela |
style="background-color: hsl(0, 0%, 100%)" |
|
| Modra |
style="background-color: hsl(240, 100%, 50%)" |
|
| Rdeča |
style="background-color: hsl(0, 100%, 50%)" |
|
| Oranžna |
style="background-color: hsl(39, 100%, 50%)" |
|
| Rumena |
style="background-color: hsl(60, 100%, 50%)" |
|
| Zelena |
style="background-color: hsl(120, 100%, 25%)" |
|
| Siva |
style="background-color: hsl(0, 0%, 50%)" |
|
| Rjava |
style="background-color: hsl(0, 59%, 41%)" |
|
| Vijolična |
style="background-color: hsl(300, 100%, 25%)" |
|
| Roza |
style="background-color: hsl(350, 100%, 88%)" |
|
| HSL |
Odtenek, nasičenost in lahkotnost (ang. Hue, Saturation and Lightness) |
Glej primer |
CSS Barve: RGBA
Barvne vrednosti RGBA so razširitev barvnih vrednosti RGB z dodanim kanalom alfa,
ki določa motnost barve. Vrednost RGBA je določena z: rgba(rdeča, zelena, modra, alfa), kjer je
parameter alfa število med 0.0 in 1. Število 0 pomeni popolnoma pregleden in 1 popolnoma ni pregleden.
| ime |
slog |
primer |
| Črna 100% |
style="background-color: rgba(0, 0, 0, 1)" |
|
| Črna 50% |
style="background-color: rgba(0, 0, 0, 0.5)" |
|
| Modra 100% |
style="background-color: rgba(0, 0, 255, 1)" |
|
| Modra 30% |
style="background-color: rgba(0, 0, 255, 0.3)" |
|
| Rdeča 100% |
style="background-color: rgba(255, 0, 0, 1)" |
|
| Rdeča 40% |
style="background-color: rgba(255, 0, 0, 0.4)" |
|
| Oranžna 100% |
style="background-color: rgba(255, 165, 0, 1)" |
|
| Oranžna 90% |
style="background-color: rgba(255, 165, 0, 0.9)" |
|
| Rumena 100% |
style="background-color: rgba(255, 255, 0, 1)" |
|
| Rumena 35% |
style="background-color: rgba(255, 255, 0, 0.35)" |
|
| Zelena 100% |
style="background-color: rgba(0, 128, 0, 1)" |
|
| Zelena 75% |
style="background-color: rgba(0, 128, 0, 0.75)" |
|
| Siva 100% |
style="background-color: rgba(128, 128, 128, 1)" |
|
| Siva 60% |
style="background-color: rgba(128, 128, 128, 0.6)" |
|
| Rjava 100% |
style="background-color: rgba(165, 42, 42, 1)" |
|
| Rjava 10% |
style="background-color: rgba(165, 42, 42, 0.1)" |
|
| Vijolična 100% |
style="background-color: rgba(128, 0, 128, 1)" |
|
| Vijolična 20% |
style="background-color: rgba(128, 0, 128, 0.2)" |
|
| Roza 100% |
style="background-color: rgba(255, 192, 203, 1)" |
|
| Roza 70% |
style="background-color: rgba(255, 192, 203, 0.7)" |
|
| RGBA |
rgba(rdeča, zelena, modra, alfa) (ang. Red, green, blue, alpha) |
Glej primer |
CSS Barve: HSLA
Barvne vrednosti HSLA so razširitev barvnih vrednosti HSL z dodanim kanalom alfa,
ki določa motnost barve. Vrednost barve HSLA je določena s hsla(odtenek, nasičenost, svetlost, alfa)
(ang. Hue, saturation, lightness, alpha). Parameter alfa je število med 0.0 (popolnoma pregleden) in 1.0 (sploh
ni pregleden).
| ime |
slog |
primer |
| Črna 100% |
style="background-color: hsla(0, 0%, 0%, 1)" |
|
| Črna 10% |
style="background-color: hsla(0, 0%, 0%, 0.1)" |
|
| Modra 100% |
style="background-color: hsla(240, 100%, 50%, 1)" |
|
| Modra 20% |
style="background-color: hsla(240, 100%, 50%, 0.2)" |
|
| Rdeča 100% |
style="background-color: hsla(0, 100%, 50%, 1)" |
|
| Rdeča 30% |
style="background-color: hsla(0, 100%, 50%, 0.3)" |
|
| Oranžna 100% |
style="background-color: hsla(39, 100%, 50%, 1)" |
|
| Oranžna 40% |
style="background-color: hsla(39, 100%, 50%, 0.4)" |
|
| Rumena 100% |
style="background-color: hsla(60, 100%, 50%, 1)" |
|
| Rumena 50% |
style="background-color: hsla(60, 100%, 50%, 0.5)" |
|
| Zelena 100% |
style="background-color: hsla(120, 100%, 25%, 1)" |
|
| Zelena 60% |
style="background-color: hsla(120, 100%, 25%, 0.6)" |
|
| Siva 100% |
style="background-color: hsla(0, 0%, 50%, 1)" |
|
| Siva 70% |
style="background-color: hsla(0, 0%, 50%, 0.7)" |
|
| Rjava 100% |
style="background-color: hsla(0, 59%, 41%, 1)" |
|
| Rjava 80% |
style="background-color: hsla(0, 59%, 41%, 0.8)" |
|
| Vijolična 100% |
style="background-color: hsla(300, 100%, 25%, 1)" |
|
| Vijolična 90% |
style="background-color: hsla(300, 100%, 25%, 0.9)" |
|
| Roza 100% |
style="background-color: hsla(350, 100%, 88%, 1)" |
|
| Roza 45% |
style="background-color: hsla(350, 100%, 88%, 0.45)" |
|
| HSLA |
hsla(odtenek, nasičenost, svetlost, alfa) (ang. hue, saturation, lightness, alpha) |
Glej primer |
