Snap 12

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

Zurück zur Bibliothek

Snap 12

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

Bearbeiten

Erdig 12 Farben Neutral Gemischt Komplementär artist 12color muted

Likes 74

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #FFFFFF;
  --c-earthy-2: #FFD588;
  --c-earthy-3: #72CB48;
  --c-earthy-4: #B2D4D4;
  --c-earthy-5: #C45544;
  --c-earthy-6: #CC9155;
  --c-earthy-7: #0A8A71;
  --c-earthy-8: #66AAF7;
  --c-earthy-9: #7F3355;
  --c-earthy-10: #000000;
  --c-earthy-11: #114C77;
  --c-earthy-12: #8891AA;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint White, Workout Routine, Bitter Dandelion, Dante Peak, Summer Fig, Honey Yellow, Industrial Turquoise, Âbi Blue, Rich Red Violet, Black, Seashell Cove und Sephiroth Grey in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000000 mit 21: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

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Workout Routine #FFD588

RGB: rgb(255, 213, 136)
HSL: hsl(39, 100%, 77%)
Luminanz: 0,706

Bitter Dandelion #72CB48

RGB: rgb(114, 203, 72)
HSL: hsl(101, 56%, 54%)
Luminanz: 0,468

Dante Peak #B2D4D4

RGB: rgb(178, 212, 212)
HSL: hsl(180, 28%, 76%)
Luminanz: 0,613

Summer Fig #C45544

RGB: rgb(196, 85, 68)
HSL: hsl(8, 52%, 52%)
Luminanz: 0,187

Honey Yellow #CC9155

RGB: rgb(204, 145, 85)
HSL: hsl(30, 54%, 57%)
Luminanz: 0,337

Industrial Turquoise #0A8A71

RGB: rgb(10, 138, 113)
HSL: hsl(168, 86%, 29%)
Luminanz: 0,194

Âbi Blue #66AAF7

RGB: rgb(102, 170, 247)
HSL: hsl(212, 90%, 68%)
Luminanz: 0,383

Rich Red Violet #7F3355

RGB: rgb(127, 51, 85)
HSL: hsl(333, 43%, 35%)
Luminanz: 0,075

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Seashell Cove #114C77

RGB: rgb(17, 76, 119)
HSL: hsl(205, 75%, 27%)
Luminanz: 0,066

Sephiroth Grey #8891AA

RGB: rgb(136, 145, 170)
HSL: hsl(224, 17%, 60%)
Luminanz: 0,284

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #000000 21,00:1 AAA

Aa #FFD588 auf #000000 15,13:1 AAA

Aa #B2D4D4 auf #000000 13,26:1 AAA

Aa #72CB48 auf #000000 10,35:1 AAA

Aa #FFFFFF auf #114C77 9,04:1 AAA

Aa #66AAF7 auf #000000 8,66:1 AAA

Aa #FFFFFF auf #7F3355 8,38:1 AAA

Aa #CC9155 auf #000000 7,75:1 AAA

Aa #000000 auf #8891AA 6,68:1 AA

Aa #FFD588 auf #114C77 6,51:1 AA

Aa #FFD588 auf #7F3355 6,03:1 AA

Aa #B2D4D4 auf #114C77 5,71:1 AA

Aa #B2D4D4 auf #7F3355 5,29:1 AA

Aa #0A8A71 auf #000000 4,89:1 AA

Aa #C45544 auf #000000 4,73:1 AA

Aa #72CB48 auf #114C77 4,45:1 AA (großer Text)

Aa #FFFFFF auf #C45544 4,44:1 AA (großer Text)

Aa #FFFFFF auf #0A8A71 4,30:1 AA (großer Text)

Aa #72CB48 auf #7F3355 4,13:1 AA (großer Text)

Aa #66AAF7 auf #114C77 3,73:1 AA (großer Text)

Aa #66AAF7 auf #7F3355 3,45:1 AA (großer Text)

Aa #CC9155 auf #114C77 3,33:1 AA (großer Text)

Aa #FFD588 auf #C45544 3,20:1 AA (großer Text)

Aa #FFFFFF auf #8891AA 3,14:1 AA (großer Text)

Aa #FFD588 auf #0A8A71 3,10:1 AA (großer Text)

Aa #CC9155 auf #7F3355 3,09:1 AA (großer Text)

Aa #114C77 auf #8891AA 2,87:1 Nicht bestanden

Aa #B2D4D4 auf #C45544 2,80:1 Nicht bestanden

Aa #FFFFFF auf #CC9155 2,71:1 Nicht bestanden

Aa #B2D4D4 auf #0A8A71 2,71:1 Nicht bestanden

Aa #7F3355 auf #8891AA 2,66:1 Nicht bestanden

Aa #7F3355 auf #000000 2,51:1 Nicht bestanden

Aa #FFFFFF auf #66AAF7 2,43:1 Nicht bestanden

Aa #000000 auf #114C77 2,32:1 Nicht bestanden

Aa #FFD588 auf #8891AA 2,27:1 Nicht bestanden

Aa #72CB48 auf #C45544 2,19:1 Nicht bestanden

Aa #72CB48 auf #0A8A71 2,12:1 Nicht bestanden

Aa #0A8A71 auf #114C77 2,10:1 Nicht bestanden

Aa #C45544 auf #114C77 2,04:1 Nicht bestanden

Aa #FFFFFF auf #72CB48 2,03:1 Nicht bestanden

Aa #B2D4D4 auf #8891AA 1,99:1 Nicht bestanden

Aa #FFD588 auf #CC9155 1,95:1 Nicht bestanden

Aa #0A8A71 auf #7F3355 1,95:1 Nicht bestanden

Aa #C45544 auf #7F3355 1,89:1 Nicht bestanden

Aa #C45544 auf #66AAF7 1,83:1 Nicht bestanden

Aa #0A8A71 auf #66AAF7 1,77:1 Nicht bestanden

Aa #FFD588 auf #66AAF7 1,75:1 Nicht bestanden

Aa #B2D4D4 auf #CC9155 1,71:1 Nicht bestanden

Aa #C45544 auf #CC9155 1,64:1 Nicht bestanden

Aa #CC9155 auf #0A8A71 1,59:1 Nicht bestanden

Aa #FFFFFF auf #B2D4D4 1,58:1 Nicht bestanden

Aa #72CB48 auf #8891AA 1,55:1 Nicht bestanden

Aa #B2D4D4 auf #66AAF7 1,53:1 Nicht bestanden

Aa #FFD588 auf #72CB48 1,46:1 Nicht bestanden

Aa #C45544 auf #8891AA 1,41:1 Nicht bestanden

Aa #FFFFFF auf #FFD588 1,39:1 Nicht bestanden

Aa #0A8A71 auf #8891AA 1,37:1 Nicht bestanden

Aa #72CB48 auf #CC9155 1,34:1 Nicht bestanden

Aa #66AAF7 auf #8891AA 1,30:1 Nicht bestanden

Aa #72CB48 auf #B2D4D4 1,28:1 Nicht bestanden

Aa #72CB48 auf #66AAF7 1,20:1 Nicht bestanden

Aa #CC9155 auf #8891AA 1,16:1 Nicht bestanden

Aa #FFD588 auf #B2D4D4 1,14:1 Nicht bestanden

Aa #CC9155 auf #66AAF7 1,12:1 Nicht bestanden

Aa #7F3355 auf #114C77 1,08:1 Nicht bestanden

Aa #C45544 auf #0A8A71 1,03:1 Nicht bestanden

Snap 12

Snap 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen