CSS Boje

undo redo

Kako se određuju boje u CSS-u?

U CSS-u boje se određuju na osnovu predefinisanog imena boje, ili RGB, HEX, HSL vrijednosti.

Kako bi dodjelili boju bilo kojem elementu koristimo parametar color.

Primjer:

Prva rečenica je crvene boje.

Druga rečenica je plave boje.

Treća rečenica je zelene boje.

CSS

Prva rečenica je crvene boje. 
 Druga rečenica je plave boje. 
 Treća rečenica je zelene boje.

<!DOCTYPE html>
<html>
<head>
<title>CSS Boje</title>

</head>
<body>

  <p style="color: red;">Prva rečenica je crvene boje</p>
  <p style="color: green;">Prva rečenica je zelene boje</p>
  <p style="color: blue;">Prva rečenica je plave boje</p>

</body>
</html>

Određivanje boja prema imenu.

U HTML-u, boje možemo odrediti prema njihovom imenu.

Red

Green

Blue

Određivanje boja prema RGB, HEX, HSL vrijednosti.

U HTML-u, boje možemo odrediti prema RGB, HEX, HSL vrijednosti.

RGB vrijednost

U HTML-u boje mogu biti definisane sa RGB vrijednosti, koristeći sljedeću formulu:

rgb(red, green, blue)

Parametar red predstavlja crvenu boju, blue predstavlja plavu boju a green predstavlja zelenu boju.

Svaki parametar ima vrijednost intenziteta od 0 do 255.

Ako postavimo vrijednost red na 255, a ostale na 0, dobićemo crvenu boju.

Primjenom parametara dobijamo različite boje.

rgb( 255, 0, 0 )

rgb( 0, 255, 0 )

rgb( 0, 0, 255 )

rgb( 255, 165, 0 )

rgb( 128, 0, 128 )

HEX vrijednost

U HTML-u, boje možemo odrediti prema hexadecimalnoj vrijednosti.

#rrggbb

Parametri su rr(red), gg(green), bb(blue), te imaju vrijednost od 00 do ff.

Npr. #ff0000 predstavlja crvenu boju, jer je najveća vrijednost na red parametru.

#ff0000

#00ff00

#0000ff

#FFA500

#800080

HSL vrijednost

U HTML-u, boje možemo odrediti prema hue, saturation, lightness vrijednosti.

hsl(hue, saturation, lightnes)

Hue predstavlja stepen boje od 0 do 360. 0 je crvena, 120 je zelena i 240 je plava.

hsl (0, 100%, 50%)

hsl (120, 100%, 50%)

hsl (240, 100%, 50%)

Saturation

Saturation predstavlja intenzitet boje, u odnosu na nijansu sive boje.

100% je čista boja, ne može se vidjeti nijansa sive

50% je 50% sive boje, ali se još uvijek može vidjeti boja.

0% je potpuno siva, boja se ne može vidjeti nikako.

hsl(240, 100%, 50%)

hsl(240, 50%, 50%)

hsl(240, 0%, 50%)

Lightness

Lightness opisuje osvjetljenje boje, 0% označava da nema osvjetljenja (crno),

50% predstavlja 50% osvjetljenja (ni crno ni bijelo), 100% predstavlja potpuno osvjetljenje (bijela).

hsl(240, 100%, 0%)

hsl(240, 100%, 50%)

hsl(240, 100%, 100%)

RGBA vrijednost.

RGBA vrijednost boja je RGB boja sa dodatkom alpha, što označava transparentnost boje.

rgba(red, green, blue, alpha)

Alpha parametar je broj između 0.0 (potpuno transparentan) i 1.0 (nije nikako transparentan).

rgba(0, 0, 255, 1)

rgba(0, 0, 255, 0.5)

rgba(0, 0, 255, 0)

HSLA vrijednost

HSLA vrijednost boja je HSL boja sa dodatkom alpha, što označava transparentnost boje.

hsla(hue, saturation, lightness, alpha)

Alpha parametar je broj između 0.0 (potpuno transparentan) i 1.0 (nije nikako transparentan).

hsla(240, 100%, 50%, 1)

hsla(240, 100%, 50%, 0.5)

hsla(240, 100%, 50%, 0)

undo redo

w3sedic

CSS

CSS Boje