Färg
Färgsystem
När man börjar jobba med färger inom webbutveckling är det mestadels RGB-färgsystemet som man jobbar med. RGB är det vanligaste färgsystemet när man ska jobba med saker som avger ljus, som t.ex. bildskärmar, Det finns många andra färgsystem, men 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 de olika grundfärgerna med varierande intensitet får man fram andra färger. Med RGB kan du återge alla de färger som finns i regnbågen. Vilket väl egentligen inte är den fulla sanningen, olika skärmar, kan återge olika delmängder av regnbågens färger. Få eller inga skärmar klarar av att visa dem alla.
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 2563 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 ursprungliga namngivna färgerna är; black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal och aqua. Numera finns flera namngivna färger än dessa, men alla webbläsare stöder inte dessa. Ovanstående grundfärger är dock tillförlitligt att använda sig av och de 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:
Ovanstående skulle färga alla p-element så att deras bakgrund blir gul och deras textfärg blir svart.
Att ange namngivna färger är det enklaste sättet att sätta färg på webben.
Blanda RGB-färger, hexadecimalt
I webbutveckling så är det vanligaste sättet att blanda färger att man anger 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). (Här kan du lära dig mer om det hexadecimala talsystemet)
För att beskriva en RGB-färg med denna metod, slår man samman färgvärdena som ett långt sexsiffrigt hexadecimalt tal. De första två siffrorna anger hur mycket rött som ska ingå, nästa två siffror anger hur mycket grönt som ska ingå och de sista två siffrorna anger hur mycket blått som ska ingå.
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 hexadecimala tal med versaler. Faktum är att man nästan jämt skriver dem med gemena (små bokstäver). Vi har bara skrivit dem med stora här för att de ska vara lättare att urskilja ifrån resten av texten. Det är alltså att föredra att skriva ff snarare än 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 står 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.
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%);
HSL
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. Det går även att använda denna typ av färgblandning i webbutveckling.
För att använda sig av HSL använder man hsl()-kommandot. Detta tar tre inparametrar.
- 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 HSV/HSL på Wikipedia om du vill veta mer; HSV färgsystem.
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 med bakgrundfärgen på en box, så att man t.ex. 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);
Lägg märke till att alfakanalen använder punkt istället för kommatecken.
Bra verktyg
Ett bra verktyg för att blanda färger och skapa paletter är Adobe Color CC. Lek runt med det verktyget för att lära dig mer om hur färger blandas. Alla färgkombinationer du tar fram i verktyget går att få ut som hexvärden. Vilka du kan använda direkt i din webbsida.