Farger

CSS har flere måter å definere farger på. Du kan bruke fargenavn, hex-koder, RGB, HSL og mer.

Hvor brukes farger?

.element {
    color: blue;              /* Tekstfarge */
    background-color: white;  /* Bakgrunnsfarge */
    border-color: gray;       /* Kantfarge */
}

Fargenavn

CSS har 140+ forhåndsdefinerte fargenavn.

color: red;
color: blue;
color: green;
color: orange;
color: purple;
color: pink;

Vanlige fargenavn

Farge	Navn	Farge	Navn
⬛	`black`	⬜	`white`
🟥	`red`	🟦	`blue`
🟩	`green`	🟨	`yellow`
🟧	`orange`	🟪	`purple`
⬜	`gray`	🟫	`brown`

Flere fargenavn

Navn	Beskrivelse
`lightblue`	Lys blå
`darkblue`	Mørk blå
`lightgray`	Lys grå
`darkgray`	Mørk grå
`lightgreen`	Lys grønn
`darkgreen`	Mørk grønn
`navy`	Marine blå
`teal`	Blågrønn
`coral`	Korall
`salmon`	Lakserosa
`gold`	Gull
`silver`	Sølv
`crimson`	Dyp rød
`tomato`	Tomatrød
`chocolate`	Sjokolade

Hex-koder

Hex-koder starter med # og har 6 tegn (eller 3 som snarvei).

color: #FF0000;  /* Rød */
color: #00FF00;  /* Grønn */
color: #0000FF;  /* Blå */

Hvordan hex fungerer

#RRGGBB
 ││││││
 ││││└┴── Blå (00-FF)
 ││└┴──── Grønn (00-FF)
 └┴────── Rød (00-FF)

00 = ingen farge (0)
FF = full farge (255)

Eksempler

Hex	Farge	Forklaring
`#FF0000`	Rød	Full rød, ingen grønn/blå
`#00FF00`	Grønn	Full grønn, ingen rød/blå
`#0000FF`	Blå	Full blå, ingen rød/grønn
`#FFFFFF`	Hvit	Alt på maks
`#000000`	Svart	Alt på null
`#FFFF00`	Gul	Rød + grønn
`#FF00FF`	Magenta	Rød + blå
`#00FFFF`	Cyan	Grønn + blå
`#808080`	Grå	Halvveis på alt

Snarvei (3 tegn)

Når begge tegnene i hver farge er like, kan du forkorte:

#FF0000  →  #F00    /* Rød */
#00FF00  →  #0F0    /* Grønn */
#FFFFFF  →  #FFF    /* Hvit */
#000000  →  #000    /* Svart */
#336699  →  #369    /* Blågrå */

RGB

RGB bruker tall fra 0-255 for rød, grønn og blå.

color: rgb(255, 0, 0);    /* Rød */
color: rgb(0, 255, 0);    /* Grønn */
color: rgb(0, 0, 255);    /* Blå */
color: rgb(255, 255, 255); /* Hvit */
color: rgb(0, 0, 0);      /* Svart */

Sammenligning med hex

Hex	RGB
`#FF0000`	`rgb(255, 0, 0)`
`#00FF00`	`rgb(0, 255, 0)`
`#0000FF`	`rgb(0, 0, 255)`
`#808080`	`rgb(128, 128, 128)`

RGBA (med gjennomsiktighet)

RGBA legger til en alfa-kanal for gjennomsiktighet (0-1).

color: rgba(255, 0, 0, 1);     /* Helt rød */
color: rgba(255, 0, 0, 0.5);   /* 50% gjennomsiktig rød */
color: rgba(255, 0, 0, 0.25);  /* 25% synlig rød */
color: rgba(255, 0, 0, 0);     /* Helt gjennomsiktig */

alfa: 1.0  ████████  Helt synlig
alfa: 0.75 ██████░░  75% synlig
alfa: 0.5  ████░░░░  50% synlig
alfa: 0.25 ██░░░░░░  25% synlig
alfa: 0    ░░░░░░░░  Helt usynlig

Vanlig bruk

/* Mørk overlay */
.overlay {
    background: rgba(0, 0, 0, 0.5);
}

/* Lett skygge */
.card {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Gjennomsiktig bakgrunn */
.glass {
    background: rgba(255, 255, 255, 0.8);
}

HSL

HSL bruker fargenyanse (Hue), metning (Saturation) og lyshet (Lightness).

color: hsl(0, 100%, 50%);    /* Rød */
color: hsl(120, 100%, 50%);  /* Grønn */
color: hsl(240, 100%, 50%);  /* Blå */

Fargehjulet (Hue)

        0° Rød
         │
  330°   │   30° Oransje
    ╲    │    ╱
      ╲  │  ╱
        ╲│╱
300° ────●──── 60° Gul
Magenta ╱│╲
      ╱  │  ╲
    ╱    │    ╲
  270°   │   120° Grønn
  Blå    │
       180° Cyan

Grad	Farge
0°	Rød
30°	Oransje
60°	Gul
120°	Grønn
180°	Cyan
240°	Blå
270°	Lilla
300°	Magenta
330°	Rosa

Metning (Saturation)

hsl(0, 100%, 50%)  /* Knall rød */
hsl(0, 50%, 50%)   /* Dempet rød */
hsl(0, 0%, 50%)    /* Grå */

100% ████  Full farge
 50% ████  Dempet
  0% ████  Grå (ingen farge)

Lyshet (Lightness)

hsl(0, 100%, 100%)  /* Hvit */
hsl(0, 100%, 75%)   /* Lys rød */
hsl(0, 100%, 50%)   /* Normal rød */
hsl(0, 100%, 25%)   /* Mørk rød */
hsl(0, 100%, 0%)    /* Svart */

100% ░░░░  Hvit
 75% ▒▒▒▒  Lys
 50% ████  Normal
 25% ▓▓▓▓  Mørk
  0% ████  Svart

Hvorfor HSL?

HSL er intuitivt for å lage fargevariasjoner:

Samme farge, lysere: øk lightness
Samme farge, mørkere: senk lightness
Mer dempet: senk saturation

HSLA

Med gjennomsiktighet:

color: hsla(0, 100%, 50%, 0.5);  /* 50% gjennomsiktig rød */

Spesielle verdier

transparent

Helt gjennomsiktig:

background: transparent;

currentColor

Arver tekstfargen:

.box {
    color: blue;
    border: 2px solid currentColor;  /* Blå border */
}

inherit

Arver fra forelderen:

.child {
    color: inherit;
}

Bakgrunnsgradienter

Linear gradient

background: linear-gradient(to right, red, blue);
background: linear-gradient(45deg, red, yellow, green);
background: linear-gradient(to bottom, #000, #fff);

Venstre til høyreTopp til bunnDiagonal

background: linear-gradient(to right, red, blue);

████████████████████████
Rød → → → → → → → → Blå

background: linear-gradient(to bottom, red, blue);

████ Rød
████  ↓
████  ↓
████ Blå

background: linear-gradient(45deg, red, blue);

Radial gradient

background: radial-gradient(circle, red, blue);
background: radial-gradient(ellipse, yellow, orange, red);

    ░░░░░░░░░░░░░░
  ░░░░▒▒▒▒▒▒▒▒░░░░
 ░░░▒▒▒████▒▒▒░░░
░░░▒▒████████▒▒░░░
 ░░░▒▒▒████▒▒▒░░░
  ░░░░▒▒▒▒▒▒▒▒░░░░
    ░░░░░░░░░░░░░░
   Midt → Kant

Vanlige fargepaletter

Nøytrale farger

--white: #FFFFFF;
--gray-100: #F7F7F7;
--gray-200: #E5E5E5;
--gray-300: #D4D4D4;
--gray-400: #A3A3A3;
--gray-500: #737373;
--gray-600: #525252;
--gray-700: #404040;
--gray-800: #262626;
--gray-900: #171717;
--black: #000000;

Bruk CSS-variabler

:root {
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --danger: #dc3545;
    --warning: #ffc107;
    --info: #17a2b8;
}

.button-primary {
    background: var(--primary);
}

.alert-danger {
    background: var(--danger);
}

Tips for fargevalg

Kontrast

Sørg for god kontrast mellom tekst og bakgrunn:

/* Bra kontrast */
.good {
    color: #000;
    background: #fff;
}

/* Dårlig kontrast */
.bad {
    color: #ccc;
    background: #ddd;
}

Tilgjengelighet

Dårlig kontrast gjør tekst vanskelig å lese, spesielt for personer med nedsatt syn.

Begrens antall farger

En god regel: 2-3 hovedfarger + nøytrale farger.

:root {
    /* Hovedfarger */
    --primary: #2563eb;
    --accent: #f59e0b;

    /* Nøytrale */
    --text: #1f2937;
    --background: #ffffff;
    --muted: #6b7280;
}

Referanse

Se CSS-referansen for en kompakt oversikt over alle fargemetoder.

Oppsummering

Metode	Syntaks	Eksempel
Navn	`fargenavn`	`red`
Hex	`#RRGGBB`	`#FF0000`
Hex kort	`#RGB`	`#F00`
RGB	`rgb(r, g, b)`	`rgb(255, 0, 0)`
RGBA	`rgba(r, g, b, a)`	`rgba(255, 0, 0, 0.5)`
HSL	`hsl(h, s%, l%)`	`hsl(0, 100%, 50%)`
HSLA	`hsla(h, s%, l%, a)`	`hsla(0, 100%, 50%, 0.5)`

Verktøy

Bruk verktøy som Coolors eller Adobe Color for å lage fargepaletter!