Stonehearth

Palette mit 7 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Stonehearth

Palette mit 7 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 7 Farben Warm Gemischt Komplementär warm cold stone moriarty

Likes 43

Farben 7

CSS-Variablen

:root {
  --c-earthy-1: #4F1A2E;
  --c-earthy-2: #632263;
  --c-earthy-3: #D47444;
  --c-earthy-4: #F9C87C;
  --c-earthy-5: #892E33;
  --c-earthy-6: #3C73C6;
  --c-earthy-7: #99B0D3;
}

Über diese Palette

Diese erdige Palette mit 7 Farben reicht vom hellsten Ton Jackfruit (#F9C87C) bis zum dunkelsten Ton Chilli Black Red (#4F1A2E). Sie vereint Chilli Black Red, Blackest Berry, Striking Orange, Jackfruit, Planet of the Apes, Palace Blue und Heartsong in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #4F1A2E auf #F9C87C mit 8,94:1.

Bodenständige, natürliche Töne – passend für nachhaltige und Bio-Marken, Cafés, Outdoor-Ausrüstung und warme redaktionelle Typografie.

Farben im Detail

Chilli Black Red #4F1A2E

RGB: rgb(79, 26, 46)
HSL: hsl(337, 50%, 21%)
Luminanz: 0,026

Blackest Berry #632263

RGB: rgb(99, 34, 99)
HSL: hsl(300, 49%, 26%)
Luminanz: 0,047

Striking Orange #D47444

RGB: rgb(212, 116, 68)
HSL: hsl(20, 63%, 55%)
Luminanz: 0,269

Jackfruit #F9C87C

RGB: rgb(249, 200, 124)
HSL: hsl(36, 91%, 73%)
Luminanz: 0,629

Planet of the Apes #892E33

RGB: rgb(137, 46, 51)
HSL: hsl(357, 50%, 36%)
Luminanz: 0,075

Palace Blue #3C73C6

RGB: rgb(60, 115, 198)
HSL: hsl(216, 55%, 51%)
Luminanz: 0,173

Heartsong #99B0D3

RGB: rgb(153, 176, 211)
HSL: hsl(216, 40%, 71%)
Luminanz: 0,425

Kontrast & Barrierefreiheit

5 von 21 Farbpaaren erreichen die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext.

Aa #4F1A2E auf #F9C87C 8,94:1 AAA

Aa #632263 auf #F9C87C 7,00:1 AAA

Aa #4F1A2E auf #99B0D3 6,25:1 AA

Aa #F9C87C auf #892E33 5,43:1 AA

Aa #632263 auf #99B0D3 4,90:1 AA

Aa #4F1A2E auf #D47444 4,20:1 AA (großer Text)

Aa #892E33 auf #99B0D3 3,80:1 AA (großer Text)

Aa #632263 auf #D47444 3,29:1 AA (großer Text)

Aa #F9C87C auf #3C73C6 3,05:1 AA (großer Text)

Aa #4F1A2E auf #3C73C6 2,93:1 Nicht bestanden

Aa #D47444 auf #892E33 2,55:1 Nicht bestanden

Aa #632263 auf #3C73C6 2,30:1 Nicht bestanden

Aa #D47444 auf #F9C87C 2,13:1 Nicht bestanden

Aa #3C73C6 auf #99B0D3 2,13:1 Nicht bestanden

Aa #892E33 auf #3C73C6 1,78:1 Nicht bestanden

Aa #4F1A2E auf #892E33 1,65:1 Nicht bestanden

Aa #D47444 auf #99B0D3 1,49:1 Nicht bestanden

Aa #D47444 auf #3C73C6 1,43:1 Nicht bestanden

Aa #F9C87C auf #99B0D3 1,43:1 Nicht bestanden

Aa #632263 auf #892E33 1,29:1 Nicht bestanden

Aa #4F1A2E auf #632263 1,28:1 Nicht bestanden

Stonehearth

Stonehearth

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen