Elo

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

Zurück zur Bibliothek

Elo

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Analog green sunset mypalette blueno

Likes 27

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #D05252;
  --c-earthy-2: #8A8277;
  --c-earthy-3: #D6AC72;
  --c-earthy-4: #423E38;
  --c-earthy-5: #998B9D;
  --c-earthy-6: #6A7F68;
  --c-earthy-7: #834944;
  --c-earthy-8: #C79EA0;
  --c-earthy-9: #E5B760;
  --c-earthy-10: #92AF68;
  --c-earthy-11: #FFFFFF;
  --c-earthy-12: #ECEBE9;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Joesmithite (#423E38). Sie vereint Chestnut Rose, Crust, Gobi Sand, Joesmithite, Eccentricity, Cricket Green, Deco Red, Beauty Secret, River of Gold, Celuce, White und Lace Veil in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #423E38 auf #FFFFFF mit 10,62: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

Chestnut Rose #D05252

RGB: rgb(208, 82, 82)
HSL: hsl(0, 57%, 57%)
Luminanz: 0,201

Crust #8A8277

RGB: rgb(138, 130, 119)
HSL: hsl(35, 8%, 50%)
Luminanz: 0,227

Gobi Sand #D6AC72

RGB: rgb(214, 172, 114)
HSL: hsl(35, 55%, 64%)
Luminanz: 0,450

Joesmithite #423E38

RGB: rgb(66, 62, 56)
HSL: hsl(36, 8%, 24%)
Luminanz: 0,049

Eccentricity #998B9D

RGB: rgb(153, 139, 157)
HSL: hsl(287, 8%, 58%)
Luminanz: 0,277

Cricket Green #6A7F68

RGB: rgb(106, 127, 104)
HSL: hsl(115, 10%, 45%)
Luminanz: 0,192

Deco Red #834944

RGB: rgb(131, 73, 68)
HSL: hsl(5, 32%, 39%)
Luminanz: 0,100

Beauty Secret #C79EA0

RGB: rgb(199, 158, 160)
HSL: hsl(357, 27%, 70%)
Luminanz: 0,391

River of Gold #E5B760

RGB: rgb(229, 183, 96)
HSL: hsl(39, 72%, 64%)
Luminanz: 0,514

Celuce #92AF68

RGB: rgb(146, 175, 104)
HSL: hsl(85, 31%, 55%)
Luminanz: 0,378

White #FFFFFF

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

Lace Veil #ECEBE9

RGB: rgb(236, 235, 233)
HSL: hsl(40, 7%, 92%)
Luminanz: 0,831

Kontrast & Barrierefreiheit

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

Aa #423E38 auf #FFFFFF 10,62:1 AAA

Aa #423E38 auf #ECEBE9 8,91:1 AAA

Aa #834944 auf #FFFFFF 7,00:1 AAA

Aa #834944 auf #ECEBE9 5,87:1 AA

Aa #423E38 auf #E5B760 5,70:1 AA

Aa #D6AC72 auf #423E38 5,06:1 AA

Aa #423E38 auf #C79EA0 4,46:1 AA (großer Text)

Aa #423E38 auf #92AF68 4,33:1 AA (großer Text)

Aa #6A7F68 auf #FFFFFF 4,33:1 AA (großer Text)

Aa #D05252 auf #FFFFFF 4,19:1 AA (großer Text)

Aa #8A8277 auf #FFFFFF 3,79:1 AA (großer Text)

Aa #834944 auf #E5B760 3,76:1 AA (großer Text)

Aa #6A7F68 auf #ECEBE9 3,64:1 AA (großer Text)

Aa #D05252 auf #ECEBE9 3,52:1 AA (großer Text)

Aa #D6AC72 auf #834944 3,33:1 AA (großer Text)

Aa #423E38 auf #998B9D 3,30:1 AA (großer Text)

Aa #998B9D auf #FFFFFF 3,21:1 AA (großer Text)

Aa #8A8277 auf #ECEBE9 3,18:1 AA (großer Text)

