CSS Barve

Barve so podane z vnaprej določenimi imeni barv ali vrednostmi RGB, HEX, HSL, RGBA in HSLA. V CSS lahko barvo določimo z uporabo vnaprej določenih imen barv, in sicer tako za ozadje (background-color) kot tudi za besedilo (color). Lastnost background-color (slo. Barva ozadja) določa barvo ozadja elementa. Ozadje zajema celotno velikost elementa, vključno z odmikom in obrobami, vendar ne vključuje robov. Lastnost color (slo. Barva besedila) pa določa barvo besedila znotraj vsebine elementa. Obe lastnosti omogočata izbiro barv z uporabo imen barv, pa tudi RGB, HEX, HSL, RGBA ali HSLA vrednosti.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <style>
        .container {
            display: flex;
            flex-wrap: wrap;
            border: 1px solid black !important;
            margin-bottom: 10px;
        }
        .box {
            width: 200px;
            margin: 10px;
            padding: 10px;
            display: flex;
            align-items: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="box" style="color: black !important; background: white !important;
    border: 1px solid black !important;">ČRNA PISAVA</div>
    <div class="box" style="color: white !important; background: black !important;">BELA PISAVA</div>
    <div class="box" style="color: blue !important;
    border: 1px solid black !important;">MODRA PISAVA</div>
    <div class="box" style="color: red !important;
    border: 1px solid black !important;">RDEČA PISAVA</div>
    <div class="box" style="color: orange !important;
    border: 1px solid black !important;">ORANŽNA PISAVA</div>
    <div class="box" style="color: yellow !important; background: black !important;">RUMENA PISAVA</div>
    <div class="box" style="color: green !important;
    border: 1px solid black !important;">ZELENA PISAVA</div>
    <div class="box" style="color: gray !important;
    border: 1px solid black !important;">SIVA PISAVA</div>
    <div class="box" style="color: brown !important;
    border: 1px solid black !important;">RJAVA PISAVA</div>
    <div class="box" style="color: purple !important;
    border: 1px solid black !important;">VIJOLIČNA PISAVA</div>
    <div class="box" style="color: pink !important; background: black !important;">ROZA PISAVA</div>
</div>

<div class="container">
    <div class="box" style="background: black !important; color: white !important;">ČRNO OZADJE</div>
    <div class="box" style="background: white !important; color: black !important;
    border: 1px solid black !important;">BELO OZADJE</div>
    <div class="box" style="background: blue !important; color: white !important;">MODRO OZADJE</div>
    <div class="box" style="background: red !important; color: black !important;">RDEČE OZADJE</div>
    <div class="box" style="background: orange !important; color: black !important;">ORANŽNO OZADJE</div>
    <div class="box" style="background: yellow !important; color: black !important;">RUMENO OZADJE</div>
    <div class="box" style="background: green !important; color: white !important;">ZELENO OZADJE</div>
    <div class="box" style="background: gray !important; color: white !important;">SIVO OZADJE</div>
    <div class="box" style="background: brown !important; color: white !important;">RJAVO OZADJE</div>
    <div class="box" style="background: purple !important; color: white !important;">VIJOLIČNO OZADJE</div>
    <div class="box" style="background: pink !important; color: black !important;">ROZA OZADJE</div>
</div>
</body>
</html>

REZULTAT

ime	slog	izgled
Č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

ime	slog	izgled
ČRNA	style="background-color: black;"
BELA	style="background-color: white;"
MODRA	style="background-color: blue;"
RDEĆA	style="background-color: red;"
ORANŽNA	style="background-color: orange;"
RUMENA	style="background-color: yellow;"
ZELENA	style="background-color: green;"
SIVA	style="background-color: gray;"
RJAVA	style="background-color: brown;"
VIJOLIČNA	style="background-color: purple;"
ROZA	style="background-color: pink;"

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	izgled
Č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	izgled
Č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	izgled
Č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.

style="color: rgba(0, 0, 0, 1)" - črna barva (neprosojna) style="background-color: rgba(0, 0, 0, 0.5)" - črno ozadje z 50% prosojnostjo

ime	slog	izgled
Č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ŽA 100%	style="background-color: rgba(255, 165, 0, 1);"
ORANŽNA 25%	style="background-color: rgba(255, 165, 0, 0.25);"
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).

style="color: hsla(0, 0%, 0%, 1)" - črna barva (neprosojna) style="background-color: hsla(0, 0%, 0%, 0.5)" - črno ozadje z 50% prosojnostjo

ime	slog	izgled
Č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