Royal8

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

Zurück zur Bibliothek

Royal8

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär purple gold royal

Likes 15

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #2E0FA8;
  --c-vibrant-2: #8916F5;
  --c-vibrant-3: #B067FA;
  --c-vibrant-4: #BD7013;
  --c-vibrant-5: #F5C813;
  --c-vibrant-6: #FAEE67;
  --c-vibrant-7: #FFFFFF;
  --c-vibrant-8: #1B1636;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Lost in Sadness (#1B1636). Sie vereint Deep Daijin Blue, Punk Rock Pink, Purple Hedonist, Sweet Mulled Cider, Egg Toast, Yellowish, White und Lost in Sadness in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 10 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #1B1636 mit 17,29:1.

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

Farben im Detail

Deep Daijin Blue #2E0FA8

RGB: rgb(46, 15, 168)
HSL: hsl(252, 84%, 36%)
Luminanz: 0,038

Punk Rock Pink #8916F5

RGB: rgb(137, 22, 245)
HSL: hsl(271, 92%, 52%)
Luminanz: 0,125

Purple Hedonist #B067FA

RGB: rgb(176, 103, 250)
HSL: hsl(270, 94%, 69%)
Luminanz: 0,258

Sweet Mulled Cider #BD7013

RGB: rgb(189, 112, 19)
HSL: hsl(33, 82%, 41%)
Luminanz: 0,225

Egg Toast #F5C813

RGB: rgb(245, 200, 19)
HSL: hsl(48, 92%, 52%)
Luminanz: 0,608

Yellowish #FAEE67

RGB: rgb(250, 238, 103)
HSL: hsl(55, 94%, 69%)
Luminanz: 0,825

White #FFFFFF

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

Lost in Sadness #1B1636

RGB: rgb(27, 22, 54)
HSL: hsl(249, 42%, 15%)
Luminanz: 0,011

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #1B1636 17,29:1 AAA

Aa #FAEE67 auf #1B1636 14,40:1 AAA

Aa #2E0FA8 auf #FFFFFF 12,00:1 AAA

Aa #F5C813 auf #1B1636 10,83:1 AAA

Aa #2E0FA8 auf #FAEE67 9,99:1 AAA

Aa #2E0FA8 auf #F5C813 7,52:1 AAA

Aa #8916F5 auf #FFFFFF 6,01:1 AA

Aa #B067FA auf #1B1636 5,08:1 AA

Aa #8916F5 auf #FAEE67 5,00:1 AA

Aa #BD7013 auf #1B1636 4,52:1 AA

Aa #BD7013 auf #FFFFFF 3,82:1 AA (großer Text)

Aa #8916F5 auf #F5C813 3,76:1 AA (großer Text)

Aa #2E0FA8 auf #B067FA 3,52:1 AA (großer Text)

Aa #B067FA auf #FFFFFF 3,41:1 AA (großer Text)

Aa #BD7013 auf #FAEE67 3,19:1 AA (großer Text)

Aa #2E0FA8 auf #BD7013 3,14:1 AA (großer Text)

Aa #8916F5 auf #1B1636 2,88:1 Nicht bestanden

Aa #B067FA auf #FAEE67 2,84:1 Nicht bestanden

Aa #BD7013 auf #F5C813 2,40:1 Nicht bestanden

Aa #B067FA auf #F5C813 2,13:1 Nicht bestanden

Aa #2E0FA8 auf #8916F5 2,00:1 Nicht bestanden

Aa #8916F5 auf #B067FA 1,76:1 Nicht bestanden

Aa #F5C813 auf #FFFFFF 1,60:1 Nicht bestanden

Aa #8916F5 auf #BD7013 1,57:1 Nicht bestanden

Aa #2E0FA8 auf #1B1636 1,44:1 Nicht bestanden

Aa #F5C813 auf #FAEE67 1,33:1 Nicht bestanden

Aa #FAEE67 auf #FFFFFF 1,20:1 Nicht bestanden

Aa #B067FA auf #BD7013 1,12:1 Nicht bestanden

Royal8

Royal8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen