HAG

Palette mit 8 Farben · Neutral · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

HAG

Palette mit 8 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 8 Farben Neutral Gemischt Komplementär

Likes 16

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #10101F;
  --c-earthy-2: #193A3B;
  --c-earthy-3: #10634F;
  --c-earthy-4: #51849C;
  --c-earthy-5: #E5DCD3;
  --c-earthy-6: #C7BF2A;
  --c-earthy-7: #8A4D24;
  --c-earthy-8: #92072E;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Everyday White (#E5DCD3) bis zum dunkelsten Ton Corbeau (#10101F). Sie vereint Corbeau, Nordic, Green Paw Paw, Jay Bird, Everyday White, Pyrite Yellow, Plane Brown und Lifeline in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #10101F auf #E5DCD3 mit 13,9: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

Corbeau #10101F

RGB: rgb(16, 16, 31)
HSL: hsl(240, 32%, 9%)
Luminanz: 0,006

Nordic #193A3B

RGB: rgb(25, 58, 59)
HSL: hsl(182, 40%, 16%)
Luminanz: 0,036

Green Paw Paw #10634F

RGB: rgb(16, 99, 79)
HSL: hsl(166, 72%, 23%)
Luminanz: 0,096

Jay Bird #51849C

RGB: rgb(81, 132, 156)
HSL: hsl(199, 32%, 46%)
Luminanz: 0,207

Everyday White #E5DCD3

RGB: rgb(229, 220, 211)
HSL: hsl(30, 26%, 86%)
Luminanz: 0,726

Pyrite Yellow #C7BF2A

RGB: rgb(199, 191, 42)
HSL: hsl(57, 65%, 47%)
Luminanz: 0,496

Plane Brown #8A4D24

RGB: rgb(138, 77, 36)
HSL: hsl(24, 59%, 34%)
Luminanz: 0,108

Lifeline #92072E

RGB: rgb(146, 7, 46)
HSL: hsl(343, 91%, 30%)
Luminanz: 0,065

Kontrast & Barrierefreiheit

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

Aa #10101F auf #E5DCD3 13,90:1 AAA

Aa #10101F auf #C7BF2A 9,78:1 AAA

Aa #193A3B auf #E5DCD3 9,07:1 AAA

Aa #E5DCD3 auf #92072E 6,77:1 AA

Aa #193A3B auf #C7BF2A 6,38:1 AA

Aa #10634F auf #E5DCD3 5,31:1 AA

Aa #E5DCD3 auf #8A4D24 4,90:1 AA

Aa #C7BF2A auf #92072E 4,76:1 AA

Aa #10101F auf #51849C 4,60:1 AA

Aa #10634F auf #C7BF2A 3,74:1 AA (großer Text)

Aa #C7BF2A auf #8A4D24 3,45:1 AA (großer Text)

Aa #51849C auf #E5DCD3 3,02:1 AA (großer Text)

Aa #193A3B auf #51849C 3,00:1 AA (großer Text)

Aa #10101F auf #8A4D24 2,84:1 Nicht bestanden

Aa #10101F auf #10634F 2,62:1 Nicht bestanden

Aa #51849C auf #92072E 2,24:1 Nicht bestanden

Aa #51849C auf #C7BF2A 2,13:1 Nicht bestanden

Aa #10101F auf #92072E 2,05:1 Nicht bestanden

Aa #193A3B auf #8A4D24 1,85:1 Nicht bestanden

Aa #10634F auf #51849C 1,76:1 Nicht bestanden

Aa #193A3B auf #10634F 1,71:1 Nicht bestanden

Aa #51849C auf #8A4D24 1,62:1 Nicht bestanden

Aa #10101F auf #193A3B 1,53:1 Nicht bestanden

Aa #E5DCD3 auf #C7BF2A 1,42:1 Nicht bestanden

Aa #8A4D24 auf #92072E 1,38:1 Nicht bestanden

Aa #193A3B auf #92072E 1,34:1 Nicht bestanden

Aa #10634F auf #92072E 1,27:1 Nicht bestanden

Aa #10634F auf #8A4D24 1,08:1 Nicht bestanden

HAG

HAG

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen