Färg

Färgsystem

När man börjar titta på färger inom webbteknik, så finns det två huvudsakliga färgsystem som man måste ta i beaktande; RGB och CMYK. RGB är för saker som avger ljus, som t.ex. skärmar, medan CMYK är för trycksaker och liknande. Vi kommer dock enbart att titta på färgsystem som gäller för skärmar här.

RGB

När man jobbar med RGB-färgsystemet, så har man tre grundfärger; rött, grönt och blått. Genom att blanda olika grundfärger av varierande intensitet med varandra får man fram andra färger. Med RGB kan du återge alla färger som finns i regnbågen.

Webbfärger

På webben anger vi färgerna med åtta bitar per färgkanal. Åtta bitar ger oss 256 möjliga värden, ifrån 0 till 255.

Vi har tre färgkanaler och varje kanal styr en av primärfärgerna; rött, grönt och blått. Dessa primärfärger blandas samman för att åstadkomma alla andra färger. Åtta bitar per kanal och tre färgkanaler, gör att vi kan visa 256^3 färger. Vilket ger cirka 16,8 miljoner färger.

I vissa fall anger vi även en så kallad alfakanal. Denna kanal anger hur genomskinligt något är. Detta är användbart om vi ska mixa samman olika bilder och vill att de olika bilderna ska vara mer eller mindre genomskinliga.

Att ange färger

Det finns lite olika sätt på vilket vi kan ange färger.

Namngivna färger

W3C har standardiserat en handfull färger, så att de finns namngivna. De namngivna färgerna är; black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal och aqua. Vissa webbläsare har fler namngivna färger än dessa. Men det här är de grundfärger som är tillförlitligt att använda sig så det fungerar i alla webbläsare.

För att använda de namngivna färgerna i en CSS-regel, gör du bara så här:

See the Pen LVrjeo by Patrik Grip-Jansson (@PGJ) on CodePen.

Ovanstående skulle skapa färga ett p-element så att dess bakgrund blir gult och dess textfärg bli svart.

Att ange namngivna färger är det enklaste sättet att sätta färg på webben.

Blanda RGB-färger, hexadecimalt

Det vanligaste sättet att blanda färger inom webbutveckling är att ange RGB-färgernas intensitet med hexadecimala tal. Hexadecimala tal är bra för att man kan beskriva åttabitars-värden med två siffror, ifrån 00 till FF (dvs, 0 - 255). För att beskriva en RGB-färg med hexadecimaltal anger man sex stycken hexadecimal siffror, två för varje färgkanal. För CSS, så påbörjas varje färgvärde med ett #-tecken, så här skulle en svart bakgrundsfärg anges:

background-color: #000000;

medan helgrön skulle anges så här:

background-color: #00FF00;

Observera att man inte behöver skriva hexadecimaltal med versaler. Det fungerar lika bra med ff som FF.

kortformat

Det finns även en variant där man bara anger tre hexadecimala siffror. Webbläsaren kommer att tolka det som om varje siffra stod två gånger, dvs; #000 tolkas som #000000, medan #BAD tolkas som #BBAADD. Det är alltså ett kort och koncist sätt att skriva vissa färger, men man kan inte blanda till precis vilken färg som helst. För att sätta svart bakgrundsfärg skulle vi göra så här;

background-color: #000;

Ovanstående är för övrigt det kortaste sättet på vilket man kan ange en svart färg.

Blanda RGB-färger, decimalt

Man kan även ange färger med decimala siffror, det blir dock lite längre än det kompakta sätt vi såg ovan. Detta görs med rgb()-kommandot. Om vi vill sätta svart bakgrundsfärg med denna metod kommer det att se ut så här:

background-color: rgb(0,0,0);

Som man förväntar sig kan man sätta varje värde ovan mellan 0 och 255.

Blanda RGB-färger, procentuellt

Om det fortfarande känns krångligt att förstå hur färgblandningen fungerar med tal mellan 0 och 255, så kanske du tycker det är enklare med procent. rgb-kommandot fungerar utmärkt med procent också.

Vill du ha helvitt, kan du göra så här:

background-color: rgb(100%,100%,100%);

Vill du ha en blågrå färg, kanske detta passar:

background-color: rgb(50%,50%,75%);

HLS

Det finns även andra typer av färgsystem. Om du kommer ifrån designvärlden kanske du är van att använda dig av HSL, eller Hue, Saturation Lightness. På svenska säger vi oftast NMI; nyans (kulör), mättnad, intensitet. Det går även att använda denna typ av färgblandning i webbutveckling.

Det första värdet, hue eller nyans, anger vinkel i färghjulet. Den andra värdet, saturation eller mättnad, anger hur mättad färgen ska vara i procent (ifrån 0 % som är grå, till 100 % som är klarast möjliga av den nyansen). Det tredje värdet, lightness eller intensitet, anger hur ljus färgen ska vara, anges i procent (ifrån 0 %, helsvart till 100 %, helvitt).

Så här sätter du svart bakgrundsfärg med hsl().

background-color: hsl(0,0%,0%);

Kolla in artikeln om NMI på Wikipedia om du vill veta mer; http://sv.wikipedia.org/wiki/NMI.

Alfakanaler

Alfakanaler möjliggör att vi kan sätta hur genomskinlig en färg ska vara. Vi kommer alltså att kunna se igenom färgen och se vad som finns bakom. Det här kanske man vill göra på bakgrunden på en webbsida, så att man kan se igenom till en bild som ligger bakom. För att ange en alfakanal kan du antingen använda rgba() eller hsla(). Som du förstår av namngivningen på funktionerna, så anger man fyra värden, varav det sista är alfavärdet. Detta värde är mellan 0 och 1. Noll betyder att färgen är helt genomskinlig, dvs den syns inte alls. Medan ett betyder att färgen är helt ogenomskinlig och man inte ser någonting av det som eventuellt finns bakom.

För att ange en halvgenomskinlig, svart bakgrund kan man göra så här:

background-color: rgba(0,0,0,0.5);

eller så här;

background-color: hlsa(0,0%,0%,0.5);

Bra verktyg

Ett bra verktyg för att blanda färger och skapa paletter är Adobe Color.

Nästa aktivitet

Att lägga till CSS