AJ8

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

Zurück zur Bibliothek

AJ8

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

Bearbeiten

Erdig 8 Farben Warm Gemischt Komplementär

Likes 9

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #000000;
  --c-earthy-2: #777777;
  --c-earthy-3: #FFFFFF;
  --c-earthy-4: #BB4444;
  --c-earthy-5: #FFDD44;
  --c-earthy-6: #007722;
  --c-earthy-7: #77BBFF;
  --c-earthy-8: #553366;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Lucky Grey, White, Snakebite, Golden Boy, Green Glutton, Cooler Than Ever und Damson Mauve 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 #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

Lucky Grey #777777

RGB: rgb(119, 119, 119)
HSL: hsl(0, 0%, 47%)
Luminanz: 0,185

White #FFFFFF

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

Snakebite #BB4444

RGB: rgb(187, 68, 68)
HSL: hsl(0, 47%, 50%)
Luminanz: 0,151

Golden Boy #FFDD44

RGB: rgb(255, 221, 68)
HSL: hsl(49, 100%, 63%)
Luminanz: 0,734

Green Glutton #007722

RGB: rgb(0, 119, 34)
HSL: hsl(137, 100%, 23%)
Luminanz: 0,133

Cooler Than Ever #77BBFF

RGB: rgb(119, 187, 255)
HSL: hsl(210, 100%, 73%)
Luminanz: 0,467

Damson Mauve #553366

RGB: rgb(85, 51, 102)
HSL: hsl(280, 33%, 30%)
Luminanz: 0,053

Kontrast & Barrierefreiheit

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

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

Aa #000000 auf #FFDD44 15,68:1 AAA

Aa #000000 auf #77BBFF 10,34:1 AAA

Aa #FFFFFF auf #553366 10,24:1 AAA

Aa #FFDD44 auf #553366 7,64:1 AAA

Aa #FFFFFF auf #007722 5,73:1 AA

Aa #FFFFFF auf #BB4444 5,22:1 AA

Aa #77BBFF auf #553366 5,04:1 AA

Aa #000000 auf #777777 4,69:1 AA

Aa #777777 auf #FFFFFF 4,48:1 AA (großer Text)

Aa #FFDD44 auf #007722 4,28:1 AA (großer Text)

Aa #000000 auf #BB4444 4,02:1 AA (großer Text)

Aa #BB4444 auf #FFDD44 3,90:1 AA (großer Text)

Aa #000000 auf #007722 3,66:1 AA (großer Text)

Aa #777777 auf #FFDD44 3,34:1 AA (großer Text)

Aa #007722 auf #77BBFF 2,82:1 Nicht bestanden

Aa #BB4444 auf #77BBFF 2,57:1 Nicht bestanden

Aa #777777 auf #553366 2,29:1 Nicht bestanden

Aa #777777 auf #77BBFF 2,20:1 Nicht bestanden

Aa #000000 auf #553366 2,05:1 Nicht bestanden

Aa #FFFFFF auf #77BBFF 2,03:1 Nicht bestanden

Aa #BB4444 auf #553366 1,96:1 Nicht bestanden

Aa #007722 auf #553366 1,78:1 Nicht bestanden

Aa #FFDD44 auf #77BBFF 1,52:1 Nicht bestanden

Aa #FFFFFF auf #FFDD44 1,34:1 Nicht bestanden

Aa #777777 auf #007722 1,28:1 Nicht bestanden

Aa #777777 auf #BB4444 1,17:1 Nicht bestanden

Aa #BB4444 auf #007722 1,10:1 Nicht bestanden

AJ8

AJ8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen