CottonCandy

Palette mit 7 Farben · Warm · Hell · Harmonie: Triadisch

Zurück zur Bibliothek

CottonCandy

Palette mit 7 Farben · Temperatur: Warm · Ton: Hell · Harmonie: Triadisch

Bearbeiten

Gedeckt 7 Farben Warm Hell Triadisch

Likes 48

Farben 7

CSS-Variablen

:root {
  --c-muted-1: #F8D3E8;
  --c-muted-2: #ED97D6;
  --c-muted-3: #D76AC9;
  --c-muted-4: #A23CAA;
  --c-muted-5: #A46ACD;
  --c-muted-6: #9D98E2;
  --c-muted-7: #C7D4F0;
}

Über diese Palette

Diese gedeckte Palette mit 7 Farben reicht vom hellsten Ton Little Smile (#F8D3E8) bis zum dunkelsten Ton Aged Purple (#A23CAA). Sie vereint Little Smile, Mayflower Orchid, Pink Orchid, Aged Purple, Rich Lavender, Dull Lavender und Murano Soft Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Keines der 21 Farbpaare der Palette erreicht die WCAG-AA-Kontrastschwelle (4,5:1) – kombiniere diese Farben für Fließtext daher mit Schwarz oder Weiß.

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

Farben im Detail

Little Smile #F8D3E8

RGB: rgb(248, 211, 232)
HSL: hsl(326, 73%, 90%)
Luminanz: 0,724

Mayflower Orchid #ED97D6

RGB: rgb(237, 151, 214)
HSL: hsl(316, 70%, 76%)
Luminanz: 0,450

Pink Orchid #D76AC9

RGB: rgb(215, 106, 201)
HSL: hsl(308, 58%, 63%)
Luminanz: 0,290

Aged Purple #A23CAA

RGB: rgb(162, 60, 170)
HSL: hsl(296, 48%, 45%)
Luminanz: 0,138

Rich Lavender #A46ACD

RGB: rgb(164, 106, 205)
HSL: hsl(275, 50%, 61%)
Luminanz: 0,226

Dull Lavender #9D98E2

RGB: rgb(157, 152, 226)
HSL: hsl(244, 56%, 74%)
Luminanz: 0,351

Murano Soft Blue #C7D4F0

RGB: rgb(199, 212, 240)
HSL: hsl(221, 58%, 86%)
Luminanz: 0,655

Kontrast & Barrierefreiheit

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

Aa #F8D3E8 auf #A23CAA 4,11:1 AA (großer Text)

Aa #A23CAA auf #C7D4F0 3,75:1 AA (großer Text)

Aa #F8D3E8 auf #A46ACD 2,80:1 Nicht bestanden

Aa #ED97D6 auf #A23CAA 2,66:1 Nicht bestanden

Aa #A46ACD auf #C7D4F0 2,55:1 Nicht bestanden

Aa #F8D3E8 auf #D76AC9 2,28:1 Nicht bestanden

Aa #A23CAA auf #9D98E2 2,13:1 Nicht bestanden

Aa #D76AC9 auf #C7D4F0 2,08:1 Nicht bestanden

Aa #F8D3E8 auf #9D98E2 1,93:1 Nicht bestanden

Aa #ED97D6 auf #A46ACD 1,81:1 Nicht bestanden

Aa #D76AC9 auf #A23CAA 1,81:1 Nicht bestanden

Aa #9D98E2 auf #C7D4F0 1,76:1 Nicht bestanden

Aa #F8D3E8 auf #ED97D6 1,55:1 Nicht bestanden

Aa #ED97D6 auf #D76AC9 1,47:1 Nicht bestanden

Aa #A23CAA auf #A46ACD 1,47:1 Nicht bestanden

Aa #A46ACD auf #9D98E2 1,45:1 Nicht bestanden

Aa #ED97D6 auf #C7D4F0 1,41:1 Nicht bestanden

Aa #ED97D6 auf #9D98E2 1,25:1 Nicht bestanden

Aa #D76AC9 auf #A46ACD 1,23:1 Nicht bestanden

Aa #D76AC9 auf #9D98E2 1,18:1 Nicht bestanden

Aa #F8D3E8 auf #C7D4F0 1,10:1 Nicht bestanden

CottonCandy

CottonCandy

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen