webdesign och HTML

« Grunderna i HTML | Text och specialtecken »

Färger och hexadecimala färgkoder

Färger på en HTML-sida anges med det Hexadecimala talsystemet där färgen Vit anges med värdet #FFFFFF. När du använder ett bildbehandlingsprogram för att skapa bilder till din webbplats används färgsystemet RGB (Red,,Green, Blue). RGB-värdet motsvaras av ett värde i det Hexadecimala färgsystemet. Här är några exempel:


VIT RGB: 255, 255, 255 Hexadecimalt: #FFFFFF	SVART RGB: 0, 0, 0 Hexadecimalt: #000000	RÖD RGB: 255, 0, 0 Hexadecimalt: #FF0000	BLÅ RGB: 0, 0, 255 Hexadecimalt: #0000FF

Se tabell med Hexadecimala färgkoder » längst ned på denna sida.

Bakgrundsfärg

Bakgrundsfärg och andra egenskaper anges som en "stil" (style) och använder CSS (Cascading Style Sheet). När du är klar med HTML-grunderna bör du gå vidare och läsa guiderna om CSS »

CSS-formatet anges inom märket <STYLE>där formatet för varje märke anges inom block omslutna med måsvingar eller "krullparenteser" { }

Formatet anges med selektorer som anger vad som ska formateras. I vårt exempel är det <BODY> som är selektor och ska ha egenskapen för bakgrundsfärg. Selektorer och format anges inom kommentarsstecken 

I exemplet nedan anges att <BODY> ska CSS-formateras för bakgrundsfärg:

<html>
<head>
<title>Min webbplats</title>
<style type="text/css">

</style>
</head>
<body>Det här är min första webbsida!</body>
</html>

Ange CSS-koden för bakgrundsfärgen och spara ditt dokument på nytt.

Gå tillbaka till webbläsaren och använd webbläsarens "uppdaterings-knapp" (Reload/Refresh) eller snabbkommando F5:

TIPS! Du kan använda Kalkylatorn i Windows för att omvandla RGB-värden till Hexadecimala värden.

Välj att visa Kalkylatorn i avancerat läge. Använd menyn: "Visa/Avancerad" eller "Visa/programmerare" (beroende på version av Windows):

Skriv in ditt första värde från RGB-systemet, tex 255 (R-255,G-255,B-255=VITT):

Växla till läget "HEX" i Kalkylatorn du får då Hex-värdet "FF":

Fortsätt med de andra två värdena tills du har en motsvarande Hexadecimalkod. OBS! Du gör alltså omvandlingen i tre steg och glöm inte att byta tillbaka till rätt läge på Kalkylatorn efter varje omräkning.

Färgnamn och Hexadecimala värden

Färgerna anges normalt som Hexadecimala värden men ett urval av färger kan även anges med namn:

black	silver	gray	white
maroon	red	purple	fuchsia
green	lime	olive	yellow
navy	blue	teal	aqua

Hexadecimala färger:

black = "#000000"	silver = "#C0C0C0"	gray = "#808080"	white = "#FFFFFF"
maroon = "#800000"	red = "#FF0000"	purple = "#800080"	fuchsia = "#FF00FF"
green = "#008000"	lime = "#00FF00"	olive = "#808000"	yellow = "#FFFF00"
navy = "#000080"	blue = "#0000FF"	teal = "#008080"	aqua = "#00FFFF"

#FFFFFF

#FFFFCC

#FFFF99

#FFFF66

#FFFF33

#FFFF00

#FFCCFF

#FFCCCC

#FFCC99

#FFCC66

#FFCC33

#FFCC00

#FF99FF

#FF99CC

#FF9999

#FF9966

#FF9933

#FF9900

#FF66FF

#FF66CC

#FF6699

#FF6666

#FF6633

#FF6600

#FF33FF

#FF33CC

#FF3399

#FF3366

#FF3333

#FF3300

#FF00FF

#FF00CC

#FF0099

#FF0066

#FF0033

#FF0000

#CCFFFF

#CCFFCC

#CCFF99

#CCFF66

#CCFF33

#CCFF00

#CCCCFF

#CCCCCC

#CCCC99

#CCCC66

#CCCC33

#CCCC00

#CC99FF

#CC99CC

#CC9999

#CC9966

#CC9933

#CC9900

#CC66FF

#CC66CC

#CC6699

#CC6666

#CC6633

#CC6600

#CC33FF

#CC33CC

#CC3399

#CC3366

#CC3333

#CC3300

#CC00FF

#CC00CC

#CC0099

#CC0066

#CC0033

#CC0000

#99FFFF

#99FFCC

#99FF99

#99FF66

#99FF33

#99FF00

#99CCFF

#99CCCC

#99CC99

#99CC66

#99CC33

#99CC00

#9999FF

#9999CC

#999999

#999966

#999933

#999900

#9966FF

#9966CC

#996699

#996666

#996633

#996600

#9933FF

#9933CC

#993399

#993366

#993333

#993300

#9900FF

#9900CC

#990099

#990066

#990033

#990000

#66FFFF

#66FFCC

#66FF99

#66FF66

#66FF33

#66FF00

#66CCFF

#66CCCC

#66CC99

#66CC66

#66CC33

#66CC00

#6699FF

#6699CC

#669999

#669966

#669933

#669900

#6666FF

#6666CC

#666699

#666666

#666633

#666600

#6633FF

#6633CC

#663399

#663366

#663333

#663300

#6600FF

#6600CC

#660099

#660066

#660033

#660000

#33FFFF

#33FFCC

#33FF99

#33FF66

#33FF33

#33FF00

#33CCFF

#33CCCC

#33CC99

#33CC66

#33CC33

#33CC00

#3399FF

#3399CC

#339999

#339966

#339933

#339900

#3366FF

#3366CC

#336699

#336666

#336633

#336600

#3333FF

#3333CC

#333399

#333366

#333333

#333300

#3300FF

#3300CC

#330099

#330066

#330033

#330000

#00FFFF

#00FFCC

#00FF99

#00FF66

#00FF33

#00FF00

#00CCFF

#00CCCC

#00CC99

#00CC66

#00CC33

#00CC00

#0099FF

#0099CC

#009999

#009966

#009933

#009900

#0066FF

#0066CC

#006699

#006666

#006633

#006600

#0033FF

#0033CC

#003399

#003366

#003333

#003300

#0000FF

#0000CC

#000099

#000066

#000033

#000000

Se fler exempel på färgkoder och bakgrundsfärger här Öppnas i nytt fönster (Open in new window)

Nästa guide: Text och specialtecken »

till sidans topp

Copyright © www.webdesignskolan.se
Materialet får skrivas ut och användas för personligt bruk.
Användning i undervisningssyfte är ej tillåten utan vårt tillstånd - läs mer här »