Fargeskala (DRAFT)

2020-05-28

Å finne gode farger er krevende. Spesielt for ingeniørhjerner, som gjerne vil ha et logisk resonnement bak valgene som tas. Med den heksidesimale notasjonen kan det angis 16 777 216 ulike farger. Hvorfor er én farge bedre enn en annen, og hvordan kan de kombineres? I denne artikkelen går jeg gjennom hvordan dere kan utarbeide et komplett fargeskjema, med utgangspunkt i én startfarge.

Komme igang

Finn enn farge du liker, som du kan bruke som utgangspunkt.

Gjerne nok kontrast til at den kan brukes som tekstfarge på hvit bakgrunn.

HSL og fargesirkelen

HSL er en alternativ angivelse av farger, i stedet for rgb (andel av rødt, gult og blått).

Tar utgangspunkt i fargesirkelen, hue. Fargemetning, saturation. Lysstyrke, lightness.

Lettere å forstå og forholde seg til.

Bruk fargesirkelen

I følge fargelære kan vi bruke fargesirkelen til på finne gode fargekombinasjoner.

Ta utgangspunkt i fargen, og lag en fargesirkel ved å endre hue i 30-gradersintervaller.

Ulike type schemes, henvis til nettside.

Her har jeg brukt type xxx.

http://www.innoform.no/fargeteori-2

Behov for en fargeskala

Har bruk for tints and shades for hver farge. Sammenlign med å bruke skygge, og reduser opacity.

I utgangspunktet bruk for 9 farger, som navnsettes fra 100 til 900. Fargen som akkurat kan brukes til tekst, settes til 500. I tillegg er det nyttig med en ekstra lys farge, med verdi 50.

Finn farger og lag fargeskala

Lager et design, for å finne ytterpunkter

Bruker palettte.app, legger inn ytterpunktene, og interpolerer.

Kan gjøre justeringer her og der. Veksle mellom palettte og designverktøy

Gjenta for alle fargene dine.

Basert på metode beskrevet her: Refactoring UI. https://refactoringui.com/previews/building-your-color-palette/

Endelig resultat

Type fargescheme

Fargeskala for hver farge

CSS

CSS custom properties.

Enkelt å justere i etterkant.