4 måter å definere farger i CSS

Viktige takeaways

• Bruke fargenavn: CSS gir 145 fargenavn for enkelt og nybegynnervennlig fargevalg, men alternativene er begrensede og oppfyller kanskje ikke nøyaktige designbehov.
• Heksadesimale fargekoder: Heksadesimale koder tilbyr et bredt spekter av fargealternativer og presis tilpasning, selv om de kan være mindre intuitive å bruke og huske.
• RGB- og RGBA-fargeverdier: RGB gir nøyaktig fargekontroll med numeriske verdier, mens RGBA legger til gjennomsiktighet. Det er viktig å sikre tilgjengelige fargekombinasjoner.

Farger er blant de mest brukte CSS-attributtene, og spiller en viktig rolle i å forme et nettsteds visuelle identitet, humør og brukeropplevelse. CSS tilbyr en rekke valg for bruk av farger, hver skreddersydd til spesifikke designbehov og preferanser.

Selv om det er lett å overse viktigheten av fargedefinisjon, kan valgene dine påvirke nettstedets utseende og følelse betydelig. Å utforske forskjellene mellom ulike metoder og hvordan du praktisk anvender og kombinerer dem, vil forbedre din evne til å lage visuelt tiltalende nettsteder.

1. Bruke fargenavn

CSS gir en praktisk måte å definere farger ved å bruke navn, og det er 145 tilgjengelige alternativer. Disse fargenavnene spenner fra enkle "røde", "grønne" og "blå" til mer spesifikke nyanser som "korall" eller "lavendel."

Å bruke navngitte farger er enkelt: du velger et fargenavn som "rød" og bruker det i en CSS-egenskap som støtter fargeverdier. Slik egenskaper inkluderer det åpenbare farge og bakgrunnsfarge, men også grensefarge, konturfarge, og tekst-skygge, blant andre.

Fargenavn er nyttige når du trenger en midlertidig farge for prototyping eller ønsker å holde koden din lett å lese. Her er syntaksen:

color_property: color_name;

I dette tilfellet er det bare å bytte ut fargenavn med den spesifikke fargen du ønsker å bruke. For eksempel hvis du vil angi teksten farge av et avsnitt til rød, skrive:

p {
color: red;
}

Dette vil gi avsnittene dine en rød tekstfarge:

Fordeler: De er enkle å lese og forstå i CSS-koden din. De er nybegynnervennlige, fungerer godt på tvers av nettlesere og er nyttige for raske designideer.

Ulemper: De har begrensede alternativer og tilbyr kanskje ikke de nøyaktige nyansene du trenger, noe som begrenser designkreativiteten. I tillegg oppfyller de kanskje ikke alltid strenge tilgjengelighetskrav, og støtten i eldre systemer kan variere.

2. Heksadesimale fargekoder

Heksadesimale fargekoder, ofte referert til som "hex-koder", er de vanligste metodene for å spesifisere farger i webdesign. Disse kodene består av seks-tegns kombinasjoner av tall og bokstaver (0-9, A-F), som representerer blandingen av røde, grønne og blå (RGB) komponenter i en farge.

Selv om de er enkle å bruke, kan det være utfordrende å forstå hvordan de fungerer. Du kan ta et dypdykk i hex-koder å forstå bedre. Her er et grunnleggende eksempel på hvordan du kan bruke hex-koder i CSS:

color: #RRGGBB;

I dette formatet representerer RR, GG og BB henholdsvis de røde, grønne og blå komponentene. Hver komponent kan variere fra 00 (ingen intensitet) til FF (maksimal intensitet). For eksempel, hvis du vil sette bakgrunnsfargen til en nettsideoverskrift til en bestemt nyanse av blått, kan du bruke en sekskantkode som dette:

header {
background-color: #336699;
}

Dette vil produsere en dyp blå farge:

​​​​​

Du kan også bruke en stenografi hvis hver av de tre komponentene gjentar samme tegn to ganger. Du kan skrive eksempelet ovenfor som:

header {
background-color: #369;
}

Fordeler: Heksadesimale fargekoder gir et bredt spekter av fargealternativer, slik at du kan generere detaljerte og tilpassede nyanser. De gir jevn kontroll over fargevalg, noe som gjør dem ideelle for komplekse designkrav.

Ulemper: Selv om hex-koder er kraftige, kan de være mindre intuitive enn navngitte farger. Du kan også støte på utfordringen med å huske spesifikke fargeverdier. Heldigvis, verktøy for å finne hex-kodene til farger du kommer over er tilgjengelig, noe som gjør prosessen mer håndterlig.

3. RGB- og RGBA-fargeverdier

I likhet med heksadesimale koder lar dette formatet deg spesifisere farger etter deres røde, grønne og blå komponenter. Denne gangen kan du imidlertid bruke vennligere heltall.

RGB-fargeverdier

RGB-fargeverdier er den nest mest brukte metoden for å definere farger i CSS. "RGB" representerer rødt, grønt og blått, uttrykt som en CSS-funksjon med parenteser etter den. Innenfor parentesen tilordner du verdier til hver fargekanal, fra 0 til 255. Dette lar deg kontrollere intensiteten til rødt, grønt og blått i fargen du vil bruke.

Her er syntaksen:

rgb(red_value, green_value, blue_value);

Erstatte rød_verdi, grønn_verdi, og blå_verdi med sine respektive numeriske verdier. Du kan for eksempel oppnå hvite, svarte og røde farger som de som vises i dette bildet:

Når du setter alle tre fargekanalene (rød, grønn og blå) til deres maksimale verdi på 255, resulterer det i den høyeste intensiteten for hver kanal, og skaper fargen hvit:

.white-box {
 color: rgb(255, 255, 255);
}

Når du setter alle tre fargekanalene til minimumsverdien 0, representerer det fraværet av farge i hver kanal, noe som resulterer i svart.

.black-box {
color: rgb(0, 0, 0);
}

Ved å sette den røde kanalen til maksimumsverdien 255, mens de andre kanalene holdes på minimumsverdien 0, får du fargen rød:

.red-box {
color: rgb(255, 0, 0); 
}

RGBA-fargeverdier

RGBA fungerer på samme måte som RGB, den eneste forskjellen er inkluderingen av en alfaverdi. "A" i RGBA står for alfa, som bestemmer nivået av gjennomsiktighet eller opasitet for den valgte fargen. En verdi på 0 representerer fullstendig gjennomsiktighet, noe som gjør fargen helt usynlig, mens en verdi på 1 representerer full opasitet, noe som gjør fargen fullt synlig.

RGBA er spesielt nyttig når du vil lage elementer med ulike nivåer av gjennomsiktighet, for eksempel gjennomskinnelig bakgrunn eller falmet tekst. Hele syntaksen er:

color: rgba(red_value, green_value, blue_value, alpha_value);

Her, rød_verdi, grønn_verdi, og blå_verdi representerer fargekanalene som i RGB, og alfa_verdi spesifiserer nivået av åpenhet.

div {
background-color: rgba(0, 128, 0, 0.5);
}

I dette eksemplet tildeler alfaverdien 0,5 50 % gjennomsiktighet til den grønne fargen, slik at innholdet under den kan vises gjennom:

Fordeler: RGB og RGBA lar deg kontrollere farger nøyaktig, noe som gjør det enklere å velge presise nyanser og lage visuelt attraktive design. De er kompatible med ulike nettlesere, og sikrer at fargene du har valgt ser konsistente ut.

Ulemper: Utfordringen ligger i å sikre tilgjengelige fargekombinasjoner. Det er avgjørende å være oppmerksom på kontrastforhold, hovedsakelig når du arbeider med gjennomsiktighet i RGBA. WCAG-retningslinjene kan hjelpe du sikrer at designet ditt er tilgjengelig.

4. HSL og HSLA fargeverdier

HSL – forkortelse for Hue, Saturation og Lightness – er en annen CSS-funksjon som definerer farger. På samme måte som RGB, bruker HSL numeriske verdier for å representere farger, men det gjør det annerledes. Du er kanskje kjent med HSL-verdier fra UI-komponenter i designapper og andre steder.

Hue: Dette representerer selve fargen ved å bruke grader på et fargehjul, fra 0 til 360. Se for deg det som å velge et punkt på en sirkel, der hver grad tilsvarer en annen farge. For eksempel 0 og 360 grader for rødt, 120 grader for grønt og 240 grader for blått.

Metning: Metning bestemmer fargens livlighet eller intensitet. Den definerer fargens forhold til grått, hvor 0 % er fullstendig gråtone (desaturet) og 100 % er fullstendig mettet (levende og ren).

Letthet: Lyshet representerer hvor lys eller mørk fargen ser ut. Det er relatert til fargens plassering på spekteret mellom svart (0 %) og hvit (100 %). En verdi på 50 % representerer den normale fargen, mens verdier under 50 % gjør fargen mørkere, og verdier over 50 % gjør den lysere.

I tillegg til HSL, er det HSLA, der "A" står for "alfa". Dette ligner på "A" i RGBA og betyr åpenhet.

Her er syntaksen:

color: hsl(hue_value, saturation_percentage, lightness_percentage);

Bruk denne syntaksen, erstatt fargetone_verdi, saturation_prosent, og lightness_prosent med de spesifikke verdiene du ønsker for hver komponent. For eksempel:

div {
background-color: hsl(120, 100%, 50%);
}

I dette eksemplet er bakgrunnsfargen til en div element er satt til en levende grønn ved hjelp av HSL-verdier. 120 representerer fargetonen (grønn), 100 % er for full metning, og 50 % setter lysheten til et balansert nivå.

Fordeler: HSL og HSLA tilbyr allsidige fargeberegninger ved bruk av egendefinerte CSS-egenskaper. De er svært kompatible med moderne nettlesere og muliggjør enkle justeringer av fargelyshet.

Ulemper: Å lære HSL innebærer forstå fargevitenskap, som fargetoner og metninger, som kan være mer utfordrende enn de kjente RGB-fargene.

Omfavne kraften til CSS-farger

Det er flere metoder du kan sjekke, og mens du utforsker de forskjellige formatene for å definere farger i CSS, husk at du har makten til å forme nettstedets utseende, humør og brukeropplevelse.

Ditt valg av fargeformat – enten det er enkle fargenavn, heksadesimale koder, RGB eller HSL – kan påvirke hvordan publikum oppfatter nettstedet ditt. Så eksperimenter, lær og finn fargedefinisjonene som passer best til dine designmål.