Startseite Farbpaletten Modern Interface

Modern Interface

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

Zurück zur Bibliothek

Modern Interface

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

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Komplementär pixelart interface ui dashboard

Likes 18

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #ECECD3;
  --c-muted-2: #D5D49B;
  --c-muted-3: #8EAD58;
  --c-muted-4: #3B633D;
  --c-muted-5: #B8B5D0;
  --c-muted-6: #908E9E;
  --c-muted-7: #534A68;
  --c-muted-8: #303245;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Budding Fern (#ECECD3) bis zum dunkelsten Ton Maritime Blue (#303245). Sie vereint Budding Fern, Crocodile Tears, Usumoegi Green, Jurassic Park, Madder Blue, Evening in Paris, Darlak und Maritime Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #ECECD3 auf #303245 mit 10,5:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Budding Fern #ECECD3

RGB: rgb(236, 236, 211)
HSL: hsl(60, 40%, 88%)
Luminanz: 0,825

Crocodile Tears #D5D49B

RGB: rgb(213, 212, 155)
HSL: hsl(59, 41%, 72%)
Luminanz: 0,636

Usumoegi Green #8EAD58

RGB: rgb(142, 173, 88)
HSL: hsl(82, 34%, 51%)
Luminanz: 0,363

Jurassic Park #3B633D

RGB: rgb(59, 99, 61)
HSL: hsl(123, 25%, 31%)
Luminanz: 0,102

Madder Blue #B8B5D0

RGB: rgb(184, 181, 208)
HSL: hsl(247, 22%, 76%)
Luminanz: 0,478

Evening in Paris #908E9E

RGB: rgb(144, 142, 158)
HSL: hsl(248, 8%, 59%)
Luminanz: 0,277

Darlak #534A68

RGB: rgb(83, 74, 104)
HSL: hsl(258, 17%, 35%)
Luminanz: 0,077

Maritime Blue #303245

RGB: rgb(48, 50, 69)
HSL: hsl(234, 18%, 23%)
Luminanz: 0,033

Kontrast & Barrierefreiheit

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

Aa #ECECD3 auf #303245 10,50:1 AAA

Aa #D5D49B auf #303245 8,23:1 AAA

Aa #ECECD3 auf #534A68 6,87:1 AA

Aa #B8B5D0 auf #303245 6,33:1 AA

Aa #ECECD3 auf #3B633D 5,76:1 AA

Aa #D5D49B auf #534A68 5,39:1 AA

Aa #8EAD58 auf #303245 4,96:1 AA

Aa #D5D49B auf #3B633D 4,52:1 AA

Aa #B8B5D0 auf #534A68 4,15:1 AA (großer Text)

Aa #908E9E auf #303245 3,93:1 AA (großer Text)

Aa #3B633D auf #B8B5D0 3,48:1 AA (großer Text)

Aa #8EAD58 auf #534A68 3,25:1 AA (großer Text)

Aa #8EAD58 auf #3B633D 2,72:1 Nicht bestanden

Aa #ECECD3 auf #908E9E 2,67:1 Nicht bestanden

Aa #908E9E auf #534A68 2,57:1 Nicht bestanden

Aa #3B633D auf #908E9E 2,16:1 Nicht bestanden

Aa #ECECD3 auf #8EAD58 2,12:1 Nicht bestanden

Aa #D5D49B auf #908E9E 2,10:1 Nicht bestanden

Aa #3B633D auf #303245 1,82:1 Nicht bestanden

Aa #ECECD3 auf #B8B5D0 1,66:1 Nicht bestanden

Aa #D5D49B auf #8EAD58 1,66:1 Nicht bestanden

Aa #B8B5D0 auf #908E9E 1,61:1 Nicht bestanden

Aa #534A68 auf #303245 1,53:1 Nicht bestanden

Aa #D5D49B auf #B8B5D0 1,30:1 Nicht bestanden

Aa #ECECD3 auf #D5D49B 1,28:1 Nicht bestanden

Aa #8EAD58 auf #B8B5D0 1,28:1 Nicht bestanden

Aa #8EAD58 auf #908E9E 1,26:1 Nicht bestanden

Aa #3B633D auf #534A68 1,19:1 Nicht bestanden

Modern Interface