Farger ter seg annerledes på nett enn de gjør på trykk. En farge som ser fin ut på f.eks en brosjyre, kan bli helt feil på nett. Her kan du lese litt om hva du bør vite når du skal velge farger til nettsiden din.
RGB og Hex er de to viktigste fargemodellene vi bruker for å gjengi farger på nett.
Dette er en additiv fargemodell som brukes av alt som sender ut lys, som mobilskjermer, TV-er og dataskjermer.
Hvordan det fungerer: Man starter med en svart skjerm (fravær av lys) og legger til lysstråler i rødt, grønt og blått.
Maks styrke: Når du blander alle tre fargene med full intensitet, får du hvitt lys.
Bruk: Alt digitalt innhold (nettsider, sosiale medier, video).
I CSS skriver du en RGB-farge ved å bruke funksjonen rgb(). Siden vi er i 2026, er det også verdt å merke seg at den moderne måten å skrive dette på er i ferd med å ta over, selv om den gamle fortsatt fungerer utmerket.
Her er de to vanligste måtene:
Dette er metoden de fleste kjenner til. Du oppgir verdier for Rød, Grønn og Blå på en skala fra 0 til 255. Rgba() fungerer fortsatt, men den moderne syntaksen er mer strømlinjeformet for fremtiden.
.min-boks {
color: rgb(255, 0, 0); /* Helrød */
background-color: rgb(0, 51, 102); /* Mørkeblå */
}
I nyere CSS-standarder (Level 4) har man fjernet kravet om komma. Man bruker nå bare mellomrom. Dette er den anbefalte måten å skrive det på i dag.
CSS.min-boks { color: rgb(255 0 0); }
Før brukte man rgba() for å legge til gjennomsiktighet (den siste verdien er alfa, fra 0 til 1). I dag kan du bruke vanlig rgb() til dette også:
Gammel måte:
.min-boks {
color: rgb(255, 0, 0,.5); /* Helrød 50% */
background-color: rgb(0, 51, 102,.3); /* Mørkeblå 30% */
}
Moderne måte: (Legg merke til skråstreken før prosentverdien)
.min-boks {
color: rgb(255 0 0 /0.5); /* Helrød 50% */
background-color: rgb(0, 51, 102 /0.3); /* Mørkeblå 30% */
}
HEX-koder er den mest brukte metoden for å definere farger på nettet. Mens RGB bruker tall fra 0 til 255, bruker HEX et heksadesimalt system (derav navnet) som består av en kombinasjon av seks tall og bokstaver.
En HEX-kode starter alltid med en hashtagg (#). Eksempel: #ffffff (hvit)
Koden er delt inn i tre par som representerer Rød, Grønn og Blå: #RRGGBB
Verdiene går fra 00 (ingenting) til FF (maks styrke). Siden systemet er heksadesimalt, teller man slik: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F.
/*RGB*/
.min-boks {
color: rgb(255 0 0); /* Helrød */
background-color: rgb(0, 51, 102); /* Mørkeblå*/
}
/*HEX-KODE - de samme fargene*/
.min-boks {
color: #ff0000; /* Helrød */
background-color: #003366; /* Mørkeblå */
}
Her ser du de forskjellige kodene slik de ser ut i Photoshop
Når du designer for nett, handler farger om mye mer enn bare estetikk. Det handler om brukerorientert design (UX) og tilgjengelighet (accessibility). Hvis kontrasten er for lav, vil ikke bare svaksynte slite, men også helt vanlige brukere som sitter ute i sola med mobilen sin.
For at en tekst skal være lettlest, må det være nok fargeforskjell mellom teksten og bakgrunnen. Det finnes en internasjonal standard som heter WCAG (Web Content Accessibility Guidelines).
Tips: Svart tekst på hvit bakgrunn har en kontrast på 21:1, mens lysegrå tekst på hvit bakgrunn ofte bryter loven om universell utforming.
Her ser du eksempel på god og dårlig kontrast
Selv om høy kontrast er bra, kan for høy kontrast være slitsomt for øynene, slik som du ser på det grønne feltet over.
Farger sender umiddelbare signaler til hjernen før vi i det hele tatt har lest et ord:
For å skape en balansert nettside, kan du følge denne klassiske designregelen:
Det finnes mange verktøy på nettet der du kan teste kontrast mellom farrger. Jeg anbefaler en av disse for å sjekke om fargene dine holder mål:
Adobe Color (Contrast Checker) lar deg lime inn HEX-koder for å se om de er "AA"-godkjente. Her kan du også opprette fargetemaer, hente farger fra et bilde, se populære farger og fargetemaer.
Coolors.co er genial for å generere fargepaletter som automatisk passer sammen. Coolors er også spekket med måter å finne gode farger på.
Selv den beste fonten feiler hvis fargen er feil.
Unngå for lys grå: Det er en utbredt designtabbe å bruke lysegrå tekst på hvit bakgrunn. Det ser kanskje "minimalistisk" ut, men det er svært vanskelig å lese, spesielt på mobil i dagslys.
Sjekk kontrasten: Sørg for at det er et tydelig skille mellom tekstfargen og bakgrunnen. Du bør alltid sikte på et forhold som gjør teksten tydelig for alle.
Her er to eksempler.
Mens vi bruker RGB på nett, er CMYK (Cyan, Magenta, Yellow og Key/Black) standarden for alt som skal trykkes fysisk – som visittkort, brosjyrer og plakater.
Hvorfor dette er viktig: Når du flytter et design fra trykk til nett, må du alltid konvertere verdiene. En farge som er definert som 100% Cyan i en brosjyre, må oversettes til riktig HEX- eller RGB-kode for at den skal beholde sitt visuelle uttrykk på skjermen.
Jeg hjelper deg med å bygge en merkevare som både ser fantastisk ut og følger alle krav til universell utforming.
