PBPFPBTT 464

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

Zurück zur Bibliothek

PBPFPBTT 464

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

Bearbeiten

Lebendig 8 Farben Neutral Gemischt Komplementär bright contrast saturation

Likes 15

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #10121C;
  --c-vibrant-2: #576CD7;
  --c-vibrant-3: #131C48;
  --c-vibrant-4: #BCC7FF;
  --c-vibrant-5: #E8CF80;
  --c-vibrant-6: #FF93FC;
  --c-vibrant-7: #9A8749;
  --c-vibrant-8: #E14EDD;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Ancient Treasure (#E8CF80) bis zum dunkelsten Ton Midnight Edition (#10121C). Sie vereint Midnight Edition, Cornflower, Tetsu-Kon Blue, Light Periwinkle, Ancient Treasure, Pinkalicious, Wishing Troll und Pink Purple 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 #10121C auf #E8CF80 mit 12,15:1.

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

Farben im Detail

Midnight Edition #10121C

RGB: rgb(16, 18, 28)
HSL: hsl(230, 27%, 9%)
Luminanz: 0,006

Cornflower #576CD7

RGB: rgb(87, 108, 215)
HSL: hsl(230, 62%, 59%)
Luminanz: 0,177

Tetsu-Kon Blue #131C48

RGB: rgb(19, 28, 72)
HSL: hsl(230, 58%, 18%)
Luminanz: 0,014

Light Periwinkle #BCC7FF

RGB: rgb(188, 199, 255)
HSL: hsl(230, 100%, 87%)
Luminanz: 0,588

Ancient Treasure #E8CF80

RGB: rgb(232, 207, 128)
HSL: hsl(46, 69%, 71%)
Luminanz: 0,633

Pinkalicious #FF93FC

RGB: rgb(255, 147, 252)
HSL: hsl(302, 100%, 79%)
Luminanz: 0,492

Wishing Troll #9A8749

RGB: rgb(154, 135, 73)
HSL: hsl(46, 36%, 45%)
Luminanz: 0,247

Pink Purple #E14EDD

RGB: rgb(225, 78, 221)
HSL: hsl(302, 71%, 59%)
Luminanz: 0,267

Kontrast & Barrierefreiheit

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

Aa #10121C auf #E8CF80 12,15:1 AAA

Aa #10121C auf #BCC7FF 11,33:1 AAA

Aa #131C48 auf #E8CF80 10,62:1 AAA

Aa #131C48 auf #BCC7FF 9,91:1 AAA

Aa #10121C auf #FF93FC 9,62:1 AAA

Aa #131C48 auf #FF93FC 8,41:1 AAA

Aa #10121C auf #E14EDD 5,63:1 AA

Aa #10121C auf #9A8749 5,27:1 AA

Aa #131C48 auf #E14EDD 4,92:1 AA

Aa #131C48 auf #9A8749 4,61:1 AA

Aa #10121C auf #576CD7 4,03:1 AA (großer Text)

Aa #576CD7 auf #131C48 3,52:1 AA (großer Text)

Aa #576CD7 auf #E8CF80 3,02:1 AA (großer Text)

Aa #576CD7 auf #BCC7FF 2,81:1 Nicht bestanden

Aa #576CD7 auf #FF93FC 2,39:1 Nicht bestanden

Aa #E8CF80 auf #9A8749 2,30:1 Nicht bestanden

Aa #E8CF80 auf #E14EDD 2,16:1 Nicht bestanden

Aa #BCC7FF auf #9A8749 2,15:1 Nicht bestanden

Aa #BCC7FF auf #E14EDD 2,01:1 Nicht bestanden

Aa #FF93FC auf #9A8749 1,82:1 Nicht bestanden

Aa #FF93FC auf #E14EDD 1,71:1 Nicht bestanden

Aa #576CD7 auf #E14EDD 1,40:1 Nicht bestanden

Aa #576CD7 auf #9A8749 1,31:1 Nicht bestanden

Aa #E8CF80 auf #FF93FC 1,26:1 Nicht bestanden

Aa #BCC7FF auf #FF93FC 1,18:1 Nicht bestanden

Aa #10121C auf #131C48 1,14:1 Nicht bestanden

Aa #BCC7FF auf #E8CF80 1,07:1 Nicht bestanden

Aa #9A8749 auf #E14EDD 1,07:1 Nicht bestanden

PBPFPBTT 464

PBPFPBTT 464

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen