CSS Barve

Barve v CSS lahko določimo na več načinov: z vnaprej določenimi imeni (npr. red), HEX kodami (npr. #ff0000), RGB, HSL vrednostmi ali z dodajanjem prosojnosti (RGBA, HSLA). Te vrednosti uporabimo za barvo besedila (color) in barvo ozadja (background-color).

Lastnost background-color določa barvo ozadja elementa. Ozadje se razteza čez celotno vsebino elementa, vključno z notranjim odmikom (padding) in obrobami (border), vendar se ne razteza čez zunanji odmik (margin). Lastnost color 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;
            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; background: white;
    border: 1px solid black;">ČRNA PISAVA</div>
    <div class="box" style="color: white; background: black;">BELA PISAVA</div>
    <div class="box" style="color: blue;
    border: 1px solid black;">MODRA PISAVA</div>
    <div class="box" style="color: red;
    border: 1px solid black;">RDEČA PISAVA</div>
    <div class="box" style="color: orange;
    border: 1px solid black;">ORANŽNA PISAVA</div>
    <div class="box" style="color: yellow; background: black;">RUMENA PISAVA</div>
    <div class="box" style="color: green;
    border: 1px solid black;">ZELENA PISAVA</div>
    <div class="box" style="color: gray;
    border: 1px solid black;">SIVA PISAVA</div>
    <div class="box" style="color: brown;
    border: 1px solid black;">RJAVA PISAVA</div>
    <div class="box" style="color: purple;
    border: 1px solid black;">VIJOLIČNA PISAVA</div>
    <div class="box" style="color: pink; background: black;">ROZA PISAVA</div>
</div>

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

REZULTAT

Hitra izbira barv za CSS

Pri oblikovanju spletnih strani je pravilna izbira barv ključna za dober izgled. Spodaj lahko s klikom na barvno polje odprete paleto in izberete poljubno nianso. Orodje vam bo takoj izpisalo HEX in RGB kodo, ki jo preprosto kopirate v svojo CSS datoteko. To vam prihrani čas, saj vam ni treba ugibati vrednosti ali uporabljati zunanjih programov.

REZULTAT

Format	Primer	Opis
Imena barv
`ime barve`	`color: red;`	Vnaprej določena imena barv (140+ imen, npr. red, blue, green)
`transparent`	`background-color: transparent;`	Popolnoma prosojna barva
`currentColor`	`border-color: currentColor;`	Uporabi trenutno vrednost lastnosti color elementa
HEX (šestnajstiško)
`#rrggbb`	`color: #ff0000;`	Polna HEX koda – rr (rdeča), gg (zelena), bb (modra)
`#rgb`	`color: #f00;`	Krajša HEX koda (enako kot #rrggbb)
`#rrggbbaa`	`color: #ff000080;`	HEX koda s prosojnostjo – aa (alpha)
RGB / RGBA
`rgb(r, g, b)`	`color: rgb(255, 0, 0);`	Rdeča (0–255), zelena (0–255), modra (0–255)
`rgba(r, g, b, a)`	`color: rgba(255, 0, 0, 0.5);`	RGB s prosojnostjo – a (0 = prosojno, 1 = neprosojno)
HSL / HSLA
`hsl(h, s%, l%)`	`color: hsl(0, 100%, 50%);`	Odtenek (0–360°), nasičenost (0–100%), svetlost (0–100%)
`hsla(h, s%, l%, a)`	`color: hsla(0, 100%, 50%, 0.5);`	HSL s prosojnostjo – a (0 = prosojno, 1 = neprosojno)
Lastnosti za barve
`color`	`color: #333;`	Določi barvo besedila
`background-color`	`background-color: #f0f0f0;`	Določi barvo ozadja elementa
`border-color`	`border-color: red;`	Določi barvo obrobe elementa
`opacity`	`opacity: 0.5;`	Določi prosojnost celotnega elementa (0–1)

CSS Barve

Hitra izbira barv za CSS

Vadnica.org

Povezave

Podpora