Backward 12

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

Zurück zur Bibliothek

Backward 12

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär isasstudio

Likes 15

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #318F9C;
  --c-earthy-2: #C8E7FF;
  --c-earthy-3: #59A868;
  --c-earthy-4: #405533;
  --c-earthy-5: #242216;
  --c-earthy-6: #656317;
  --c-earthy-7: #BEBB40;
  --c-earthy-8: #FFFEC8;
  --c-earthy-9: #F3B9FF;
  --c-earthy-10: #C05A99;
  --c-earthy-11: #803016;
  --c-earthy-12: #F53A43;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Golden Wash (#FFFEC8) bis zum dunkelsten Ton Black Mesa (#242216). Sie vereint Scooter, Icy Landscape, Deep Mint, Zen Garden Olive, Black Mesa, Greenish Brown, Tropic Canary, Golden Wash, Brilliant Lavender, Llilacquered, Chestnut Plum und Red Salsa in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 13 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #242216 auf #FFFEC8 mit 15,4: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

Scooter #318F9C

RGB: rgb(49, 143, 156)
HSL: hsl(187, 52%, 40%)
Luminanz: 0,227

Icy Landscape #C8E7FF

RGB: rgb(200, 231, 255)
HSL: hsl(206, 100%, 89%)
Luminanz: 0,767

Deep Mint #59A868

RGB: rgb(89, 168, 104)
HSL: hsl(131, 31%, 50%)
Luminanz: 0,311

Zen Garden Olive #405533

RGB: rgb(64, 85, 51)
HSL: hsl(97, 25%, 27%)
Luminanz: 0,078

Black Mesa #242216

RGB: rgb(36, 34, 22)
HSL: hsl(51, 24%, 11%)
Luminanz: 0,016

Greenish Brown #656317

RGB: rgb(101, 99, 23)
HSL: hsl(58, 63%, 24%)
Luminanz: 0,118

Tropic Canary #BEBB40

RGB: rgb(190, 187, 64)
HSL: hsl(59, 50%, 50%)
Luminanz: 0,469

Golden Wash #FFFEC8

RGB: rgb(255, 254, 200)
HSL: hsl(59, 100%, 89%)
Luminanz: 0,963

Brilliant Lavender #F3B9FF

RGB: rgb(243, 185, 255)
HSL: hsl(290, 100%, 86%)
Luminanz: 0,610

Llilacquered #C05A99

RGB: rgb(192, 90, 153)
HSL: hsl(323, 45%, 55%)
Luminanz: 0,208

Chestnut Plum #803016

RGB: rgb(128, 48, 22)
HSL: hsl(15, 71%, 29%)
Luminanz: 0,068

Red Salsa #F53A43

RGB: rgb(245, 58, 67)
HSL: hsl(357, 90%, 59%)
Luminanz: 0,228

Kontrast & Barrierefreiheit

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

Aa #242216 auf #FFFEC8 15,40:1 AAA

Aa #C8E7FF auf #242216 12,41:1 AAA

Aa #242216 auf #F3B9FF 10,03:1 AAA

Aa #FFFEC8 auf #803016 8,61:1 AAA

Aa #405533 auf #FFFEC8 7,90:1 AAA

Aa #242216 auf #BEBB40 7,88:1 AAA

Aa #C8E7FF auf #803016 6,94:1 AA

Aa #C8E7FF auf #405533 6,37:1 AA

Aa #656317 auf #FFFEC8 6,05:1 AA

Aa #F3B9FF auf #803016 5,61:1 AA

Aa #59A868 auf #242216 5,49:1 AA

Aa #405533 auf #F3B9FF 5,14:1 AA

Aa #C8E7FF auf #656317 4,87:1 AA

Aa #BEBB40 auf #803016 4,41:1 AA (großer Text)

Aa #242216 auf #F53A43 4,23:1 AA (großer Text)

Aa #318F9C auf #242216 4,21:1 AA (großer Text)

