Paradise 8

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

Zurück zur Bibliothek

Paradise 8

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

Bearbeiten

Lebendig 8 Farben Neutral Hell Komplementär blue purple 3bit 3bit3cember

Likes 42

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #443965;
  --c-vibrant-2: #B45CE7;
  --c-vibrant-3: #F779F3;
  --c-vibrant-4: #FFBCF0;
  --c-vibrant-5: #FFF6EA;
  --c-vibrant-6: #B0F3F3;
  --c-vibrant-7: #96B1F3;
  --c-vibrant-8: #653ABA;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Apricot Ice (#FFF6EA) bis zum dunkelsten Ton Mulberry Purple (#443965). Sie vereint Mulberry Purple, Light Shōtoku Purple, Princess Peach, Pink Quartz, Apricot Ice, Mint Macaron, Wondrous Wisteria und Purple Emperor 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 #443965 auf #FFF6EA mit 9,72:1.

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

Farben im Detail

Mulberry Purple #443965

RGB: rgb(68, 57, 101)
HSL: hsl(255, 28%, 31%)
Luminanz: 0,051

Light Shōtoku Purple #B45CE7

RGB: rgb(180, 92, 231)
HSL: hsl(278, 74%, 63%)
Luminanz: 0,231

Princess Peach #F779F3

RGB: rgb(247, 121, 243)
HSL: hsl(302, 89%, 72%)
Luminanz: 0,399

Pink Quartz #FFBCF0

RGB: rgb(255, 188, 240)
HSL: hsl(313, 100%, 87%)
Luminanz: 0,635

Apricot Ice #FFF6EA

RGB: rgb(255, 246, 234)
HSL: hsl(34, 100%, 96%)
Luminanz: 0,931

Mint Macaron #B0F3F3

RGB: rgb(176, 243, 243)
HSL: hsl(180, 74%, 82%)
Luminanz: 0,798

Wondrous Wisteria #96B1F3

RGB: rgb(150, 177, 243)
HSL: hsl(223, 79%, 77%)
Luminanz: 0,444

Purple Emperor #653ABA

RGB: rgb(101, 58, 186)
HSL: hsl(260, 52%, 48%)
Luminanz: 0,093

Kontrast & Barrierefreiheit

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

Aa #443965 auf #FFF6EA 9,72:1 AAA

Aa #443965 auf #B0F3F3 8,40:1 AAA

Aa #FFF6EA auf #653ABA 6,84:1 AA

Aa #443965 auf #FFBCF0 6,79:1 AA

Aa #B0F3F3 auf #653ABA 5,91:1 AA

Aa #443965 auf #96B1F3 4,89:1 AA

Aa #FFBCF0 auf #653ABA 4,78:1 AA

Aa #443965 auf #F779F3 4,45:1 AA (großer Text)

Aa #B45CE7 auf #FFF6EA 3,49:1 AA (großer Text)

Aa #96B1F3 auf #653ABA 3,45:1 AA (großer Text)

Aa #F779F3 auf #653ABA 3,13:1 AA (großer Text)

Aa #B45CE7 auf #B0F3F3 3,01:1 AA (großer Text)

Aa #443965 auf #B45CE7 2,79:1 Nicht bestanden

Aa #B45CE7 auf #FFBCF0 2,44:1 Nicht bestanden

Aa #F779F3 auf #FFF6EA 2,18:1 Nicht bestanden

Aa #FFF6EA auf #96B1F3 1,99:1 Nicht bestanden

Aa #B45CE7 auf #653ABA 1,96:1 Nicht bestanden

Aa #F779F3 auf #B0F3F3 1,89:1 Nicht bestanden

Aa #B45CE7 auf #96B1F3 1,76:1 Nicht bestanden

Aa #B0F3F3 auf #96B1F3 1,72:1 Nicht bestanden

Aa #B45CE7 auf #F779F3 1,60:1 Nicht bestanden

Aa #F779F3 auf #FFBCF0 1,53:1 Nicht bestanden

Aa #FFBCF0 auf #FFF6EA 1,43:1 Nicht bestanden

Aa #443965 auf #653ABA 1,42:1 Nicht bestanden

Aa #FFBCF0 auf #96B1F3 1,39:1 Nicht bestanden

Aa #FFBCF0 auf #B0F3F3 1,24:1 Nicht bestanden

Aa #FFF6EA auf #B0F3F3 1,16:1 Nicht bestanden

Aa #F779F3 auf #96B1F3 1,10:1 Nicht bestanden

Paradise 8

Paradise 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen