Spectral II

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Spectral II

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Triadisch blue purple violate

Likes 28

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #35143E;
  --c-muted-2: #541646;
  --c-muted-3: #5D2D75;
  --c-muted-4: #644F9C;
  --c-muted-5: #6D7AB7;
  --c-muted-6: #89B7D0;
  --c-muted-7: #A6E6E5;
  --c-muted-8: #C7F0E6;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Angel of Death Victorious (#C7F0E6) bis zum dunkelsten Ton Purple Door (#35143E). Sie vereint Purple Door, Violet Carmine, Imperial, Ultrapurple Merge, Persian Jewel, Mountain Main, Ice Crystal Blue und Angel of Death Victorious in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #35143E auf #C7F0E6 mit 12,9:1.

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

Farben im Detail

Purple Door #35143E

RGB: rgb(53, 20, 62)
HSL: hsl(287, 51%, 16%)
Luminanz: 0,016

Violet Carmine #541646

RGB: rgb(84, 22, 70)
HSL: hsl(314, 58%, 21%)
Luminanz: 0,029

Imperial #5D2D75

RGB: rgb(93, 45, 117)
HSL: hsl(280, 44%, 32%)
Luminanz: 0,055

Ultrapurple Merge #644F9C

RGB: rgb(100, 79, 156)
HSL: hsl(256, 33%, 46%)
Luminanz: 0,107

Persian Jewel #6D7AB7

RGB: rgb(109, 122, 183)
HSL: hsl(229, 34%, 57%)
Luminanz: 0,206

Mountain Main #89B7D0

RGB: rgb(137, 183, 208)
HSL: hsl(201, 43%, 68%)
Luminanz: 0,437

Ice Crystal Blue #A6E6E5

RGB: rgb(166, 230, 229)
HSL: hsl(179, 56%, 78%)
Luminanz: 0,704

Angel of Death Victorious #C7F0E6

RGB: rgb(199, 240, 230)
HSL: hsl(165, 58%, 86%)
Luminanz: 0,802

Kontrast & Barrierefreiheit

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

Aa #35143E auf #C7F0E6 12,90:1 AAA

Aa #35143E auf #A6E6E5 11,41:1 AAA

Aa #541646 auf #C7F0E6 10,78:1 AAA

Aa #541646 auf #A6E6E5 9,54:1 AAA

Aa #5D2D75 auf #C7F0E6 8,12:1 AAA

Aa #35143E auf #89B7D0 7,38:1 AAA

Aa #5D2D75 auf #A6E6E5 7,18:1 AAA

Aa #541646 auf #89B7D0 6,17:1 AA

Aa #644F9C auf #C7F0E6 5,42:1 AA

Aa #644F9C auf #A6E6E5 4,80:1 AA

Aa #5D2D75 auf #89B7D0 4,65:1 AA

Aa #35143E auf #6D7AB7 3,87:1 AA (großer Text)

Aa #6D7AB7 auf #C7F0E6 3,33:1 AA (großer Text)

Aa #541646 auf #6D7AB7 3,24:1 AA (großer Text)

Aa #644F9C auf #89B7D0 3,10:1 AA (großer Text)

Aa #6D7AB7 auf #A6E6E5 2,94:1 Nicht bestanden

Aa #5D2D75 auf #6D7AB7 2,44:1 Nicht bestanden

Aa #35143E auf #644F9C 2,38:1 Nicht bestanden

Aa #541646 auf #644F9C 1,99:1 Nicht bestanden

Aa #6D7AB7 auf #89B7D0 1,90:1 Nicht bestanden

Aa #89B7D0 auf #C7F0E6 1,75:1 Nicht bestanden

Aa #644F9C auf #6D7AB7 1,63:1 Nicht bestanden

Aa #35143E auf #5D2D75 1,59:1 Nicht bestanden

Aa #89B7D0 auf #A6E6E5 1,55:1 Nicht bestanden

Aa #5D2D75 auf #644F9C 1,50:1 Nicht bestanden

Aa #541646 auf #5D2D75 1,33:1 Nicht bestanden

Aa #35143E auf #541646 1,20:1 Nicht bestanden

Aa #A6E6E5 auf #C7F0E6 1,13:1 Nicht bestanden

Spectral II

Spectral II

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen