Du har satt bakgrunnsfargen til "blue" og fått en skrikende primærblå som ser ut som den hører hjemme i 1998. Du vil ha en dempet, profesjonell blåtone, men CSS-nøkkelordet gir deg null kontroll over nyansen. For å treffe akkurat den fargen du ser for deg, trenger du et fargesystem som lar deg finjustere hver komponent. CSS gir deg tre: hex, rgb og hsl. Alle kan lage de samme fargene, men de fungerer ulikt i praksis.
Farger i CSS med nøkkelord
CSS har rundt 150 innebygde fargenavn som red, steelblue, coral og transparent. Du kan bruke dem rett i koden, for eksempel color: tomato. Fordelen er at koden blir lettlest. Ulempen er at du er begrenset til akkurat de fargene som har fått et navn.
Nøkkelord fungerer fint for prototyping og raske tester. Men i et ferdig design trenger du nesten alltid en spesifikk farge som ikke finnes blant nøkkelordene. Da trenger du hex, rgb eller hsl.
Hex-verdier: den vanligste notasjonen
Hex er det du ser oftest i CSS-kode og designverktøy. En hex-verdi starter med # og inneholder seks tegn: #RRGGBB. De to første tegnene styrer rødt, de to neste grønt, og de to siste blått. Hvert par bruker en skala fra 00 til FF, der 00 betyr ingen intensitet og FF betyr full styrke.
Skalaen bruker heksadesimale tall: 0-9 som vanlig, deretter A-F for verdiene 10-15. Så #000000 er svart (alt av), #FFFFFF er hvit (alt på), og #FF0000 er ren rød (fullt rødt, ingen grønn, ingen blå).
En vanlig feil er å behandle hex-verdier som vilkårlige koder du bare kopierer fra et designverktøy. Forstår du strukturen, kan du gjøre raske justeringer direkte i koden. Ser du #3366CC, vet du umiddelbart at fargen har mye blått (CC), en god del grønt (66) og minst rødt (33). Vil du gjøre den lysere, øker du alle verdiene. Vil du gjøre den mer blågrønn, øker du grønnkanalen.
Har du en hex-verdi der begge tegnene i hvert par er like, kan du forkorte den. #AABBCC kan skrives #ABC. Nettleseren dobler hvert tegn automatisk. Dette fungerer bare når alle tre par har doble tegn.
RGB: farger i tallverdier
RGB-funksjonen bruker samme logikk som hex, men med desimaltall. I stedet for hex-par angir du tre verdier fra 0 til 255: rgb(0, 0, 255) gir ren blå. Første tall er rødt, andre er grønt, tredje er blått.
Fordelen med RGB over hex er lesbarhet. De fleste synes det er enklere å forstå at rgb(51, 102, 204) har dobbelt så mye blått som grønt, enn å parse #3366CC i hodet. Tallene er lettere å sammenligne og justere.
RGB støtter også gjennomsiktighet med en fjerde verdi: rgb(0, 0, 255, 0.5) gir halvtransparent blå. Verdien går fra 0 (helt gjennomsiktig) til 1 (helt synlig). Du finner også den eldre notasjonen rgba(), men moderne CSS behandler rgb og rgba likt.
HSL: tenk som en designer
HSL er det mest intuitive fargesystemet for mennesker. Det står for Hue (fargetone), Saturation (metning) og Lightness (lyshet). I stedet for å mikse rødt, grønt og blått, velger du en farge på fargehjulet og justerer hvor ren og lys den skal være.
Hue er en vinkel fra 0 til 360. Tenk deg et fargehjul: 0 er rødt, 120 er grønt, 240 er blått, og 360 er tilbake til rødt. Saturation angir hvor ren fargen er, fra 0% (gråtone) til 100% (full farge). Lightness styrer lysheten, fra 0% (svart) via 50% (ren farge) til 100% (hvit).
Fordelen med HSL er at du kan lage hele fargepaletter ved å holde hue konstant og variere saturation og lightness. Vil du ha en lys variant av blåfargen din? Øk lightness. Vil du ha en dempet versjon? Senk saturation. Trenger du en komplementærfarge? Legg til 180 på hue. Denne logikken er vanskelig å gjenskape med hex eller RGB.
HSL støtter gjennomsiktighet på samme måte som RGB: hsl(240, 100%, 50%, 0.5) gir halvtransparent blå.
Hvilken metode bør du bruke?
Alle tre metodene kan produsere nøyaktig samme farger i CSS. #0000FF, rgb(0, 0, 255) og hsl(240, 100%, 50%) gir identisk blått. Valget handler om arbeidsflyten din.
Hex er standarden i de fleste designverktøy. Figma, Sketch og Adobe-produkter gir deg hex-verdier som du kopierer rett inn i CSS. For de fleste prosjekter er hex det enkleste valget fordi du slipper å konvertere.
HSL er best når du bygger et fargesystem fra bunnen av. Du kan definere en primærfarge som hsl(220, 80%, 50%) og lage varianter bare ved å justere lightness: hover-tilstand på 45%, disabled-tilstand på 70%, bakgrunn på 95%. Med CSS custom properties kan du gjøre dette til et fleksibelt system.
RGB er nyttig når du trenger gjennomsiktighet og ønsker tydelig kontroll over de individuelle kanalene. I praksis bruker mange utviklere hex for faste farger og rgb eller hsl når de trenger transparens.
Bakgrunnsfarge og tekstfarge
De to vanligste stedene du bruker farger i CSS er background-color for bakgrunn og color for tekst. Begge godtar alle fargeformatene. En typisk feil er å sette bakgrunnsfarge uten å tenke på kontrasten mot teksten. Hvit tekst på lys bakgrunn er uleselig, og det bryter med retningslinjene for tilgjengelighet (WCAG).
Farger i CSS påvirker også border-color, outline-color og box-shadow. Forstår du boksmodellen, ser du hvordan disse egenskapene henger sammen. Fargekontroll er en grunnstein i CSS som du bruker overalt.
Neste steg
Nå som du forstår fargesystemene i CSS, er neste steg å lære om måleenheter som px, rem og prosent, som styrer størrelsen på elementene du farger. Vil du forstå hvordan CSS-regler faktisk treffer elementene dine, gir artikkelen om CSS-selektorer deg det grunnlaget.
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du også om CSS custom properties for å bygge fleksible fargesystemer, gradienter for jevne fargeoverganger, og hvordan du sikrer god kontrast i designet ditt.