Aa #834944 auf #C79EA0 2,94:1 Nicht bestanden

Aa #834944 auf #92AF68 2,85:1 Nicht bestanden

Aa #8A8277 auf #423E38 2,80:1 Nicht bestanden

Aa #998B9D auf #ECEBE9 2,70:1 Nicht bestanden

Aa #D05252 auf #423E38 2,53:1 Nicht bestanden

Aa #423E38 auf #6A7F68 2,45:1 Nicht bestanden

Aa #92AF68 auf #FFFFFF 2,45:1 Nicht bestanden

Aa #C79EA0 auf #FFFFFF 2,38:1 Nicht bestanden

Aa #6A7F68 auf #E5B760 2,33:1 Nicht bestanden

Aa #D05252 auf #E5B760 2,25:1 Nicht bestanden

Aa #998B9D auf #834944 2,18:1 Nicht bestanden

Aa #D6AC72 auf #FFFFFF 2,10:1 Nicht bestanden

Aa #D6AC72 auf #6A7F68 2,06:1 Nicht bestanden

Aa #92AF68 auf #ECEBE9 2,06:1 Nicht bestanden

Aa #8A8277 auf #E5B760 2,03:1 Nicht bestanden

Aa #D05252 auf #D6AC72 2,00:1 Nicht bestanden

Aa #C79EA0 auf #ECEBE9 2,00:1 Nicht bestanden

Aa #E5B760 auf #FFFFFF 1,86:1 Nicht bestanden

Aa #8A8277 auf #834944 1,85:1 Nicht bestanden

Aa #6A7F68 auf #C79EA0 1,82:1 Nicht bestanden

Aa #8A8277 auf #D6AC72 1,81:1 Nicht bestanden

Aa #D05252 auf #C79EA0 1,76:1 Nicht bestanden

Aa #D6AC72 auf #ECEBE9 1,76:1 Nicht bestanden

Aa #6A7F68 auf #92AF68 1,76:1 Nicht bestanden

Aa #998B9D auf #E5B760 1,73:1 Nicht bestanden

Aa #D05252 auf #92AF68 1,71:1 Nicht bestanden

Aa #D05252 auf #834944 1,67:1 Nicht bestanden

Aa #6A7F68 auf #834944 1,62:1 Nicht bestanden

Aa #8A8277 auf #C79EA0 1,59:1 Nicht bestanden

Aa #E5B760 auf #ECEBE9 1,56:1 Nicht bestanden

Aa #8A8277 auf #92AF68 1,54:1 Nicht bestanden

Aa #D6AC72 auf #998B9D 1,53:1 Nicht bestanden

Aa #423E38 auf #834944 1,52:1 Nicht bestanden

Aa #998B9D auf #6A7F68 1,35:1 Nicht bestanden

Aa #998B9D auf #C79EA0 1,35:1 Nicht bestanden

Aa #E5B760 auf #92AF68 1,32:1 Nicht bestanden

Aa #998B9D auf #92AF68 1,31:1 Nicht bestanden

Aa #D05252 auf #998B9D 1,30:1 Nicht bestanden

Aa #C79EA0 auf #E5B760 1,28:1 Nicht bestanden

Aa #FFFFFF auf #ECEBE9 1,19:1 Nicht bestanden

Aa #8A8277 auf #998B9D 1,18:1 Nicht bestanden

Aa #D6AC72 auf #92AF68 1,17:1 Nicht bestanden

Aa #8A8277 auf #6A7F68 1,14:1 Nicht bestanden

Aa #D6AC72 auf #C79EA0 1,13:1 Nicht bestanden

Aa #D6AC72 auf #E5B760 1,13:1 Nicht bestanden

Aa #D05252 auf #8A8277 1,11:1 Nicht bestanden

Aa #D05252 auf #6A7F68 1,03:1 Nicht bestanden

Aa #C79EA0 auf #92AF68 1,03:1 Nicht bestanden

Elo

Elo

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen