Avatars

Palette mit 8 Farben · Warm · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Avatars

Palette mit 8 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Erdig 8 Farben Warm Gemischt Analog pixelart fantasy characters avatars

Likes 30

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #503141;
  --c-earthy-2: #8B4057;
  --c-earthy-3: #AE7847;
  --c-earthy-4: #CAA75A;
  --c-earthy-5: #CED1A6;
  --c-earthy-6: #95A598;
  --c-earthy-7: #677381;
  --c-earthy-8: #565162;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton True to You (#CED1A6) bis zum dunkelsten Ton Velvet Touch (#503141). Sie vereint Velvet Touch, Umemurasaki Purple, Meerkat, Excitable, True to You, Olive Soap, Flintstone und Illusionist in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #503141 auf #CED1A6 mit 7,16: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

Velvet Touch #503141

RGB: rgb(80, 49, 65)
HSL: hsl(329, 24%, 25%)
Luminanz: 0,043

Umemurasaki Purple #8B4057

RGB: rgb(139, 64, 87)
HSL: hsl(342, 37%, 40%)
Luminanz: 0,098

Meerkat #AE7847

RGB: rgb(174, 120, 71)
HSL: hsl(29, 42%, 48%)
Luminanz: 0,229

Excitable #CAA75A

RGB: rgb(202, 167, 90)
HSL: hsl(41, 51%, 57%)
Luminanz: 0,409

True to You #CED1A6

RGB: rgb(206, 209, 166)
HSL: hsl(64, 32%, 74%)
Luminanz: 0,615

Olive Soap #95A598

RGB: rgb(149, 165, 152)
HSL: hsl(131, 8%, 62%)
Luminanz: 0,356

Flintstone #677381

RGB: rgb(103, 115, 129)
HSL: hsl(212, 11%, 45%)
Luminanz: 0,167

Illusionist #565162

RGB: rgb(86, 81, 98)
HSL: hsl(258, 9%, 35%)
Luminanz: 0,088

Kontrast & Barrierefreiheit

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

Aa #503141 auf #CED1A6 7,16:1 AAA

Aa #503141 auf #CAA75A 4,95:1 AA

Aa #CED1A6 auf #565162 4,84:1 AA

Aa #8B4057 auf #CED1A6 4,48:1 AA (großer Text)

Aa #503141 auf #95A598 4,37:1 AA (großer Text)

Aa #CAA75A auf #565162 3,34:1 AA (großer Text)

Aa #8B4057 auf #CAA75A 3,09:1 AA (großer Text)

Aa #CED1A6 auf #677381 3,06:1 AA (großer Text)

Aa #503141 auf #AE7847 3,00:1 AA (großer Text)

Aa #95A598 auf #565162 2,95:1 Nicht bestanden

Aa #8B4057 auf #95A598 2,73:1 Nicht bestanden

Aa #AE7847 auf #CED1A6 2,38:1 Nicht bestanden

Aa #503141 auf #677381 2,34:1 Nicht bestanden

Aa #CAA75A auf #677381 2,11:1 Nicht bestanden

Aa #AE7847 auf #565162 2,03:1 Nicht bestanden

Aa #8B4057 auf #AE7847 1,88:1 Nicht bestanden

Aa #95A598 auf #677381 1,87:1 Nicht bestanden

Aa #AE7847 auf #CAA75A 1,65:1 Nicht bestanden

Aa #CED1A6 auf #95A598 1,64:1 Nicht bestanden

Aa #503141 auf #8B4057 1,60:1 Nicht bestanden

Aa #677381 auf #565162 1,58:1 Nicht bestanden

Aa #503141 auf #565162 1,48:1 Nicht bestanden

Aa #8B4057 auf #677381 1,46:1 Nicht bestanden

Aa #AE7847 auf #95A598 1,45:1 Nicht bestanden

Aa #CAA75A auf #CED1A6 1,45:1 Nicht bestanden

Aa #AE7847 auf #677381 1,28:1 Nicht bestanden

Aa #CAA75A auf #95A598 1,13:1 Nicht bestanden

Aa #8B4057 auf #565162 1,08:1 Nicht bestanden

Avatars

Avatars

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen