Artikel
Farveværktøjer til nettet: hex, paletter og tilgængelighed
At vælge farver til et websted ser enkelt ud, indtil du står over for hex-koder, RGB-tripletter og HSL-vinkler, der alle beskriver det samme på forskellige måder. Denne artikel forklarer, hvordan formaterne hænger sammen, hvordan du laver en enkelt brandfarve om til en brugbar palet, og hvordan du sikrer, at resultatet forbliver læsbart for folk, der ser farver anderledes.
Hex, RGB og HSL beskriver samme farve
En farve på skærmen blandes af rødt, grønt og blåt lys. Hex-notation skriver disse tre kanaler som en kode på seks tegn, for eksempel #2563eb, hvor hvert tegnpar er én kanal fra 00 til ff. RGB skriver de samme tre tal i decimalform, fra 0 til 255, hvilket er lettere at læse, men ikke siger mere. HSL tager en anden vinkel: den beskriver en farve ved dens kulør (en position på farvehjulet fra 0 til 360 grader), dens mætning (hvor levende den er) og dens lyshed (hvor tæt på hvid eller sort den ligger). HSL er det format, designere griber til, når de vil skubbe lidt til en farve, fordi at hæve lysheden eller flytte kuløren er én intuitiv ændring i stedet for tre koblede tal. Et konverteringsværktøj lader dig bevæge dig mellem alle tre, så du kan læse en værdi i ét format og bruge den i et andet.
At lave en palet ud af én farve
En enkelt brandfarve er sjældent nok. En palet, der fungerer, har som regel brug for en primærfarve, en eller to accenter og et sæt neutrale grå til tekst og baggrunde. Forholdene mellem farver følger enkle regler på farvehjulet: komplementærfarver ligger over for hinanden, analoge farver ligger ved siden af hinanden for en rolig fornemmelse, og en triade spreder tre farver jævnt for kontrast uden at de skurrer. Et værktøj til farveskemaer anvender disse regler på din udgangsfarve og giver dig de tilhørende hex-koder, så du ikke skal beregne vinklerne i hånden. Hvis du allerede har et billede, hvis stemning du kan lide, læser en paletudtrækker de dominerende farver ud af det, hvilket er en hurtig måde at bygge et websted på ud fra et foto eller et logo.
Kontrast og farveblindhed
En palet, der ser godt ud på din skærm, kan stadig svigte læsere. Omkring én ud af tolv mænd og én ud af to hundrede kvinder har en form for nedsat farvesyn, hyppigst besvær med at skelne rødt fra grønt. Hvis dit eneste signal for en fejl er rød tekst på en grøn knap, overser de læsere den. Løsningen er ikke at undgå farve, men aldrig at stole på farve alene: kombiner den med et ikon, en etiket eller en form, og hold tilstrækkelig lyshedskontrast mellem tekst og dens baggrund. En farveblindhedssimulator viser dig, hvordan din palet ser ud under de almindelige typer farvesyn, så du kan opfange et problem, før det går i luften, i stedet for efter en klage.
At gøre alt dette i browseren
Ingen af disse trin kræver en server. At konvertere en hex-kode, generere et skema, læse farver ud af et billede og simulere farveblindhed er alle små beregninger, som en browser klarer med det samme. Det betyder noget, når billedet, du tager prøver fra, er et uudgivet design eller et kundelogo: med værktøjerne her bliver filen på din enhed, og intet uploades. Du får samme resultat, som du ville få fra en onlinetjeneste, uden at udlevere materialet. Farvekonverteren, farveskemageneratoren, paletudtrækkeren og farveblindhedssimulatoren kører alle lokalt og fungerer på samme måde offline, når siden først er indlæst.
OKLCH og bredere farverum
Hex, RGB og HSL beskriver alle farver inden for sRGB-farverummet, som skærme har brugt i årevis. Nyere skærme viser mere, og CSS kan nu nå det med funktionen color() og Display P3-rummet, som tilføjer klare grønne og røde farver, som sRGB ikke kan gengive. Det større skift er OKLCH, en måde at beskrive farve som lysstyrke, chroma og farvetone, der svarer til, hvordan øjet faktisk opfatter lysstyrke. I HSL ser en gul og en blå farve med samme 50% lysstyrke slet ikke ens ud: den gule virker lys, den blå virker mørk. I OKLCH holder den oplevede lysstyrke sig stabil, når man fastholder lysstyrken og kun ændrer farvetonen. Det gør det praktisk at bygge en palette, hvor hvert trin rammer det samme kontrastmål ved at låse ét tal, frem for at justere hver farve manuelt.
Værktøjer i denne artikel
- FarvekonverterKonverter farver mellem HEX, RGB, HSL, HSV og CMYK. WCAG-kontrasttjekker inkluderet. Ingen upload.
- Farveskema-generatorGenerer komplementære, analoge, triadiske, tetradiske og monokromatiske paletter fra en basisfarve. Ingen upload.
- Farvepalette-udtrækUdtræk dominerende farver fra et billede som HEX-farveprøver. Kopiér enhver farve. Ingen upload.
- Farveblindhed-simulatorSimulér protanopi, deuteranopi, tritanopi og akromatopsi på et billede. Ingen upload.
Ofte stillede spørgsmål
Hvad er forskellen mellem hex og RGB?
Det er to måder at skrive den samme farve på. Hex pakker de røde, grønne og blå kanaler ind i en kode på seks tegn i base 16, mens RGB opregner de samme tre kanaler som decimaltal fra 0 til 255. #ff0000 og rgb(255, 0, 0) er den samme røde farve. Hex er kompakt og almindelig i CSS og designfiler, RGB er lettere at læse ved et hurtigt blik, og at konvertere mellem dem ændrer intet ved selve farven.
Hvordan ved jeg, om mine farver er læsbare for farveblinde brugere?
Kør din palet gennem en farveblindhedssimulator, som tegner dine farver om, sådan som nogen med hver almindelig type farvesyn ville se dem. Hold øje med par, der falder sammen til den samme tone, især røde og grønne. Den sikreste vane er aldrig at bruge farve som eneste signal: bak den op med tekst, et ikon eller et mønster, og hold en tydelig lyshedsforskel mellem forgrund og baggrund, så betydningen overlever, selv når kuløren ikke gør.