Exophobia

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

Zurück zur Bibliothek

Exophobia

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär orange red blue cyan

Likes 68

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #F7D69B;
  --c-earthy-2: #ADD79C;
  --c-earthy-3: #3C9691;
  --c-earthy-4: #324B6E;
  --c-earthy-5: #D24646;
  --c-earthy-6: #8A1F52;
  --c-earthy-7: #3E2B4F;
  --c-earthy-8: #3C113A;
  --c-earthy-9: #221B28;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Igniting (#F7D69B) bis zum dunkelsten Ton Ink Black (#221B28). Sie vereint Igniting, Cool Aloe, Sea, Midnight Interlude, Race Car Stripe, Violettuce, Jagger, Nightly Voyager und Ink Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F7D69B auf #221B28 mit 11,99: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

Igniting #F7D69B

RGB: rgb(247, 214, 155)
HSL: hsl(38, 85%, 79%)
Luminanz: 0,702

Cool Aloe #ADD79C

RGB: rgb(173, 215, 156)
HSL: hsl(103, 42%, 73%)
Luminanz: 0,599

Sea #3C9691

RGB: rgb(60, 150, 145)
HSL: hsl(177, 43%, 41%)
Luminanz: 0,248

Midnight Interlude #324B6E

RGB: rgb(50, 75, 110)
HSL: hsl(215, 38%, 31%)
Luminanz: 0,068

Race Car Stripe #D24646

RGB: rgb(210, 70, 70)
HSL: hsl(0, 61%, 55%)
Luminanz: 0,185

Violettuce #8A1F52

RGB: rgb(138, 31, 82)
HSL: hsl(331, 63%, 33%)
Luminanz: 0,070

Jagger #3E2B4F

RGB: rgb(62, 43, 79)
HSL: hsl(272, 30%, 24%)
Luminanz: 0,033

Nightly Voyager #3C113A

RGB: rgb(60, 17, 58)
HSL: hsl(303, 56%, 15%)
Luminanz: 0,017

Ink Black #221B28

RGB: rgb(34, 27, 40)
HSL: hsl(272, 19%, 13%)
Luminanz: 0,013

Kontrast & Barrierefreiheit

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

Aa #F7D69B auf #221B28 11,99:1 AAA

Aa #F7D69B auf #3C113A 11,28:1 AAA

Aa #ADD79C auf #221B28 10,34:1 AAA

Aa #ADD79C auf #3C113A 9,73:1 AAA

Aa #F7D69B auf #3E2B4F 9,05:1 AAA

Aa #ADD79C auf #3E2B4F 7,80:1 AAA

Aa #F7D69B auf #324B6E 6,36:1 AA

Aa #F7D69B auf #8A1F52 6,27:1 AA

Aa #ADD79C auf #324B6E 5,48:1 AA

Aa #ADD79C auf #8A1F52 5,41:1 AA

Aa #3C9691 auf #221B28 4,75:1 AA

Aa #3C9691 auf #3C113A 4,47:1 AA (großer Text)

Aa #D24646 auf #221B28 3,75:1 AA (großer Text)

Aa #3C9691 auf #3E2B4F 3,59:1 AA (großer Text)

Aa #D24646 auf #3C113A 3,53:1 AA (großer Text)

Aa #F7D69B auf #D24646 3,20:1 AA (großer Text)

Aa #D24646 auf #3E2B4F 2,83:1 Nicht bestanden

Aa #ADD79C auf #D24646 2,76:1 Nicht bestanden

Aa #F7D69B auf #3C9691 2,52:1 Nicht bestanden

Aa #3C9691 auf #324B6E 2,52:1 Nicht bestanden

Aa #3C9691 auf #8A1F52 2,49:1 Nicht bestanden

Aa #ADD79C auf #3C9691 2,18:1 Nicht bestanden

Aa #324B6E auf #D24646 1,99:1 Nicht bestanden

Aa #D24646 auf #8A1F52 1,96:1 Nicht bestanden

Aa #8A1F52 auf #221B28 1,91:1 Nicht bestanden

Aa #324B6E auf #221B28 1,89:1 Nicht bestanden

Aa #8A1F52 auf #3C113A 1,80:1 Nicht bestanden

Aa #324B6E auf #3C113A 1,78:1 Nicht bestanden

Aa #8A1F52 auf #3E2B4F 1,44:1 Nicht bestanden

Aa #324B6E auf #3E2B4F 1,42:1 Nicht bestanden

Aa #3E2B4F auf #221B28 1,32:1 Nicht bestanden

Aa #3C9691 auf #D24646 1,27:1 Nicht bestanden

Aa #3E2B4F auf #3C113A 1,25:1 Nicht bestanden

Aa #F7D69B auf #ADD79C 1,16:1 Nicht bestanden

Aa #3C113A auf #221B28 1,06:1 Nicht bestanden

Aa #324B6E auf #8A1F52 1,01:1 Nicht bestanden

Exophobia

Exophobia

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen