Elven_Eight

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

Zurück zur Bibliothek

Elven_Eight

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

Bearbeiten

Lebendig 8 Farben Warm Hell Komplementär fantasy bright rainbow

Likes 12

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FD90AA;
  --c-vibrant-2: #FEE9CF;
  --c-vibrant-3: #E4C8A5;
  --c-vibrant-4: #F5FF97;
  --c-vibrant-5: #94FF9B;
  --c-vibrant-6: #94E8FD;
  --c-vibrant-7: #4D494A;
  --c-vibrant-8: #E191FC;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Metal Spark (#F5FF97) bis zum dunkelsten Ton Bastion Grey (#4D494A). Sie vereint Baker-Miller Pink, Pale Egg, Gentle Fawn, Metal Spark, Bright Mint, Alpine Expedition, Bastion Grey und Bright Lilac in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F5FF97 auf #4D494A mit 8,29:1.

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

Farben im Detail

Baker-Miller Pink #FD90AA

RGB: rgb(253, 144, 170)
HSL: hsl(346, 96%, 78%)
Luminanz: 0,437

Pale Egg #FEE9CF

RGB: rgb(254, 233, 207)
HSL: hsl(33, 96%, 90%)
Luminanz: 0,839

Gentle Fawn #E4C8A5

RGB: rgb(228, 200, 165)
HSL: hsl(33, 54%, 77%)
Luminanz: 0,605

Metal Spark #F5FF97

RGB: rgb(245, 255, 151)
HSL: hsl(66, 100%, 80%)
Luminanz: 0,932

Bright Mint #94FF9B

RGB: rgb(148, 255, 155)
HSL: hsl(124, 100%, 79%)
Luminanz: 0,802

Alpine Expedition #94E8FD

RGB: rgb(148, 232, 253)
HSL: hsl(192, 96%, 79%)
Luminanz: 0,711

Bastion Grey #4D494A

RGB: rgb(77, 73, 74)
HSL: hsl(345, 3%, 29%)
Luminanz: 0,068

Bright Lilac #E191FC

RGB: rgb(225, 145, 252)
HSL: hsl(285, 95%, 78%)
Luminanz: 0,433

Kontrast & Barrierefreiheit

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

Aa #F5FF97 auf #4D494A 8,29:1 AAA

Aa #FEE9CF auf #4D494A 7,51:1 AAA

Aa #94FF9B auf #4D494A 7,20:1 AAA

Aa #94E8FD auf #4D494A 6,43:1 AA

Aa #E4C8A5 auf #4D494A 5,53:1 AA

Aa #FD90AA auf #4D494A 4,12:1 AA (großer Text)

Aa #4D494A auf #E191FC 4,08:1 AA (großer Text)

Aa #F5FF97 auf #E191FC 2,03:1 Nicht bestanden

Aa #FD90AA auf #F5FF97 2,01:1 Nicht bestanden

Aa #FEE9CF auf #E191FC 1,84:1 Nicht bestanden

Aa #FD90AA auf #FEE9CF 1,82:1 Nicht bestanden

Aa #94FF9B auf #E191FC 1,76:1 Nicht bestanden

Aa #FD90AA auf #94FF9B 1,75:1 Nicht bestanden

Aa #94E8FD auf #E191FC 1,58:1 Nicht bestanden

Aa #FD90AA auf #94E8FD 1,56:1 Nicht bestanden

Aa #E4C8A5 auf #F5FF97 1,50:1 Nicht bestanden

Aa #FEE9CF auf #E4C8A5 1,36:1 Nicht bestanden

Aa #E4C8A5 auf #E191FC 1,36:1 Nicht bestanden

Aa #FD90AA auf #E4C8A5 1,34:1 Nicht bestanden

Aa #E4C8A5 auf #94FF9B 1,30:1 Nicht bestanden

Aa #F5FF97 auf #94E8FD 1,29:1 Nicht bestanden

Aa #FEE9CF auf #94E8FD 1,17:1 Nicht bestanden

Aa #E4C8A5 auf #94E8FD 1,16:1 Nicht bestanden

Aa #F5FF97 auf #94FF9B 1,15:1 Nicht bestanden

Aa #94FF9B auf #94E8FD 1,12:1 Nicht bestanden

Aa #FEE9CF auf #F5FF97 1,10:1 Nicht bestanden

Aa #FEE9CF auf #94FF9B 1,04:1 Nicht bestanden

Aa #FD90AA auf #E191FC 1,01:1 Nicht bestanden

Elven_Eight

Elven_Eight

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen