Dette er et verktøy som hjelper deg med utarbeide praktiske og vakre fargepaletter.
Bruk kontrollene på høyre side til å bygge opp ditt eget fargeskjema, og legg merke til at endringene gjenspeiles i dette designet.
Du kan umiddelbart se hvor godt fargepalettene fungerer i praksis, ved bruk i et ekte design.
Sånn kan du gå frem
Finn den fargetonen som skal være designets primærfarge.
Juster metning og valør for den midterste fargen i paletten. Denne skal fungere som en bakgrunnsfarge på en knapp, og må derfor ha god nok kontrast mot hvit.
Juster den mørkeste fargen, helt til venstre i paletten. Denne skal fungere som farge for vanlig tekst.
Juster den lyseste fargen, helt til høyre i paletten. Denne skal fungere som en bakgrunnsfarge på vanlig tekst, for å skape litt kontrast mot hvit bakgrunn.
Klikk vekk de øvrige fargene ved å bruke kontrollen helt nederst til høyre, og trykk oppdater for å få generert en palett med jevn avstand mellom hver farge.
Gjør finjusteringer av hver enkelt farge, helt til du er fornøyd med hele paletten.
Legg til paletter for flere fargetoner ved å trykke på fargeskjema øverst til høyre.
Eksporter fargeskjemaet
Nedenfor er alle enkeltfarger oppgitt som CSS-variabler. Kodesnutten kan limes direkte inn stilsettet ditt.
Hvorfor består paletten av 9 farger?
I mange sammenhenger, blant annet hos Colourlovers, består en fargepalett av fem farger i flere fargetoner.
For å bygge et omfattende brukergrensesnitt, behøver du i praksis et fargeskjema med et rikt utvalg farger innenfor hver fargetone, noe som er godt demonstrert hos Refactoring UI.
Det er ikke sikkert at du kommer til å bruke hver eneste farge i et slikt fargeskjema, men det kan likevel være nyttig å lage fleksible paletter fra starten av. Da unngår du at fargeskjemaet utvides klattvis og usystematisk etter hvert som tiden går.
Hva er hue, saturation og lightness?
Hue, saturation og lightness er engelske begrep for henholdsvis fargetone, metning og valør. HSL er en måte å representere en farge på innenfor RGB-fargemodellen. I stedet for å angi hvor store mengder med rød, grønn og blå en farge består av, velger du en fargetone fra fargesirkelen, og angir metning og valør.
Tradisjonell RGB-angivelse kan representeres som en likesidet kube, mens HSL kan representeres som en sylinder
Når du har lært deg å bruke HSL, vil du nok oppleve at denne representasjonen er mer intuitiv og lettere å jobbe med enn HEX-koder og RGB-angivelser.
Hvordan kan jeg finne fargetoner som passer sammen?
I følge fargeteorien kan vi lage harmoniske fargeskjema ved å se på fargetonenes posisjon i forhold til hverandre i fargesirkelen.
Complementary
Analogous
Triadic
Split-Complementary
Rectangle
Square
Hva er ulempene med HSL?
RGB-fargerommet er utarbeidet med utgangspunkt i hvordan skjermer viser farger, i motsetning til å hensynta hvordan vi mennesker oppfatter farger. Dette fører til at endringer i metning og valør ikke er lineære, og er avhengig av fargetone.
En gul fargetone med 90% metning og 60% valør er vesentlig mer lyssterk enn en blå fargetone med tilsvarende verdier.
hue60
hue240
Selv om valøren i en fargepalett øker endres lineært, så vil ikke lysstyrken øke lineært. I eksempelet nedenfor er metningen 90%, mens valør minker jevnt fra 90% til 10%, for henholdsvis en gul og en blå fargetone.
Dette verktøyet tar hensyn til dette, og bruker CIELAB-fargerommet til å generere paletter med jevne avstandar mellom hver farge.
