Barve

 

 Barvni krog  

 
Barvni krog 

primarne barve - rdeča, rumena, modra;

sekundarne barve - barve, ki so sestavljene iz dveh primarnih (npr: oranžna);

terciarne barve - barve, ki so sestavljene iz ene primarne in ene sekundarne barve (npr: siva, svetlo vijolična...);

Nasprotne barve (komplementarne barve) - (npr: modra- oranžna ali rdeča-zelena);

tople barve - rdeče, oranžne, rumene, rjave;

mrzle barve - modre, zelene, škrlatne;

nevtralne barve - bele, rjave, bež;

močne barve - intenzivne barve, ki niso razrečene s črno, belo ali komplementarno barvo;

blede barve - manj intenzivne barve zaradi mešanja z belo, črno ali komplementarno barvo ;

 

 
 
 
 

Lastnosti barv

• Komplementarnost barve

 
 
 
 
 

• Nasičenost barve

 
 
 
 
 
 
 
 
 

Lastnosti barv

• Kontrast

 

• Svetlost barve

 
 
 
 

Vpliv barve okolice

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Katero besedilo lažje preberete?

Vrstni red svetlosti najuporabnejših barv je: bela, rumena, svetlomodra (cyan), zelena, škrlatna (magenta), rdeča, modra in črna. Na temnem ozadju so primerne bela, rumena, svetlomodra in zelena. Na svetlem ozadju so najprimernejše škrlatna, rdeča, modra in črna.  

Med ospredjem in ozadjem naj bo razmerje v kontrastu vsaj 3:1, da so podrobnosti dovolj dobro razvidne.  
 
 
 
 
 
 
 
 
 
 
 
 
 

Barvne kombinacije za svetovni splet

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Barve v stilih CSS

• Barve lahko določimo na več načinov:
  • Lahko jih zapišemo z besedo (angleška imena barv). XHTML pozna 16 imen (HTML tolmači sicer podpirajo veliko več imen vendar, če želimo, da je dokument veljaven, lahko uporabimo le spodnjih šestnajst).

      Primer: background: red  

•  
  • Lahko jih zapišemo kot RGB (Red Green Blue) vrednost. Oblika zapisa #rrggbb (šestnajstiški zapis za posamezne barve).

    Primer: background: #FF0000  

•  
  • Uporabimo lahko tudi funkcijo RGB(rdeča, zelena, modra) (barve zapisane v desetiških vrednostih). Število vseh kombinacij (256 x 256 x 256) več kot 16 mio.

      Primer:

      absolutne vrednosti barv: background: rgb(220,30,80)"

      ali barve definiramo v procentih: background: rgb(20%,40%,40%)  

Osnovne barve v XHTML

• XHTML podpira naslednje barve:

 
 
 
 
 

 
 
 
 
 

• Več o vseh barvah, ki jih podpira HTML, najdete na: http://www.w3schools.com/html/html_colornames.asp

 

Primer nijans modre barve                         Primer mešanja barve (rdeča in modra)

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Več o mešanju barv najdete na http://www.w3schools.com/html/html_colorsfull.asp  
 
 

Barva in ozadje

color - barva besedila

background-color - barva ozadja

background-image - slika v ozadju

background-attachment - premikanje slike v ozadju

background-repeat - način tlakovanja ozadja

background-position - položaj osnovne slike pri tlakovanju ozadja

background bližnjica - za vse lastnosti ozadja

Primeri:

background: #00ff00 url('smiley.gif') no-repeat fixed center;

body  {background-color: yellow}

h1 {background-color: #00ff00}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

body {background-image: url('smiley.gif');

            background-repeat: no-repeat;  

            background-position: 50px 100px; }