Find HTML-farvekoder til din hjemmeside – med farvevælger

Har du brug for en bestemt farve til din hjemmeside? Brug farvevælgeren til at finde den ønskede nuance og kopiere farven som HEX, RGB eller HSL.

Her finder du også populære HTML-farvekoder, eksempler på brug i CSS og den komplette oversigt over 216 websikre farver.

Find din HTML-farvekode

Vælg en farve eller indtast en HEX-kode. Kopiér derefter farven som HEX, RGB eller HSL.

Vælg en farve Indtast HEX-kode

Eksempel på den valgte farve

HEX #3366FF Kopiér

RGB rgb(51, 102, 255) Kopiér

HSL hsl(220, 100%, 60%) Kopiér

Populære farvekoder

Her er nogle af de mest anvendte farver til hjemmesider:

Hvad er en HTML-farvekode?

En farvekode fortæller browseren, hvilken farve et element på hjemmesiden skal have. Farvekoder kan blandt andet bruges til:

• Tekst og overskrifter
• Baggrundsfarver
• Knapper og links
• Rammer og skillelinjer
• Ikoner og grafiske elementer
• Skygger og gennemsigtige lag

Selvom de ofte kaldes HTML-farvekoder, bliver farverne på moderne hjemmesider normalt defineret med CSS:

h1 {
  color: #3366FF;
}

I dette eksempel bliver overskriftens tekst blå.

Sådan fungerer HEX-farvekoder

HEX er det mest kendte format til farver på hjemmesider. En almindelig HEX-kode begynder med # og efterfølges af seks tegn:

color: #3366FF;

Koden består af tre par:

• 33 angiver mængden af rød
• 66 angiver mængden af grøn
• FF angiver mængden af blå

Hver værdi går fra 00 til FF. 00 betyder, at farven ikke er til stede, mens FF er den højeste værdi.

Hvid består af den maksimale mængde rød, grøn og blå:

color: #FFFFFF;

Sort har ingen af de tre farver:

color: #000000;

En sekscifret HEX-kode kan beskrive 16.777.216 forskellige RGB-farver.

Korte HEX-koder

Nogle HEX-koder kan forkortes fra seks til tre tegn, når begge tegn i hvert farvepar er ens:

#FFFFFF → #FFF
#000000 → #000
#FF0000 → #F00
#336699 → #369

Browseren fortolker eksempelvis #369 som #336699.

HEX-koder med gennemsigtighed

HEX-koder kan også indeholde en alpha-værdi, som bestemmer farvens gennemsigtighed:

background-color: #3366FF80;

De sidste to tegn, 80, angiver gennemsigtigheden. Koden skaber derfor en delvist gennemsigtig blå farve.

HEX-farver kan have følgende længder:

• #RGB – kort farvekode
• #RGBA – kort farvekode med gennemsigtighed
• #RRGGBB – almindelig farvekode
• #RRGGBBAA – farvekode med gennemsigtighed

RGB og RGBA

RGB står for red, green og blue. Hver farve angives med en værdi mellem 0 og 255:

color: rgb(51, 102, 255);

Det giver den samme blå farve som HEX-koden #3366FF.

Hvis farven skal være gennemsigtig, kan du tilføje en alpha-værdi:

background-color: rgb(51 102 255 / 50%);

Den traditionelle RGBA-skrivemåde kan også bruges:

background-color: rgba(51, 102, 255, 0.5);

HSL og HSLA

HSL står for hue, saturation og lightness – på dansk nuance, mætning og lysstyrke:

color: hsl(220, 100%, 60%);

Værdierne betyder:

• Hue: Farvens placering på farvehjulet fra 0 til 360 grader
• Saturation: Farvens mætning fra 0 til 100 procent
• Lightness: Farvens lysstyrke fra 0 til 100 procent

HSL er særligt praktisk, når du vil skabe lysere og mørkere varianter af den samme farve:

:root {
  --blue-light: hsl(220, 100%, 75%);
  --blue: hsl(220, 100%, 60%);
  --blue-dark: hsl(220, 100%, 35%);
}

Du kan også tilføje gennemsigtighed:

background-color: hsl(220 100% 60% / 50%);

Sådan bruger du farvekoder i CSS

Her er et eksempel på en hjemmeside med en lys baggrund, mørk tekst og blå knapper:

body {
  background-color: #F7F8FA;
  color: #222222;
}

h1,
h2 {
  color: #2457C5;
}

a {
  color: #0066CC;
}

button {
  background-color: #2457C5;
  color: #FFFFFF;
  border: 0;
}

button:hover {
  background-color: #183F96;
}

Farver kan også indsættes direkte i HTML:

<p style="color: #FF0000;">Denne tekst er rød.</p>

Det er dog normalt bedre at samle farverne i en CSS-fil. Det gør hjemmesidens design lettere at vedligeholde.

Brug CSS-variabler til dine farver

Hvis den samme farve bruges flere steder, kan den gemmes som en CSS-variabel:

:root {
  --color-primary: #2457C5;
  --color-primary-dark: #183F96;
  --color-text: #222222;
  --color-background: #F7F8FA;
  --color-border: #D9DEE7;
}

body {
  color: var(--color-text);
  background-color: var(--color-background);
}

button {
  color: #FFFFFF;
  background-color: var(--color-primary);
}

Hvis den primære farve senere skal ændres, behøver du kun at rette koden ét sted.

Sådan vælger du en god farvepalette

En professionel hjemmeside behøver sjældent mange forskellige farver. En enkel farvepalette kan bestå af:

1. En primær farve til logo, knapper og vigtige elementer
2. En sekundær farve til variation
3. En accentfarve til særlige handlinger
4. Neutrale farver til tekst, baggrunde og rammer
5. Statusfarver til succes, advarsler og fejl

Her er et eksempel:

Brug farverne konsekvent. Hvis grøn eksempelvis bruges til at vise en gennemført handling, bør den ikke samtidig bruges til fejlmeddelelser.

Husk kontrast og læsbarhed

En flot farve er ikke nødvendigvis en god tekstfarve. Der skal være tilstrækkelig kontrast mellem tekst og baggrund, så indholdet er let at læse.

Mørkegrå eller sort tekst på en lys baggrund er ofte et sikkert valg til længere tekster. Hvid tekst kan fungere godt på mørke knapper og farvede felter, hvis baggrunden er mørk nok.

Brug heller ikke kun farver til at formidle vigtig information. En fejlmeddelelse kan eksempelvis have en rød farve, et ikon og en forklarende tekst.

Sådan finder du en farvekode fra et billede

Hvis du vil finde farvekoden fra et logo, billede eller skærmbillede, kan du bruge en digital pipette.

Sådan gør du:

1. Åbn eller upload billedet.
2. Vælg pipetteværktøjet.
3. Klik på den ønskede farve.
4. Kopiér HEX-, RGB- eller HSL-koden.
5. Indsæt koden i din CSS.

Den samme farve kan se lidt forskellig ud afhængigt af skærm, lysstyrke og de omkringliggende farver. Kontrollér derfor altid designet på både computer, tablet og mobil.

Komplet liste over 216 websikre farver

De 216 websikre farver blev udviklet i en tid, hvor computerskærme og browsere kunne vise langt færre farver end i dag.

Paletten bruger seks mulige værdier for hver af de tre RGB-kanaler:

00, 33, 66, 99, CC og FF.

Seks værdier for rød, seks for grøn og seks for blå giver tilsammen 216 farvekombinationer.

Moderne skærme og browsere kan vise millioner af farver, så du behøver ikke længere begrænse dit design til denne palette. Oversigten er stadig nyttig som historisk reference og som et hurtigt visuelt opslagsværk.

Find den rigtige farvekode

HTML-farvekoder gør det muligt at styre farverne på din hjemmeside præcist. HEX er det mest udbredte format, mens RGB og HSL giver ekstra fleksibilitet.

Brug farvevælgeren eller farveoversigten til at finde den ønskede kode. Vælg derefter en enkel og sammenhængende farvepalette, brug farverne konsekvent, og sørg for god kontrast mellem tekst og baggrund.