Cyber Charge

Palette mit 7 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Cyber Charge

Palette mit 7 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 7 Farben Kühl Gemischt Komplementär

Likes 59

Farben 7

CSS-Variablen

:root {
  --c-muted-1: #FAFCE9;
  --c-muted-2: #D4EDDA;
  --c-muted-3: #95DFD0;
  --c-muted-4: #63A9CF;
  --c-muted-5: #3D51B3;
  --c-muted-6: #472E94;
  --c-muted-7: #39155B;
}

Über diese Palette

Diese gedeckte Palette mit 7 Farben reicht vom hellsten Ton Herbal Tea (#FAFCE9) bis zum dunkelsten Ton Wicked Purple (#39155B). Sie vereint Herbal Tea, Garden Shed, Pale Robin Egg Blue, Salem Blue, Night in Manchester, Galactic Purple und Wicked Purple in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 10 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FAFCE9 auf #39155B mit 14,08:1.

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

Farben im Detail

Herbal Tea #FAFCE9

RGB: rgb(250, 252, 233)
HSL: hsl(66, 76%, 95%)
Luminanz: 0,958

Garden Shed #D4EDDA

RGB: rgb(212, 237, 218)
HSL: hsl(134, 41%, 88%)
Luminanz: 0,796

Pale Robin Egg Blue #95DFD0

RGB: rgb(149, 223, 208)
HSL: hsl(168, 54%, 73%)
Luminanz: 0,637

Salem Blue #63A9CF

RGB: rgb(99, 169, 207)
HSL: hsl(201, 53%, 60%)
Luminanz: 0,355

Night in Manchester #3D51B3

RGB: rgb(61, 81, 179)
HSL: hsl(230, 49%, 47%)
Luminanz: 0,101

Galactic Purple #472E94

RGB: rgb(71, 46, 148)
HSL: hsl(255, 53%, 38%)
Luminanz: 0,054

Wicked Purple #39155B

RGB: rgb(57, 21, 91)
HSL: hsl(271, 63%, 22%)
Luminanz: 0,022

Kontrast & Barrierefreiheit

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

Aa #FAFCE9 auf #39155B 14,08:1 AAA

Aa #D4EDDA auf #39155B 11,82:1 AAA

Aa #FAFCE9 auf #472E94 9,67:1 AAA

Aa #95DFD0 auf #39155B 9,60:1 AAA

Aa #D4EDDA auf #472E94 8,11:1 AAA

Aa #FAFCE9 auf #3D51B3 6,66:1 AA

Aa #95DFD0 auf #472E94 6,59:1 AA

Aa #63A9CF auf #39155B 5,66:1 AA

Aa #D4EDDA auf #3D51B3 5,59:1 AA

Aa #95DFD0 auf #3D51B3 4,54:1 AA

Aa #63A9CF auf #472E94 3,89:1 AA (großer Text)

Aa #63A9CF auf #3D51B3 2,68:1 Nicht bestanden

Aa #FAFCE9 auf #63A9CF 2,49:1 Nicht bestanden

Aa #3D51B3 auf #39155B 2,11:1 Nicht bestanden

Aa #D4EDDA auf #63A9CF 2,09:1 Nicht bestanden

Aa #95DFD0 auf #63A9CF 1,70:1 Nicht bestanden

Aa #FAFCE9 auf #95DFD0 1,47:1 Nicht bestanden

Aa #472E94 auf #39155B 1,46:1 Nicht bestanden

Aa #3D51B3 auf #472E94 1,45:1 Nicht bestanden

Aa #D4EDDA auf #95DFD0 1,23:1 Nicht bestanden

Aa #FAFCE9 auf #D4EDDA 1,19:1 Nicht bestanden

Cyber Charge

Cyber Charge

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen