Wacks8

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

Zurück zur Bibliothek

Wacks8

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

Bearbeiten

Lebendig 8 Farben Neutral Gemischt Komplementär vibrant colorful 8 nostalgic

Likes 37

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #0A0E33;
  --c-vibrant-2: #C8232A;
  --c-vibrant-3: #F1E038;
  --c-vibrant-4: #14964C;
  --c-vibrant-5: #8CB5ED;
  --c-vibrant-6: #2B65E2;
  --c-vibrant-7: #C523AC;
  --c-vibrant-8: #E4DBF0;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Lingering Lilac (#E4DBF0) bis zum dunkelsten Ton Infinite Night (#0A0E33). Sie vereint Infinite Night, Flush Mahogany, Juicy Jackfruit, Boogie Blast, Electric Eel, Enchanting Sapphire, Mystifying Magenta und Lingering Lilac in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0A0E33 auf #E4DBF0 mit 13,96:1.

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

Farben im Detail

Infinite Night #0A0E33

RGB: rgb(10, 14, 51)
HSL: hsl(234, 67%, 12%)
Luminanz: 0,006

Flush Mahogany #C8232A

RGB: rgb(200, 35, 42)
HSL: hsl(357, 70%, 46%)
Luminanz: 0,137

Juicy Jackfruit #F1E038

RGB: rgb(241, 224, 56)
HSL: hsl(54, 87%, 58%)
Luminanz: 0,723

Boogie Blast #14964C

RGB: rgb(20, 150, 76)
HSL: hsl(146, 76%, 33%)
Luminanz: 0,225

Electric Eel #8CB5ED

RGB: rgb(140, 181, 237)
HSL: hsl(215, 73%, 74%)
Luminanz: 0,447

Enchanting Sapphire #2B65E2

RGB: rgb(43, 101, 226)
HSL: hsl(221, 76%, 53%)
Luminanz: 0,153

Mystifying Magenta #C523AC

RGB: rgb(197, 35, 172)
HSL: hsl(309, 70%, 45%)
Luminanz: 0,161

Lingering Lilac #E4DBF0

RGB: rgb(228, 219, 240)
HSL: hsl(266, 41%, 90%)
Luminanz: 0,735

Kontrast & Barrierefreiheit

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

Aa #0A0E33 auf #E4DBF0 13,96:1 AAA

Aa #0A0E33 auf #F1E038 13,76:1 AAA

Aa #0A0E33 auf #8CB5ED 8,85:1 AAA

Aa #0A0E33 auf #14964C 4,89:1 AA

Aa #C8232A auf #E4DBF0 4,21:1 AA (großer Text)

Aa #C8232A auf #F1E038 4,14:1 AA (großer Text)

Aa #2B65E2 auf #E4DBF0 3,86:1 AA (großer Text)

Aa #F1E038 auf #2B65E2 3,81:1 AA (großer Text)

Aa #0A0E33 auf #C523AC 3,75:1 AA (großer Text)

Aa #C523AC auf #E4DBF0 3,73:1 AA (großer Text)

Aa #F1E038 auf #C523AC 3,67:1 AA (großer Text)

Aa #0A0E33 auf #2B65E2 3,62:1 AA (großer Text)

Aa #0A0E33 auf #C8232A 3,32:1 AA (großer Text)

Aa #14964C auf #E4DBF0 2,85:1 Nicht bestanden

Aa #F1E038 auf #14964C 2,81:1 Nicht bestanden

Aa #C8232A auf #8CB5ED 2,67:1 Nicht bestanden

Aa #8CB5ED auf #2B65E2 2,45:1 Nicht bestanden

Aa #8CB5ED auf #C523AC 2,36:1 Nicht bestanden

Aa #14964C auf #8CB5ED 1,81:1 Nicht bestanden

Aa #8CB5ED auf #E4DBF0 1,58:1 Nicht bestanden

Aa #F1E038 auf #8CB5ED 1,55:1 Nicht bestanden

Aa #C8232A auf #14964C 1,47:1 Nicht bestanden

Aa #14964C auf #2B65E2 1,35:1 Nicht bestanden

Aa #14964C auf #C523AC 1,31:1 Nicht bestanden

Aa #C8232A auf #C523AC 1,13:1 Nicht bestanden

Aa #C8232A auf #2B65E2 1,09:1 Nicht bestanden

Aa #2B65E2 auf #C523AC 1,04:1 Nicht bestanden

Aa #F1E038 auf #E4DBF0 1,01:1 Nicht bestanden

Wacks8

Wacks8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen