Artikkel
Fargeverktøy for nettet: hex, paletter og tilgjengelighet
Å velge farger til et nettsted ser enkelt ut helt til du står overfor hex-koder, RGB-tripletter og HSL-vinkler som alle beskriver det samme på ulike måter. Denne artikkelen forklarer hvordan formatene henger sammen, hvordan du gjør en enkelt merkevarefarge til en brukbar palett, og hvordan du sikrer at resultatet forblir lesbart for folk som ser farger annerledes.
Hex, RGB og HSL beskriver samme farge
En farge på skjermen blandes av rødt, grønt og blått lys. Hex-notasjon skriver disse tre kanalene som en kode på seks tegn, for eksempel #2563eb, der hvert tegnpar er én kanal fra 00 til ff. RGB skriver de samme tre tallene i desimalform, fra 0 til 255, som er lettere å lese, men sier ikke noe mer. HSL tar en annen vinkel: den beskriver en farge med fargetonen (en posisjon på fargesirkelen fra 0 til 360 grader), metningen (hvor livlig den er) og lysheten (hvor nær hvitt eller svart den ligger). HSL er formatet designere griper til når de vil dytte litt på en farge, fordi å heve lysheten eller flytte fargetonen er én intuitiv endring i stedet for tre koblede tall. Et konverteringsverktøy lar deg bevege deg mellom alle tre, slik at du kan lese en verdi i ett format og bruke den i et annet.
Å lage en palett av én farge
En enkelt merkevarefarge er sjelden nok. En palett som fungerer trenger vanligvis en primærfarge, en eller to aksenter og et sett med nøytrale gråtoner for tekst og bakgrunner. Forholdene mellom farger følger enkle regler på fargesirkelen: komplementærfarger ligger rett overfor hverandre, analoge farger ligger ved siden av hverandre for en rolig følelse, og en triade sprer tre farger jevnt for kontrast uten at de skurrer. Et verktøy for fargeskjemaer bruker disse reglene på utgangsfargen din og gir deg de tilhørende hex-kodene, slik at du ikke trenger å regne ut vinklene for hånd. Hvis du allerede har et bilde du liker stemningen i, leser en palettuttrekker de dominerende fargene ut av det, noe som er en rask måte å bygge et nettsted på ut fra et foto eller en logo.
Kontrast og fargeblindhet
En palett som ser bra ut på skjermen din kan likevel svikte lesere. Omtrent én av tolv menn og én av to hundre kvinner har en form for nedsatt fargesyn, oftest vansker med å skille rødt fra grønt. Hvis ditt eneste signal for en feil er rød tekst på en grønn knapp, går de leserne glipp av den. Løsningen er ikke å unngå farge, men å aldri stole på farge alene: kombiner den med et ikon, en etikett eller en form, og hold nok lyshetskontrast mellom tekst og bakgrunnen dens. En fargeblindhetssimulator viser deg hvordan paletten din ser ut under de vanlige typene fargesyn, slik at du kan fange opp et problem før det lanseres i stedet for etter en klage.
Å gjøre alt dette i nettleseren
Ingen av disse trinnene trenger en server. Å konvertere en hex-kode, generere et skjema, lese farger ut av et bilde og simulere fargeblindhet er alle små beregninger som en nettleser håndterer umiddelbart. Det betyr noe når bildet du tar prøver fra er et uutgitt design eller en kundelogo: med verktøyene her blir filen liggende på enheten din, og ingenting lastes opp. Du får samme resultat som du ville fått fra en nettjeneste, uten å gi fra deg materialet. Fargekonverteren, fargeskjemageneratoren, palettuttrekkeren og fargeblindhetssimulatoren kjører alle lokalt og fungerer på samme måte uten nett når siden først er lastet.
OKLCH og bredere fargerom
Hex, RGB og HSL beskriver alle farger innenfor sRGB-omfanget som skjermer har brukt i årevis. Nyere skjermer viser mer, og CSS kan nå nå det med color()-funksjonen og Display P3-rommet, som legger til livlige grønner og røde som sRGB ikke kan gjengi. Det større skiftet er OKLCH, en måte å skrive farge som lyshet, chroma og fargetone som samsvarer med hvordan øyet faktisk oppfatter lysstyrke. I HSL ser en gul og en blå farge med samme 50 % lyshet helt forskjellige ut: den gule oppleves lys, den blå oppleves mørk. I OKLCH holder lyshet seg stabilt når du bare bytter fargetone. Det gjør det praktisk å bygge en palett der hvert fargenivå treffer det samme kontrastmålet ved å låse ett tall, i stedet for å justere hver farge for hånd.
Verktøy i denne artikkelen
- FargekonvertererKonverter farger mellom HEX, RGB, HSL, HSV og CMYK. WCAG-kontrastkontroll inkludert. Ingen opplasting.
- FargeskjemagenereratorGenerer komplementære, analoge, triadiske, tetradiske og monokromatiske paletter fra en basisfarger. Ingen opplasting.
- FargepalettuttrekkerHent dominerende farger fra et bilde som HEX-fargeprøver. Kopier en farge. Ingen opplasting.
- FargeblindhetssimulatorSimuler protanopi, deuteranopi, tritanopi og akromatopsi på et bilde. Ingen opplasting.
Ofte stilte spørsmål
Hva er forskjellen mellom hex og RGB?
Det er to måter å skrive samme farge på. Hex pakker de røde, grønne og blå kanalene inn i en kode på seks tegn i base 16, mens RGB lister de samme tre kanalene som desimaltall fra 0 til 255. #ff0000 og rgb(255, 0, 0) er den samme røde fargen. Hex er kompakt og vanlig i CSS og designfiler, RGB er lettere å lese ved et raskt blikk, og å konvertere mellom dem endrer ingenting ved selve fargen.
Hvordan vet jeg om fargene mine er lesbare for fargeblinde brukere?
Kjør paletten din gjennom en fargeblindhetssimulator, som tegner fargene dine på nytt slik noen med hver vanlig type fargesyn ville sett dem. Følg med på par som faller sammen til samme tone, særlig røde og grønne. Den tryggeste vanen er å aldri bruke farge som eneste signal: støtt den opp med tekst, et ikon eller et mønster, og hold en tydelig lyshetsforskjell mellom forgrunn og bakgrunn slik at betydningen overlever selv når fargetonen ikke gjør det.