Challenge 9

Palette mit 9 Farben · Warm · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Challenge 9

Palette mit 9 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Erdig 9 Farben Warm Gemischt Triadisch groxguy challenge 9color 9colour

Likes 17

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #000000;
  --c-earthy-2: #FFFFFF;
  --c-earthy-3: #E2BA6F;
  --c-earthy-4: #A58F82;
  --c-earthy-5: #876343;
  --c-earthy-6: #F78847;
  --c-earthy-7: #68180D;
  --c-earthy-8: #2CC15E;
  --c-earthy-9: #256EC6;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, White, Cloudy Honey, Beach Cabana, Sedona Brown, Poppy Glow, Cherrywood, Cool Green und Mimesia Blue 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 #000000 auf #FFFFFF 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

Black #000000

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

White #FFFFFF

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

Cloudy Honey #E2BA6F

RGB: rgb(226, 186, 111)
HSL: hsl(39, 66%, 66%)
Luminanz: 0,524

Beach Cabana #A58F82

RGB: rgb(165, 143, 130)
HSL: hsl(22, 16%, 58%)
Luminanz: 0,293

Sedona Brown #876343

RGB: rgb(135, 99, 67)
HSL: hsl(28, 34%, 40%)
Luminanz: 0,145

Poppy Glow #F78847

RGB: rgb(247, 136, 71)
HSL: hsl(22, 92%, 62%)
Luminanz: 0,378

Cherrywood #68180D

RGB: rgb(104, 24, 13)
HSL: hsl(7, 78%, 23%)
Luminanz: 0,036

Cool Green #2CC15E

RGB: rgb(44, 193, 94)
HSL: hsl(140, 63%, 46%)
Luminanz: 0,395

Mimesia Blue #256EC6

RGB: rgb(37, 110, 198)
HSL: hsl(213, 69%, 46%)
Luminanz: 0,156

Kontrast & Barrierefreiheit

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

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

Aa #FFFFFF auf #68180D 12,17:1 AAA

Aa #000000 auf #E2BA6F 11,49:1 AAA

Aa #000000 auf #2CC15E 8,90:1 AAA

Aa #000000 auf #F78847 8,57:1 AAA

Aa #000000 auf #A58F82 6,85:1 AA

Aa #E2BA6F auf #68180D 6,66:1 AA

Aa #FFFFFF auf #876343 5,39:1 AA

Aa #68180D auf #2CC15E 5,16:1 AA

Aa #FFFFFF auf #256EC6 5,09:1 AA

Aa #F78847 auf #68180D 4,97:1 AA

Aa #000000 auf #256EC6 4,12:1 AA (großer Text)

Aa #A58F82 auf #68180D 3,97:1 AA (großer Text)

Aa #000000 auf #876343 3,90:1 AA (großer Text)

Aa #FFFFFF auf #A58F82 3,07:1 AA (großer Text)

Aa #E2BA6F auf #876343 2,95:1 Nicht bestanden

Aa #E2BA6F auf #256EC6 2,79:1 Nicht bestanden

Aa #FFFFFF auf #F78847 2,45:1 Nicht bestanden

Aa #68180D auf #256EC6 2,39:1 Nicht bestanden

Aa #FFFFFF auf #2CC15E 2,36:1 Nicht bestanden

Aa #876343 auf #2CC15E 2,28:1 Nicht bestanden

Aa #876343 auf #68180D 2,26:1 Nicht bestanden

Aa #876343 auf #F78847 2,20:1 Nicht bestanden

Aa #2CC15E auf #256EC6 2,16:1 Nicht bestanden

Aa #F78847 auf #256EC6 2,08:1 Nicht bestanden

Aa #FFFFFF auf #E2BA6F 1,83:1 Nicht bestanden

Aa #A58F82 auf #876343 1,76:1 Nicht bestanden

Aa #000000 auf #68180D 1,73:1 Nicht bestanden

Aa #E2BA6F auf #A58F82 1,68:1 Nicht bestanden

Aa #A58F82 auf #256EC6 1,66:1 Nicht bestanden

Aa #E2BA6F auf #F78847 1,34:1 Nicht bestanden

Aa #A58F82 auf #2CC15E 1,30:1 Nicht bestanden

Aa #E2BA6F auf #2CC15E 1,29:1 Nicht bestanden

Aa #A58F82 auf #F78847 1,25:1 Nicht bestanden

Aa #876343 auf #256EC6 1,06:1 Nicht bestanden

Aa #F78847 auf #2CC15E 1,04:1 Nicht bestanden

Challenge 9

Challenge 9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen