Färgerna på din hemsida

1. Inledning

Den här sidan berättar om hur man lägger in färger på sin hemsida och vad de olika färgkoderna betyder. Vill du veta lite mer vad färger är i största allmänhet skall du i stället läsa på färgsidan. Gå dit >

2. Vad betyder färgkoderna?

Som du kanske vet ser en färgkod i Html-standarden ut så här:

FF9933

Den består av hexadecimaler, i det här fallet FF9933, som motsvarar de tre färgerna rött (FF), grönt (99) och blått (33). Man brukar tala om en färgs RGB-kod, d.v.s dess Rött-Blått-Grönt-värde och det är alltså denna kod jag skrivit ovan. RGB-värdet anger vilka färger som används för att blanda till en viss nyans: hur mycket rött, blått och grönt som ingår i den.

Andelen rött, blått och grönt anges alltså med hexadecimaler, som ser ut så här:

0  1  2  3  4  5  6  7   8   9  A  B  C  D  E  F

Det är totalt 16 stycken, som du kan se. 0 betyder "ingen färg" och F betyder "full färg". Eftersom varje färkomponent har två hexadecimaler kan man tala om att man inte vill ha någon färg alls (00) eller full färg (FF). Vill man inte ha någon röd färg alls skriver man följaktligen 00 och vill man ha knallrött skriver man FF i kolumnen för rött. Likadant för de andra två färgerna. Det betyder att 000000 ger svart och FFFFFF ger vitt.

Man kan också skriva på andra sätt, men det är inte lika vanligt. FF0000 är samma som:

• F00
• 100%,0%,0%
• 255,0,0 (=decimalsystemet)
• red

Decimalsystemet används av många ritprogram. Man har valt att ge varje färg ett värde mellan 0 och 255, vilket betyder att varje färg i koden kan ha någon av 256 olika kulörer. Det decimala systemet motsvarar det hexadecimala eftersom båda använder 256 olika färgkoder, men skriver dem olika.

0-255 i decimalvärde motsvarar alltså 00-FF i hexadecimalvärde, därför att det mellan 0 och F finns 16 olika steg och 16x16 blir 256.

I många bildbehandlingsprogram kan man skriva in RGB-värdet dels decimalt, dels hexadecimalt, dels kan man välja färg visuellt och dels kan man använda något av alla de färgsystem som finns!

Hexadecimalkoden brukar användas för en palett med 256 olika färger (eller färre). Decimalkoden klarar av ända upp till 16,7 miljoner färger, för 256 x 256 x 256 = 16,777,216. Du kan läsa mer om matematiken bakom färger på sidan om bitar och bytes. Läs mer här >

Som du också såg i listan med exempel räcker det ibland att man skriver bokstäver för vilken färg man vill ha. Det fungerar dock inte i alla webbläsare, så du bör helst använda hexadecimalkoden. (Däremot används färgnamnen i stylesheets.) Du kan se vilka ord (och sifferkombinationer) som går att använda i tabellen nedan:

3. Vad är webbsäkra färger?

Ursprungligen anpassades Netscape till Windows 3.x, som i sin tur var anpassad till SVGA-grafiken, d.v.s till en 256-färgers palett. Men Windows använde själv 20 av dessa färger till själva systemet och dessutom ytterligare 13 till Windows-loggan. Därför blev det bara 223 färger kvar för Netscape. Nu är ju 223 inget särskilt lätthanterligt tal, matematiskt sett, så man bestämde sig för att använda 216 färger i stället: 6 röda, 6 gröna och 6 blå. Multiplicerar man 6 med sig själv 3 gånger (6x6x6) får man mycket riktigt 216.

Innan du läser vidare kanske du vill ta dig en titt på hur de 216 färgerna ser ut? Du hittar en palett med de 216 webbsäkra färgerna på en särskild sida. Gå dit >

"The browser-safe palette was developed by programmers with no design sense, I assure you. That's because a designer would have never picked these colors. Mostly, the palette contains far less light and dark colors than I wish it did, and is heavy on highly saturated colors and low on muted, tinted or toned colors."

Färgexperten Lynda Weinmann uttalar sig om webbsäkra färger på sin hemsida.

När datorn skulle visa färger som inte ingick i denna standardpalett, behövde den ta till ett knep, som kallas dithering (ibland dittring eller gittring). Den blandade då in pixlar från andra färger i en standardfärg. På lite avstånd från skärmen såg det då helt ok ut och den rätta färgen framträdde. Men nära skärmen, där de flesta ju håller till, såg färgerna flammiga, prickiga eller smutsiga ut.

Idag är detta inte ett lika stort problem eftersom datorerna och skärmarna har blivit bättre. Problemet idag är snarare att olika system och program använder olika färgpaletter. Det gör att en färg som är klarröd på en skärm kan se orange ut på en annan. För att åtgärda det behöver skärmen kalibreras, men det går jag inte in på här.

Fortfarande lever begreppet "webbsäker" kvar och används flitigt. I Html-kod och i ritprogram ser man ofta färger uppbyggda kring hexadecimalerna 00, 33, 66, 99, CC och FF. Genom att bara använda kombinationer av dessa kan man tillverka dessa webbsäkra färger. I praktiken är detta idag dock ett föråldrat synsätt och man kan utan problem använda även färger som inte är webbsäkra.

4. Vad kan man färga?

Nu vet vi lite mer om vilka färger som kan användas och hur de skrivs. Men hur använder man då färgkoderna i praktiken? I princip är det så att det mesta går att färga. Här är några exempel:

Färgad text
Man färgar texten med <FONT color="009900">Detta är grönt </FONT> där 009900 är den utbytbara färgkoden. Avslutningen </FONT> återställer färgen till den som var innan.

Färg i hela dokumentet
Denna ändrar man i BODY: <BODY bgcolor="#FFFFFF" text="#333333" link="#000099" vlink="#990000"> ändrar bakgrundsfärgen till vitt, textfärgen till mörkgrått, obesökta länkar till mörkblått, och besökta till mörkrött.

Färga tabeller
Attributet bgcolor används även i tabeller och deras celler. Så här kan det se ut:

Utöver dessa exempel kan man färga alla ytor, kanter och liknande. Bäst resultat når man dock om man använder sig av stilmallar. Läs mer om sådana i den särskilda sektionen för dem. Gå dit >