# Jordfärger: jordnära paletter med koder att kopiera

[Canonical HTML page](https://gradiently.design/sv/guide/earth-tone-colors)

Jordfärger är färgerna hos lera, sand, bark, mossa och sten. De känns lugna, ärliga och varma, och det är förvånansvärt lätt att göra dem platta. Här är åtta paletter med koder som håller sig levande.

## The short version

- En jordfärgspalett använder naturmaterialens dämpade färger: brunt, sandbrunt, sand, lera, terrakotta, ockra, oliv, mossa och varma gråtoner.
- Jordfärger känns lugna, varma och trovärdiga, vilket är varför de är vanliga inom inredning, mat, välmående, friluftsliv och hantverksvarumärken.
- Jordfärgspaletter ser platta ut när alla färger har samma ljushet, så ta med en blek botten, en mellanton och ett mycket mörkt brunt eller olivgrönt.
- En enda ljusare accent som bränd orange, ockra eller en djup turkos hindrar en jordnära palett från att kännas tråkig.
- Mörk espresso eller barkbrunt är den pålitligaste textfärgen på ljusa jordfärger, och varm grädde läses bra på mörka.

En **jordfärgspalett** byggs av de dämpade, varma färgerna hos naturmaterial: sand `#e7d8c3`, lera `#c2703d`, sienna `#a0522d`, oliv `#6b7046`, bark `#3d2b1f` och de gräddvita, ockra och grå nyanserna runt dem. De här färgerna känns lugna och ärliga eftersom vi ser dem i jord, sten, trä och torrt gräs. Knepet är spännvidd. En bra jordnära palett har alltid en blek botten, en eller två mellantoner och ett djupt mörkt, annars blir den en enda beige suddighet. Nedan finns åtta paletter med koder du kan kopiera.

## Vad som räknas som en jordfärg

Jordfärger har lägre mättnad än färgerna på ett vanligt färghjul och ligger mest i den varma halvan: rött som blivit rost, orange som blivit lera, gult som blivit ockra, grönt som blivit oliv och salvia. Många är uppkallade efter verkliga pigment, som sienna och umbra, som ursprungligen tillverkades av färgad jord.

| Färg | Hex | Finns i | Känns |
| --- | --- | --- | --- |
| Sand | `#e7d8c3` | Stränder, puts, linne | Ljus, lugn |
| Ockra | `#c8963e` | Lerpigment, torrt gräs | Solig, åldrad |
| Terrakotta | `#c2703d` | Bränd lera, kakel | Varm, handgjord |
| Sienna | `#a0522d` | Järnrik jord | Rik, jordnära |
| Oliv | `#6b7046` | Olivblad, lav | Jordnära, mogen |
| Salvia | `#9caf88` | Torkade örter | Mjuk, rogivande |
| Sten | `#a8a196` | Granit, skiffer | Stilla, neutral |
| Bark | `#3d2b1f` | Trädbark, kaffe | Stadig, pålitlig |

Åtta grundläggande jordfärger. De flesta paletterna nedan bygger på tre till fem av dem.

## Åtta jordfärgspaletter

Varje palett listar färger från ljusast till mörkast. Använd den första som bakgrund, de mellersta för former och bilder och den sista för text.

- Benvit: #f3ece2
- Dyn: #e0c3a3
- Terrakotta: #c2703d
- Rost: #8b4a2b
- Bark: #3d2b1f

**Ökenlera.** Varm och solbelyst. Passar keramik, inredning och resor.

- Blek salvia: #eef0e5
- Salvia: #9caf88
- Oliv: #6b7046
- Mossa: #4a4a2f
- Skogsbläck: #1f2416

**Olivlund.** Grönskiftande och rogivande. Passar välmående, mat och trädgård.

- Snäcka: #f5efe6
- Sand: #e7d8c3
- Drivved: #a8a196
- Havssten: #5f6b6d
- Skiffer: #2e3335

**Kustsand.** Svalare och luftig. Passar hotell, hudvård och arkitektur.

- Strå: #f1e4c8
- Ockra: #c8963e
- Sienna: #a0522d
- Umbra: #6b3e26
- Espresso: #2b1d14

**Höstskörd.** Rik och gyllene. Passar bagerier, kaffe och säsongskampanjer.

- Rispapper: #ece6dc
- Havre: #c9bba5
- Taupe: #8c7b67
- Valnöt: #5b5246
- Kol: #262320

**Stilla neutral.** Nästan färglös, mycket lugn. Passar japandi-interiörer, möbler och redaktionella layouter.

- Rodnadslera: #f4e9df
- Adobe: #d9a38a
- Tegel: #b4644a
- Oxid: #7a3b2e
- Kakao: #3a1f19

**Terrakottastudio.** Rosaskiftande och mjuk. Passar florister, ljus och bohemiska varumärken.

- Dimma: #d8cfc0
- Lav: #6b6250
- Torv: #4a3b2c
- Jord: #2a2119
- Nattjord: #14100c

**Mörk jord.** Stämningsfull och exklusiv. Passar whisky, läder, friluftsutrustning och herrmode.

- Benvit: #f3ece2
- Kamel: #d9c3a5
- Oliv: #6b7046
- Djup turkos: #2f5d62
- Bark: #3d2b1f

**Jord med en accent.** En djup turkos lyfter hela uppsättningen utan att bryta stämningen.

## Så balanserar du en jordfärgspalett

Jordfärger har gemensamt låg mättnad, så ljushet måste göra det jobb som mättnad vanligtvis gör. Om alla dina färger är mellantoner ser designen platt och lerig ut. Sprid dem över ljust, mellan och mörkt och tilldela dem sedan med [60 30 10-regeln](https://gradiently.design/sv/guide/60-30-10-rule).

| Roll | Andel | Exempel Ökenlera |
| --- | --- | --- |
| Botten | Ungefär 60 % | Benvit `#f3ece2` |
| Stöd | Ungefär 30 % | Dyn `#e0c3a3` och Rost `#8b4a2b` |
| Accent | Ungefär 10 % | Terrakotta `#c2703d` |
| Text | Efter behov | Bark `#3d2b1f` |

En palett fördelad på roller. Accenten drar till sig uppmärksamhet eftersom det finns så lite av den.

> **Lägg till en ljusare ton** En bränd orange, en senap eller en djup turkos med något högre mättnad än resten ger ögat någonstans att landa. Utan den kan en jordnära palett kännas sömnig.

### Vanliga misstag med jordfärger

- **Fem beige i rad.** Färger med samma ljushet smälter ihop. Ha minst en mycket ljus och en mycket mörk.
- **Ren svart text.** Den ser kall ut mot varma bruna toner. Använd espresso eller bark i stället.
- **Att blanda varma och kalla bruna toner.** En rosa terrakotta bredvid en grå taupe ser oavsiktlig ut. Håll undertonerna enhetliga.
- **För många accenter.** En ljus ton lyfter paletten, tre gör den till en helt annan palett.

## Gradienter i jordfärger

Jordfärger blandas lätt eftersom de redan ligger nära varandra i mättnad, så risken för en grå mitt är liten. Håll ljuskällan mjuk och lägg till korn, vilket passar färgernas materialkänsla. [Bruna gradienter](https://gradiently.design/sv/guide/brown-gradient) och [beige gradienter](https://gradiently.design/sv/guide/beige-gradient) går djupare in i varje familj.

- Benvit till terrakotta: `linear-gradient(160deg, #f3ece2 0%, #e0c3a3 50%, #c2703d 100%)`
- Olivskugga: `radial-gradient(circle at 75% 25%, #9caf88 0%, #6b7046 45%, #2a2a1a 100%)`
- Skörd: `linear-gradient(180deg, #f1e4c8 0%, #c8963e 55%, #6b3e26 100%)`
- Glöd i jord: `radial-gradient(ellipse at 30% 110%, #b4644a 0%, #4a3b2c 45%, #14100c 90%)`

Fyra jordnära gradienter byggda av paletterna ovan.

## Textfärger på jordfärger

Ren svart och ren vit kan se hårda ut bredvid så mjuka färger. Använd ett mycket mörkt brunt för text på ljusa bottnar och en varm grädde på mörka. Vitt fungerar fortfarande på de djupare mellantonerna som sienna och oliv. Förhållandena använder WCAG-formeln, där 4,5:1 är det vanliga målet för liten text. [Färgkontrast](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar den.

| Bakgrund | Text | Kontrast | Omdöme |
| --- | --- | --- | --- |
| Benvit `#f3ece2` | Bark `#3d2b1f` | 11,5:1 | Utmärkt |
| Sand `#e7d8c3` | Bark `#3d2b1f` | 9,6:1 | Utmärkt |
| Terrakotta `#c2703d` | Vit | 3,7:1 | Bara stora rubriker |
| Sienna `#a0522d` | Vit | 5,6:1 | Bra |
| Oliv `#6b7046` | Vit | 5,2:1 | Bra |
| Bark `#3d2b1f` | Sand `#e7d8c3` | 9,6:1 | Utmärkt |

Terrakotta och ockra är ljusare än de ser ut, så kontrollera vit text på dem noga.

Ett stående inlägg för en keramikbutik med mörkbrun text på en varm bakgrund från benvitt till terrakotta

Ett inlägg för en keramikbutik i ökenlera, med text i barkbrunt.

Ett kvadratiskt inlägg för ett kafferosteri med text i sandfärg på en mörk jordbrun bakgrund

Ett inlägg för ett kafferosteri i mörk jord, med text i sandfärg.

## Jordfärgspalett som CSS-variabler

```css
: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%);
}
```

Ökenlera-paletten som egna egenskaper. Benvitt på rost klarar kraven för knapptexter. Bark på terrakotta når bara ungefär 3,6:1, så håll den till stora, feta etiketter.

Jordnära paletter överlappar med [höstfärgpaletter](https://gradiently.design/sv/guide/autumn-color-palettes), [dämpade färgpaletter](https://gradiently.design/sv/guide/muted-color-palettes) och [japandi-färger](https://gradiently.design/sv/guide/japandi-colors), så låna därifrån när du har en bas. Om du vill ha en jordnära bakgrund med verkligt material i, kombinerar Gradiently Marks färg med material, korn och ljus, och Designer kan lägga ut inlägg i din Mark utifrån en kort beskrivning.

## FAQ

### Vilka färger är jordfärger?

Dämpade, mestadels varma färger från naturmaterial: brunt, sandbrunt, sand, beige, terrakotta, rost, ockra, oliv, salvia, mossa och varma gråtoner.

### Vilka är några hex-koder för jordfärger?

Sand `#e7d8c3`, ockra `#c8963e`, terrakotta `#c2703d`, sienna `#a0522d`, oliv `#6b7046`, salvia `#9caf88` och bark `#3d2b1f` är en bra startuppsättning.

### Vilken färg passar till jordfärger?

En djup turkos, en bränd orange eller en senap som liten accent. Varm grädde och mörk espresso fungerar som de ljusa och mörka ändpunkterna.

### Hur undviker jag att en jordfärgspalett ser tråkig ut?

Sprid färgerna över ljusa, mellan och mörka värden, och lägg till en något mer mättad accent som används i ungefär en tiondel av designen.

### Är jordfärger bra för branding?

Ja, för varumärken som vill kännas lugna, naturliga och trovärdiga, som inredning, mat, välmående, friluftsliv och hantverksföretag.