Bia Rask Webbkurs

HTML & CSS

FÄRGER

 


w3schoools är en fantastisk resurs för dig som bygger webbsidor. Färgnamn som går använda på webben hittar du i Color Tutorial och hexadecimala färger i HTML Color Picker.

Hur färger används i CSS kan du läsa om i Color Properties på w3schools sajt.

color.adobe.com är ett bra verktyg när du ska sätta samman den färgpalett du vill använda på din sajt. Under "Färgregel" väljer du om du vill arbeta med till exempel komplementfärger, tre färger som passar ihop (triad) eller någon annat annat. Du väljer sedan en färg och får en uppsättning färger som passar ihop med denna. Vill du ha förslag på färdiga teman hittar du det under Utforska.


Om färger

Kulör, valör & mättnad

Ordet färg kan betyda många olika saker, därför delar vi här in det i kulör, valör och mättnad.

Grön, gul och gulröd färgruta
Kulör är färgerna vi ser i en färgcirkel, till exempel grön, gul och orange.

Ljusgrön, grön och mörkgrön färgruta
Valör är hur ljus eller mörk en nyans är, till exempel ljusgrön och mörkgrön.

Klargrön, mjukt grön och grågrön färgruta
Mättnad är hur klar eller grådassig en nyans är, till exempel klargrön eller grågrön.

Grön färgruta
Nyans är den färg vi ser, alltså en kulör med viss valör och mättnad.

 

Välja färger

Välj ut några färger som du arbetar med på din webbplats och håll dig till dem (såvida du inte har ett gott skäl att göra undantag). Det ger siten ett enhetligare och proffsigare intryck. Tre färger är ofta lagom. Det är viktigt att de harmonierar med varandra.

Ta en titt på Adobe Color där du kan testa dig fram till olika färgkombinationer.

Hex-koder finns på HTML Color Picker. Den sidan är också perfekt om du har en färgnyans (Selected Color) och vill se den i samma kulör men med annan valör (Lighter / Darker) eller mättnad (Saturation), eller om du vill hitta andra kulörer (Hue) med samma mättnad och ljushet.

 

 

Välj färger med omsorg så att webbsidan är lätt att läsa! Det är viktigt med god kontrast mellan text och bakgrund.

Är detta lättläst?

Är detta lättläst?

Är detta lättläst?

Är detta lättläst?

Är detta lättläst?

HTML Color Picker har en ruta där du kan se vald färg med svart respektive vit text på.

 

 


Färgnamn

HTML-namn

Det finns 140 färger som man kan ange med namn, bl. a. black, aqua och darkgreen. Se HTML Color Names.

Hex-färger

Vanligtvis använder man sig av hexadecimala färgkoder som ger många fler färger att välja bland. Färgkoderba består av tecknet # följt av tre eller sex siffror/bokstäver. Är det tre bokstäver/siffror är det en vardera för rött (R), grönt (G) och blått (B). Är det sex bokstäver/siffror visar de två första hur mycket rött det ska vara i färgen, de i mitten grönt och de två sista hur mycket blått det ska vara.

red
#FF0000

pink
#FFC0CB

fuchia
#FF00FF

darkviolet
#9400D3

slateblue
#6A5ACD

navy
#000080

 

Det hexadecimala talsystemet består av de sexton siffrorna 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E och F. Lägsta värdet är 0 och högsta F. För att få möjlighet till fler olika värden kombinerar man ofta två siffror (jämför 0-9 och 00-99). Med två hexadecimala siffor får man 256 möjliga värden (16*16=256) per färg (röd, grön eller blå). Lägsta värdet är då 00 och högsta FF.

Du kan tänka dig tre lampor som går tända (FF) och släcka (00) eller dimma (alla värden däremellan). Svart blir därmed #000000 (alla lampor släckta) och vitt #FFFFFF (alla lampor lyser för fullt). På samma sätt blir rött #FF0000 (bara den röda lyser) och gult #FFFF00 (den röda och den gröna lyser). Om man vill ha en mörkare röd låter man bara den röda lysa, men inte med full styrka, till exempel #990000. Låter man alla lysa lika mycket men med begränsad styrka blir det grått.


Ange färg i CSS

Färgerna kan anges med färgnamn eller hexadecimal färgkod. De flesta webbläsare klarar även att man anger rgb-värdena med vanliga tal.

p {color:red;}
p {color:#00ff00;}
p {color:rgb(0,0,255);}

Några fler exempel på css-kod där färg anges:

.info {

     color:#000000;
     background-color:#FAFAE6;
     border:4px solid #DEB887;
     }

Läs mer på http://www.w3schools.com/cssref/.