Arc9

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

Zurück zur Bibliothek

Arc9

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär gameboycolor gbc simple vibrant

Likes 11

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #333543;
  --c-earthy-2: #FBC997;
  --c-earthy-3: #B78760;
  --c-earthy-4: #C89931;
  --c-earthy-5: #EC8499;
  --c-earthy-6: #A459B7;
  --c-earthy-7: #618B50;
  --c-earthy-8: #5B64C5;
  --c-earthy-9: #FF5638;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Orpiment Yellow (#FBC997) bis zum dunkelsten Ton Sceptre Blue (#333543). Sie vereint Sceptre Blue, Orpiment Yellow, Doe, Crispy Gold, Xoxo, Royal Gramma Purple, Topiary Sculpture, Borage Blue und Portland Orange in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #333543 auf #FBC997 mit 8,03: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

Sceptre Blue #333543

RGB: rgb(51, 53, 67)
HSL: hsl(233, 14%, 23%)
Luminanz: 0,037

Orpiment Yellow #FBC997

RGB: rgb(251, 201, 151)
HSL: hsl(30, 93%, 79%)
Luminanz: 0,645

Doe #B78760

RGB: rgb(183, 135, 96)
HSL: hsl(27, 38%, 55%)
Luminanz: 0,282

Crispy Gold #C89931

RGB: rgb(200, 153, 49)
HSL: hsl(41, 61%, 49%)
Luminanz: 0,353

Xoxo #EC8499

RGB: rgb(236, 132, 153)
HSL: hsl(348, 73%, 72%)
Luminanz: 0,366

Royal Gramma Purple #A459B7

RGB: rgb(164, 89, 183)
HSL: hsl(288, 39%, 53%)
Luminanz: 0,185

Topiary Sculpture #618B50

RGB: rgb(97, 139, 80)
HSL: hsl(103, 27%, 43%)
Luminanz: 0,216

Borage Blue #5B64C5

RGB: rgb(91, 100, 197)
HSL: hsl(235, 48%, 56%)
Luminanz: 0,154

Portland Orange #FF5638

RGB: rgb(255, 86, 56)
HSL: hsl(9, 100%, 61%)
Luminanz: 0,282

Kontrast & Barrierefreiheit

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

Aa #333543 auf #FBC997 8,03:1 AAA

Aa #333543 auf #EC8499 4,81:1 AA

Aa #333543 auf #C89931 4,65:1 AA

Aa #333543 auf #B78760 3,84:1 AA (großer Text)

Aa #333543 auf #FF5638 3,84:1 AA (großer Text)

Aa #FBC997 auf #5B64C5 3,41:1 AA (großer Text)

Aa #333543 auf #618B50 3,07:1 AA (großer Text)

Aa #FBC997 auf #A459B7 2,96:1 Nicht bestanden

Aa #333543 auf #A459B7 2,71:1 Nicht bestanden

Aa #FBC997 auf #618B50 2,61:1 Nicht bestanden

Aa #333543 auf #5B64C5 2,35:1 Nicht bestanden

Aa #FBC997 auf #B78760 2,09:1 Nicht bestanden

Aa #FBC997 auf #FF5638 2,09:1 Nicht bestanden

Aa #EC8499 auf #5B64C5 2,04:1 Nicht bestanden

Aa #C89931 auf #5B64C5 1,98:1 Nicht bestanden

Aa #EC8499 auf #A459B7 1,78:1 Nicht bestanden

Aa #FBC997 auf #C89931 1,73:1 Nicht bestanden

Aa #C89931 auf #A459B7 1,72:1 Nicht bestanden

Aa #FBC997 auf #EC8499 1,67:1 Nicht bestanden

Aa #B78760 auf #5B64C5 1,63:1 Nicht bestanden

Aa #5B64C5 auf #FF5638 1,63:1 Nicht bestanden

Aa #EC8499 auf #618B50 1,57:1 Nicht bestanden

Aa #C89931 auf #618B50 1,52:1 Nicht bestanden

Aa #B78760 auf #A459B7 1,42:1 Nicht bestanden

Aa #A459B7 auf #FF5638 1,42:1 Nicht bestanden

Aa #618B50 auf #5B64C5 1,31:1 Nicht bestanden

Aa #B78760 auf #EC8499 1,25:1 Nicht bestanden

Aa #B78760 auf #618B50 1,25:1 Nicht bestanden

Aa #EC8499 auf #FF5638 1,25:1 Nicht bestanden

Aa #618B50 auf #FF5638 1,25:1 Nicht bestanden

Aa #B78760 auf #C89931 1,21:1 Nicht bestanden

Aa #C89931 auf #FF5638 1,21:1 Nicht bestanden

Aa #A459B7 auf #5B64C5 1,15:1 Nicht bestanden

Aa #A459B7 auf #618B50 1,13:1 Nicht bestanden

Aa #C89931 auf #EC8499 1,03:1 Nicht bestanden

Aa #B78760 auf #FF5638 1,00:1 Nicht bestanden

Arc9

Arc9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen