Redigerer Webfarger

{{Kildeløs}}

'''Webfarger''', også kalt '''HTML-farger''' eller '''heksadesimalfarger''', er koder som benyttes til design av [[nettside]]r og som nettleseren konverterer til [[RGB]]-verdier. Hovedsakelig er dette sekssifrede [[heksadesimaltall|heksadesimal]]er.

==Eksempel==
Koden #0369CF er bygget opp på denne måten:
{|class="wikitable"
|rowspan="7" style="background-color: #0369CF; color: #FFF"|#0369CF
|colspan="2"|#
|Definerer at dette er en fargekode.
|-
|0
|rowspan="2"|03
|rowspan="2"|Definerer rødfargen.<br />Tilsvarer RGB-verdien 3.
|-
|3
|-
|6
|rowspan="2"|69
|rowspan="2"|Definerer grønnfargen.<br />Tilsvarer RGB-verdien 105.
|-
|9
|-
|C
|rowspan="2"|CF
|rowspan="2"|Definerer blåfargen.<br />Tilsvarer RGB-verdien 207.
|-
|F
|}

==Hvordan koden virker==

Når vi skal forstå Heksadesimalsystemet kan vi tenke oss at vi har tre spaker.

* Spake 1 styrer de 2 første sifrene som er fargen rød. 00 er minst (avslått) og FF er mest (skrudd på fullt)

* Spake 2 styrer de 2 midterste sifrene som er fargen grønn.

* Spake 3 styrer de 2 siste sifrene som er fargen blå.

=== Fra rød til lilla ===
Hvis vi skyver spake 1 på fullt får vi fargen rød. Når vi skyver spake 3 endrer vi fargen mot lilla.
<!-- Begynnelse av spalter -->
{| width="360px" cellspacing="0" cellpadding="0"
|-
| width="120px" style="vertical-align:bottom" |
[[Rødt (farge)|Rød]]: #FF0000.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF0000; color: #FF0000"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 00
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Rosa]]: #FF0080.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF0080; color: #FF0080"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 00
| style="width: 30px;" | 80
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Lilla]]: #FF00FF.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF00FF; color: #FF00FF"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 00
| style="width: 30px;" | FF
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Slutt spalter -->
|}

=== Fra rød til gul ===<!-- Begynnelse av spalter -->
{| width="360px" cellspacing="0" cellpadding="0"
|-
| width="120px" style="vertical-align:bottom" |
[[Rødt (farge)|Rød]]: #FF0000.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF0000; color: #FF0000"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 00
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Oransje]]: #FF8000.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF8000; color: #FF8000"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 80
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Gult|Gul]]: #FFFF00.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FFFF00; color: #FFFF00"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | FF
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Slutt spalter -->
|}

=== Fra grønn til turkis ===<!-- Begynnelse av spalter -->
{| width="360px" cellspacing="0" cellpadding="0"
|-
| width="120px" style="vertical-align:bottom" |
[[Grønt|Grønn]]: #00FF00.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #00FF00; color: #00FF00"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 00 
| style="width: 30px;" | FF
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
Blågrønn: #00FF80.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #00FF80; color: #00FF80"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 00 
| style="width: 30px;" | FF
| style="width: 30px;" | 80
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Turkis (farge)|Turkis]]: #00FFFF.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #00FFFF; color: #00FFFF"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 00 
| style="width: 30px;" | FF
| style="width: 30px;" | FF
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Slutt spalter -->
|}

=== Andre farger ===<!-- Begynnelse av spalter -->
{| width="360px" cellspacing="0" cellpadding="0"
|-
| width="120px" style="vertical-align:bottom" |
[[Blått|Blå]]: #0000FF.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #0000FF; color: #0000FF"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 00 
| style="width: 30px;" | FF
| style="width: 30px;" | FF
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
Lyseblå: #8080FF.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #8080FF; color: #8080FF"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 80 
| style="width: 30px;" | 80
| style="width: 30px;" | FF
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
Lyserød: #FF8080.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FF8080; color: #FF8080"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | 80
| style="width: 30px;" | 80
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Slutt spalter -->
|}

=== Hvit til svart ===<!-- Begynnelse av spalter -->
{| width="360px" cellspacing="0" cellpadding="0"
|-
| width="120px" style="vertical-align:bottom" |
[[Hvitt|Hvit]]: #FFFFFF.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #FFFFFF; color: #FFFFFF"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | FF 
| style="width: 30px;" | FF
| style="width: 30px;" | FF
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
| _<br/>▲<br/>│<br/>│<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Grått|Grå]]: #808080.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #808080; color: #808080"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 80 
| style="width: 30px;" | 80
| style="width: 30px;" | 80
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
| _<br/>│<br/>│<br/>▲<br/>│<br/>│<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Spalteskift -->
| width="120px" style="vertical-align:bottom" |
[[Svart]]: #000000.
<!-- Begynnelse av kontrollpanel for farger -->
<!-- Først defineres tabell -->
{| class="wikitable"  style="background: #BFBFBF; color: Black; font-size:0.7em" 
|-
|colspan="3" style="width: 98px; background: #000000; color: #000000"| Fyll
<!-- Dette er overkrift raden-->
|-  style="text-align: center; background: lightblue; color: black"
| style="width: 30px;" | 00 
| style="width: 30px;" | 00
| style="width: 30px;" | 00
<!-- Første rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
| _<br/>│<br/>│<br/>│<br/>│<br/>▲<br/>-<br/>
<!-- Andre rad -->
|- style="text-align: center; background: #E6E6FF; color: #black"
| Rød
| Grønn
| Blå
<!-- Dette er avslutningen av tabellen -->
|-
|}
<!-- Slutten av kontrollpanel for farger -->

<!-- Slutt spalter -->
|}

==Andre fargekoder==
===Forkortede fargekoder===
I kaskaderende stilark – [[Cascading Style Sheets |CSS]] – er det mulig å forkorte kodene til tre tegn. Ett tegn tilsvarer da to av det gjeldende tegnet. (For eksempel vil #39F tilsvare #3399FF.)
===RGB-verdier===
En annen mulighet i [[Cascading Style Sheets |CSS]] er å oppgi den gjeldende [[RGB]]-verdien til fargen. Det gjøres på denne måten:
 rgb(<span style="color: #F00">3</span>, <span style="color: #0F0">105</span>, <span style="color: #00F">207</span>)
===Fargenavn===
Noen utvalgte farger ([[X11]]-webfarger) kan oppgis med fargens [[engelsk]]e navn, eksempelvis slik: 
{| class="wikitable" style=" cellpaddind: 2; background= #DEDEDE"
|-
|- Style=" background: white"
| White || #FFFFFF
|- Style=" background: Yellow"
| Yellow || ##FFFF00
|- Style=" background: Lightblue"
| ''Lightblue''|| #ADD8E6
|-
|}

* [[Webfarger (sortert etter navn)|Se liste over webfarger sortert etter navn]]

==Websikre farger==
De 216 fargene som inneholder heksadesimalene 00, 33, 66, 99, CC og FF (som tilsvarer RGB-verdiene 0, 51, 102, 153, 204 og 255), betegnes som websikre, det vil si at [[programmerer]]<nowiki/>en som legger inn webkodene som tilsvarer disse fargene, kan forutsi med stor sikkerhet hvilke farger som vil vises på vedkommende [[nettside]] eller i vedkommende [[app]]. Det må likevel alltid tas forbehold for at ulike [[Skjerm (monitor)|dataskjerm]]<nowiki/>er og mobilskjermer kan gjengi farger forskjellig.

* [[Webfarger (websikker)|Se liste over websikre webfarger]]

==Fargetabeller==
Heksadesimalsystemet tillater et utvalg av 16 777 216 forskjellige fargenyanser. Alt etter formålet, kan man gjøre utvalg og sortere fargene etter flere metoder, som i følgende lister:

* [[Webfarger (sortert etter navn)|Liste over webfarger sortert alfabetisk etter navn]]
* [[Webfarger (sortert etter farge)|Liste over webfarger sortert etter farge]]
* [[Webfarger (sortert etter rød)|Liste over webfarger sortert etter rødt]]
* [[Webfarger (sortert etter grønn)|Liste over webfarger sortert etter grønt]]
* [[Webfarger (sortert etter blå)|Liste over webfarger sortert etter blått]]
* [[Webfarger (websikker)|Liste over websikre webfarger]]
==Se også==
* [[Additiv fargesyntese]]
* [[RGB]]
* [[Heksadesimaltall]]
* [[Cascading Style Sheets]]
* [[Nettside]]
* [[Internett]]

== Referanser ==
<references />
{{Portal|Internett}}
{{Autoritetsdata}}

[[Kategori:W3C-standarder]]
[[Kategori:Webdesign]]
[[Kategori:Farge]]

[[eu:Wikipedia:Kolorea]]