Aa #405533 auf #BEBB40 4,04:1 AA (großer Text)

Aa #656317 auf #F3B9FF 3,94:1 AA (großer Text)

Aa #242216 auf #C05A99 3,93:1 AA (großer Text)

Aa #FFFEC8 auf #C05A99 3,92:1 AA (großer Text)

Aa #318F9C auf #FFFEC8 3,66:1 AA (großer Text)

Aa #FFFEC8 auf #F53A43 3,64:1 AA (großer Text)

Aa #C8E7FF auf #C05A99 3,16:1 AA (großer Text)

Aa #656317 auf #BEBB40 3,10:1 AA (großer Text)

Aa #59A868 auf #803016 3,07:1 AA (großer Text)

Aa #318F9C auf #C8E7FF 2,95:1 Nicht bestanden

Aa #C8E7FF auf #F53A43 2,93:1 Nicht bestanden

Aa #59A868 auf #405533 2,82:1 Nicht bestanden

Aa #59A868 auf #FFFEC8 2,80:1 Nicht bestanden

Aa #F3B9FF auf #C05A99 2,56:1 Nicht bestanden

Aa #242216 auf #656317 2,55:1 Nicht bestanden

Aa #318F9C auf #F3B9FF 2,38:1 Nicht bestanden

Aa #F3B9FF auf #F53A43 2,37:1 Nicht bestanden

Aa #803016 auf #F53A43 2,37:1 Nicht bestanden

Aa #318F9C auf #803016 2,36:1 Nicht bestanden

Aa #C8E7FF auf #59A868 2,26:1 Nicht bestanden

Aa #C05A99 auf #803016 2,20:1 Nicht bestanden

Aa #405533 auf #F53A43 2,17:1 Nicht bestanden

Aa #318F9C auf #405533 2,16:1 Nicht bestanden

Aa #59A868 auf #656317 2,16:1 Nicht bestanden

Aa #405533 auf #C05A99 2,01:1 Nicht bestanden

Aa #BEBB40 auf #C05A99 2,01:1 Nicht bestanden

Aa #405533 auf #242216 1,95:1 Nicht bestanden

Aa #BEBB40 auf #FFFEC8 1,95:1 Nicht bestanden

Aa #318F9C auf #BEBB40 1,87:1 Nicht bestanden

Aa #BEBB40 auf #F53A43 1,86:1 Nicht bestanden

Aa #59A868 auf #F3B9FF 1,83:1 Nicht bestanden

Aa #242216 auf #803016 1,79:1 Nicht bestanden

Aa #656317 auf #F53A43 1,66:1 Nicht bestanden

Aa #318F9C auf #656317 1,65:1 Nicht bestanden

Aa #C8E7FF auf #BEBB40 1,57:1 Nicht bestanden

Aa #656317 auf #C05A99 1,54:1 Nicht bestanden

Aa #FFFEC8 auf #F3B9FF 1,54:1 Nicht bestanden

Aa #59A868 auf #BEBB40 1,44:1 Nicht bestanden

Aa #656317 auf #803016 1,42:1 Nicht bestanden

Aa #59A868 auf #C05A99 1,40:1 Nicht bestanden

Aa #405533 auf #656317 1,31:1 Nicht bestanden

Aa #318F9C auf #59A868 1,30:1 Nicht bestanden

Aa #59A868 auf #F53A43 1,30:1 Nicht bestanden

Aa #BEBB40 auf #F3B9FF 1,27:1 Nicht bestanden

Aa #C8E7FF auf #FFFEC8 1,24:1 Nicht bestanden

Aa #C8E7FF auf #F3B9FF 1,24:1 Nicht bestanden

Aa #405533 auf #803016 1,09:1 Nicht bestanden

Aa #C05A99 auf #F53A43 1,08:1 Nicht bestanden

Aa #318F9C auf #C05A99 1,07:1 Nicht bestanden

Aa #318F9C auf #F53A43 1,01:1 Nicht bestanden

Backward 12

Backward 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen