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.


färgnamn

Det finns 140 färger som man kan ange med namn, bl. a. black, aqua och darkgreen. Se http://www.w3schools.com/tags/ref_colornames.asp.

Vanligtvis använder man sig dock av hexadecimala färgkoder. De 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

"blanda" fram färger

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 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). 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 lysam men inte med full styrka, till exempel #990000. Låter man alla lysa lika mycket men med begränsad styrka blir det grått.

Placeholder image

välja färger

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?

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å https://color.adobe.com/sv/create/color-wheel/ där du kan testa dig fram till olika färgkombinationer. Vill du ha färdiga förslag går du in på https://color.adobe.com/sv/explore/newest/?time=all.

Hex-koder finns på http://www.w3schools.com/tags/ref_colorpicker.asp.


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/.

 

Behöver du mer hjälp? Använd dig av den lärarledda studietiden på tisdagar!
Maila eller säg till vad du vill ha hjälp med i förväg, så läraren är förberedd.