<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Färger

Färger i HTML anges med namn eller med s.k. hex-koder (se nedan). De sexton vanligaste färgerna kan anges med namn och för övriga måste man ange hex-koden. Även de sexton färger som har egna namn kan anges med hex-koder. Vissa äldre webbläsare (t.ex. Netscape 2.0) kan endast tolka hex-koderna, inte färgnamnen.

De sexton färger som har egna namn är:
blacksvart"#000000" 
silverljusgrå"#C0C0C0" 
graymörkgrå"#808080" 
whitevit"#FFFFFF" 
maroonrödbrun"#800000" 
redröd"#FF0000" 
purplemörklila"#800080" 
fuchsialjuslila"#FF00FF" 
greengrön"#008000" 
limeljusgrön"#00FF00" 
olivemörkgul"#808000" 
yellowgul"#FFFF00" 
navymörkblå"#000080" 
blueblå"#0000FF" 
tealblågrön"#008080" 
aqualjusblå"#00FFFF" 

Hexkoder

En hex-kod är ihopsatt av ett nummertecken (#) och tre stycken tvåsiffriga hexadecimala tal i ordningen röd-grön-blå. Hexadecimal räkning är ett talsystem som går mellan 0 och 15 istället för det vanliga decimala talsystemets 0­9. Man använder de vanliga siffrorna 0­9 samt bokstäverna A­F. Varje "siffra" i ett hexadecimalt tal kan alltså ha ett värde mellan 0 (0 i decimal räkning) och F (15 i decimal räkning). Tvåsiffriga tal kan ha ett värde mellan 00 (0 i decimal räkning) och FF (255 i decimal räkning). För varje färg kan vi alltså välja 256 olika värden (0­255).

Färgen blandas av de tre grundfärgerna rött, grönt och blått med s.k. additiv blandning, blandning av ljusstrålar. Full styrka på alla tre färgerna ger vitt, och inget av någon färg ger svart. Det är alltså motsatt blandningsprincip som i målarlådan. Se tabellen ovan för exempel.

Med 256 olika värden på tre olika färger kan man blanda fram 16,7 miljoner olika färger. Det finns speciella färgväljarprogram som översätter till hex-koder. Funktionen finns även inbyggd i en del HTML-editorer.

Säkra färger

Alla datorskärmar kan inte visa alla de 16,7 miljoner färger som kan konstrueras med hex-koder. Till exempel så kan många PC-skärmar bara visa 216 färger och många Mac-skärmar kan bara visa 256 färger. Vissa äldre färgskärmar kan visa så få som 16 olika färger.

Om man har använt en färg som skärmen inte kan visa så tar datorn antingen den som den tycker ligger närmast, eller så försöker den rastrera fram färgen (s.k. dither). Inget av dessa alternativ är speciellt aptitligt, så det kan vara bra att hålla sig till det lägsta antal färger som är vanligt, d.v.s. 216.

De färger som anges med de sexton färgnamnen ovan kan visas korrekt på de flesta skärmar som kan visa 16 färger eller fler. Det finns också listor på "säkra" färger som visas korrekt på 216- och 256-färgersskärmar. Läs mer om vilka färger som fungerar och varför här

God kontrast

En varning kan vara på sin plats här: att röd text på röd botten inte syns inses lätt, men tänk även på att andra färgkombinationer kan vara totalt oläsliga. Och även om det ser bra ut på din skärm, så kan det se hemskt ut på en skärm som inte kan visa lika många färger. Saknas den aktuella färgen i användarens dators system byter webbläsaren den mot en annan, mer eller mindre liknande färg. Tänk också på att cirka 10 procent av den manliga befolkningen är färgblind. God kontrast mellan bakgrund och text är allstå viktigt. Ett gammalt tv-tekniker-knep är att titta på sidan i svart/vitt. Är texten läsbar med skärmen i svart/vitt-läge så ser det oftast bra ut i färg också.

Färgval för hela sidan

Ett sätt att ange färginställningar som gäller hela sidan är att ange ett antal attribut till styrkoden <BODY>. Man kan ange enfärgad eller mönstrad bakgrund, och färg för text och länkar. Framöver, när fler webbläsare stöder det, bör man inte använda detta sätt att ange färginställningar, utan istället använda style sheets (se detta avsnitt).

Notera att användaren kan ange andra färger i sin webbläsares inställningar, som då får företräde framför de färger du har valt.

BGCOLOR="#00FF66"
Anger sidans bakgrundsfärg.
TEXT="#00FF66"
Anger färgen på all vanlig text på sidan.
LINK="#00FF66"
Anger färgen på alla ej besökta länkar på sidan.
VLINK="#00FF66"
Anger färgen på alla besökta länkar på sidan (visited link).
ALINK="#00FF66"
Anger färgen i det ögonblick man klickar på länken (activated link).
BACKGROUND="bild.gif"
Anger en bakgrundsbild som repeteras över sidan. Se till att bilden är lämpad för detta, t.ex. att mönstret går skarv i skarv. Vanliga bakgrundsbilder är ljusa mönster som till exempel kan ge intrycket av att sidan är skriven på gammalt linnepapper eller en träskiva. Använd inte den här funktionen om texten blir svårläst. Det krävs en mycket diffus och svag bild för att den ska fungera som bakgrund. Är du tveksam, använd inte bilden. Ju större bild desto längre tid tar det att hämta bilden över nätet, och ju mindre bild desto längre tid tar det för användarens dator att rita upp sidan.
Vill man ange flera av dessa tillval så anger man dem efter varandra med mellanslag emellan: <BODY BGCOLOR="#00FF66" TEXT="#000000" LINK="#0000FF">

Om man anger TEXT och LINK bör man även ange BGCOLOR, ALINK och VLINK. Om man inte gör det kan texten bli svår eller omöjlig att läsa hos de användare som har ställt in egna bakgrunds- och länkfärger i sina webbläsare, eftersom man riskerar att få t.ex. röd text på röd bakgrund.

Färgval för delar av sidan

Ett sätt att ange färginställningar för vissa bitar av texten är att ange COLOR som attribut till <FONT> (se avsnittet om strukturerad text). Det gamla sättet för att bestämma en viss bakgrundsfärg för en tabell eller en cell i en tabell är att ange BGCOLOR som attribut till styrkoderna <TABLE> respektive <TD>.

Framöver, när fler webbläsare stöder det, bör man inte använda detta sätt att ange färginställningar, utan istället använda style sheets (se detta avsnitt).

<<< Förra avsnittet Innehåll Nästa avsnitt >>>

Copyright © Anders Hultman 1998-02-21