Erdtöne als Farbpalette: geerdete Codes zum Kopieren

Eine Erdton-Farbpalette besteht aus den gedämpften, warmen Farben natürlicher Materialien: Sand #e7d8c3, Ton #c2703d, Siena #a0522d, Oliv #6b7046, Rinde #3d2b1f und den Cremes, Ockertönen und Grautönen drumherum. Diese Farben wirken ruhig und ehrlich, weil wir sie in Erde, Stein, Holz und trockenem Gras sehen. Der Trick ist die Bandbreite. Eine gute erdige Palette enthält immer einen hellen Grund, ein bis zwei Mitteltöne und ein tiefes Dunkel, sonst wird sie zu einem einzigen beigen Schleier. Unten findest du acht Paletten mit Codes zum Kopieren.

Was als Erdton gilt

Erdtöne sind weniger gesättigt als die Farben eines Standard-Farbkreises und liegen meist in der warmen Hälfte: Rot wird zu Rost, Orange zu Ton, Gelb zu Ocker, Grün zu Oliv und Salbei. Viele sind nach echten Pigmenten benannt, etwa Siena und Umbra, die ursprünglich aus gefärbter Erde gewonnen wurden.

Acht Erdton-Farbpaletten

Jede Palette listet die Farben vom hellsten bis zum dunkelsten Ton. Nimm die erste als Hintergrund, die mittleren für Formen und Bilder und die letzte für Text.

So bringst du eine Erdton-Palette ins Gleichgewicht

Erdtöne haben alle geringe Sättigung, deshalb muss die Helligkeit die Arbeit leisten, die sonst die Sättigung übernimmt. Wenn alle deine Farben Mitteltöne sind, wirkt das Design flach und trüb. Verteile sie über hell, mittel und dunkel und ordne sie dann mit der 60-30-10-Regel zu.

Häufige Fehler bei Erdtönen

• Fünf Beigetöne hintereinander. Farben gleicher Helligkeit verschmelzen; nimm mindestens eine sehr helle und eine sehr dunkle.
• Reinschwarze Schrift. Sie wirkt kalt neben warmen Brauntönen. Nimm stattdessen Espresso oder Rinde.
• Warme und kühle Brauntöne mischen. Ein rosastichiges Terrakotta neben einem grauen Taupe wirkt zufällig. Halte die Untertöne einheitlich.
• Zu viele Akzente. Eine leuchtende Note hebt die Palette; drei machen daraus eine ganz andere Palette.

Erdton-Farbverläufe

Erdtöne lassen sich leicht mischen, weil sie in der Sättigung ohnehin nah beieinander liegen, das Risiko einer grauen Mitte ist also gering. Halte die Lichtquelle weich und füge Körnung hinzu, was zum Materialgefühl dieser Farben passt. Braune Verläufe und beige Verläufe gehen tiefer in jede Familie.

Textfarben auf Erdtönen

Reines Schwarz und reines Weiß können neben so weichen Farben hart wirken. Nimm ein sehr dunkles Braun für Text auf hellem Grund und ein warmes Creme auf dunklem; Weiß funktioniert weiterhin auf den tieferen Mitteltönen wie Siena und Oliv. Die Verhältnisse nutzen die WCAG-Formel, bei der 4,5:1 das übliche Ziel für kleine Schrift ist; Farbkontrast erklärt sie.

Erdton-Palette als CSS-Variablen

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

Erdige Paletten überschneiden sich mit Herbst-Farbpaletten, gedämpften Farbpaletten und Japandi-Farben, bediene dich also dort, sobald du eine Basis hast. Wenn du einen erdigen Hintergrund mit echter Materialität willst: Die Marks von Gradiently verbinden Farbe mit Materialien, Körnung und Licht, und der Designer kann aus einer kurzen Beschreibung Posts in deinem Mark gestalten.