Notebook

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Notebook

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 8 Farben Kühl Gemischt Komplementär gray red blue purple

Likes 111

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #E6ECEF;
  --c-earthy-2: #B2B1C0;
  --c-earthy-3: #5B4F6E;
  --c-earthy-4: #280732;
  --c-earthy-5: #E15E6E;
  --c-earthy-6: #F3A8A8;
  --c-earthy-7: #7194F0;
  --c-earthy-8: #ABC9F1;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Icewind Dale (#E6ECEF) bis zum dunkelsten Ton Poisonous Purple (#280732). Sie vereint Icewind Dale, Nebulous December, Crowning, Poisonous Purple, Swiss Chard, Faint of Heart, Guilliman Blue und Blossom Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #E6ECEF auf #280732 mit 15,09: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

Icewind Dale #E6ECEF

RGB: rgb(230, 236, 239)
HSL: hsl(200, 22%, 92%)
Luminanz: 0,831

Nebulous December #B2B1C0

RGB: rgb(178, 177, 192)
HSL: hsl(244, 11%, 72%)
Luminanz: 0,447

Crowning #5B4F6E

RGB: rgb(91, 79, 110)
HSL: hsl(263, 16%, 37%)
Luminanz: 0,089

Poisonous Purple #280732

RGB: rgb(40, 7, 50)
HSL: hsl(286, 75%, 11%)
Luminanz: 0,008

Swiss Chard #E15E6E

RGB: rgb(225, 94, 110)
HSL: hsl(353, 69%, 63%)
Luminanz: 0,251

Faint of Heart #F3A8A8

RGB: rgb(243, 168, 168)
HSL: hsl(0, 76%, 81%)
Luminanz: 0,499

Guilliman Blue #7194F0

RGB: rgb(113, 148, 240)
HSL: hsl(223, 81%, 69%)
Luminanz: 0,310

Blossom Blue #ABC9F1

RGB: rgb(171, 201, 241)
HSL: hsl(214, 71%, 81%)
Luminanz: 0,568

Kontrast & Barrierefreiheit

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

Aa #E6ECEF auf #280732 15,09:1 AAA

Aa #280732 auf #ABC9F1 10,59:1 AAA

Aa #280732 auf #F3A8A8 9,41:1 AAA

Aa #B2B1C0 auf #280732 8,52:1 AAA

Aa #E6ECEF auf #5B4F6E 6,32:1 AA

Aa #280732 auf #7194F0 6,17:1 AA

Aa #280732 auf #E15E6E 5,17:1 AA

Aa #5B4F6E auf #ABC9F1 4,43:1 AA (großer Text)

Aa #5B4F6E auf #F3A8A8 3,94:1 AA (großer Text)

Aa #B2B1C0 auf #5B4F6E 3,57:1 AA (großer Text)

Aa #E6ECEF auf #E15E6E 2,92:1 Nicht bestanden

Aa #5B4F6E auf #7194F0 2,58:1 Nicht bestanden

Aa #E6ECEF auf #7194F0 2,45:1 Nicht bestanden

Aa #5B4F6E auf #280732 2,39:1 Nicht bestanden

Aa #5B4F6E auf #E15E6E 2,16:1 Nicht bestanden

Aa #E15E6E auf #ABC9F1 2,05:1 Nicht bestanden

Aa #E15E6E auf #F3A8A8 1,82:1 Nicht bestanden

Aa #E6ECEF auf #B2B1C0 1,77:1 Nicht bestanden

Aa #7194F0 auf #ABC9F1 1,72:1 Nicht bestanden

Aa #B2B1C0 auf #E15E6E 1,65:1 Nicht bestanden

Aa #E6ECEF auf #F3A8A8 1,60:1 Nicht bestanden

Aa #F3A8A8 auf #7194F0 1,53:1 Nicht bestanden

Aa #E6ECEF auf #ABC9F1 1,43:1 Nicht bestanden

Aa #B2B1C0 auf #7194F0 1,38:1 Nicht bestanden

Aa #B2B1C0 auf #ABC9F1 1,24:1 Nicht bestanden

Aa #E15E6E auf #7194F0 1,19:1 Nicht bestanden

Aa #F3A8A8 auf #ABC9F1 1,13:1 Nicht bestanden

Aa #B2B1C0 auf #F3A8A8 1,10:1 Nicht bestanden

Notebook

Notebook

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen