Jordfargepaletter: naturlige fargekoder å kopiere

Jordfargepaletter bygger på naturmaterialenes dempede, varme farger: sand #e7d8c3, leire #c2703d, sienna #a0522d, oliven #6b7046, bark #3d2b1f og krem-, oker- og gråtonene rundt dem. Fargene føles rolige og ærlige fordi vi ser dem i jord, stein, tre og tørt gress. Trikset er spennvidde. En god jordpalett har alltid en lys bakgrunn, én eller to mellomtoner og en dyp mørk farge, ellers blir den én beige tåke. Nedenfor får du åtte paletter med koder å kopiere.

Hva regnes som en jordtone

Jordtoner har lavere metning enn fargene i en vanlig fargesirkel og ligger mest i den varme halvdelen: rødt blir rust, oransje blir leire, gult blir oker, grønt blir oliven og salvie. Mange har navn etter ekte pigmenter, som sienna og umbra, som opprinnelig ble laget av farget jord.

Åtte jordfargepaletter

Hver palett viser fargene fra lysest til mørkest. Bruk den første til bakgrunn, de midterste til former og bilder og den siste til tekst.

Slik balanserer du en jordfargepalett

Jordtoner deler lav metning, så lysheten må gjøre jobben metningen vanligvis gjør. Er alle fargene mellomtoner, blir designet flatt og grumsete. Fordel dem på lyst, middels og mørkt, og gi dem roller med 60 30 10-regelen.

Vanlige feil med jordtoner

• Fem beiger på rad. Farger med samme lyshet flyter sammen; ha minst én svært lys og én svært mørk.
• Helt svart tekst. Den virker kald mot varme bruntoner. Bruk espresso eller bark i stedet.
• Varme og kalde bruntoner blandet. Rosa terrakotta ved grå taupe virker tilfeldig. Hold undertonene enhetlige.
• For mange aksenter. Én sterk tone løfter paletten; tre gjør den til en helt annen palett.

Gradienter i jordtoner

Jordtoner blandes lett fordi de allerede er nær hverandre i metning, så faren for grått midtparti er liten. Hold lyskilden myk og legg til korn, som passer materialfølelsen i disse fargene. Brune gradienter og beige gradienter går dypere inn i hver familie.

Tekstfarger på jordtoner

Rent svart og hvitt kan virke hardt ved så myke farger. Bruk svært mørkt brunt til tekst på lyse bakgrunner og varm krem på mørke; hvitt fungerer fortsatt på dypere mellomtoner som sienna og oliven. Forholdene bruker WCAG-formelen, der 4,5:1 er det vanlige målet for liten tekst; fargekontrast forklarer det.

Jordfargepalett som CSS-variabler

:root {
  --bone: #f3ece2;
  --dune: #e0c3a3;
  --terracotta: #c2703d;
  --rust: #8b4a2b;
  --bark: #3d2b1f;
}

body {
  background: var(--bone);
  color: var(--bark);
}

.button {
  background: var(--rust);
  color: var(--bone);
}

.tag {
  background: var(--terracotta);
  color: var(--bark);
  font-weight: 700;
}

.hero {
  background: linear-gradient(160deg, var(--bone) 0%, var(--dune) 55%, var(--terracotta) 100%);
}

Jordpaletter overlapper med høstpaletter, dempede fargepaletter og Japandi-farger, så lån fra dem når du har en base. Vil du ha en jordbakgrunn med ekte materialpreg, kombinerer Markene i Gradiently farger med materialer, korn og lys. Designer kan sette opp innlegg med Marken din fra en kort beskrivelse.