Glassware

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

Zurück zur Bibliothek

Glassware

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

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Monochrom pixelart blue cool metal

Likes 45

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #080A10;
  --c-muted-2: #181E30;
  --c-muted-3: #28314F;
  --c-muted-4: #37446E;
  --c-muted-5: #4D5F9A;
  --c-muted-6: #7282B9;
  --c-muted-7: #9FAACF;
  --c-muted-8: #C6CDE3;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Lilac Bisque (#C6CDE3) bis zum dunkelsten Ton Narwhal Grey (#080A10). Sie vereint Narwhal Grey, Hēi Sè Black, Blue Lobelia, Forlorn Cruise, Royal Marquis, Orbital, Lilac Scent Soft Blue und Lilac Bisque in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #080A10 auf #C6CDE3 mit 12,48:1.

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

Farben im Detail

Narwhal Grey #080A10

RGB: rgb(8, 10, 16)
HSL: hsl(225, 33%, 5%)
Luminanz: 0,003

Hēi Sè Black #181E30

RGB: rgb(24, 30, 48)
HSL: hsl(225, 33%, 14%)
Luminanz: 0,013

Blue Lobelia #28314F

RGB: rgb(40, 49, 79)
HSL: hsl(226, 33%, 23%)
Luminanz: 0,032

Forlorn Cruise #37446E

RGB: rgb(55, 68, 110)
HSL: hsl(226, 33%, 32%)
Luminanz: 0,061

Royal Marquis #4D5F9A

RGB: rgb(77, 95, 154)
HSL: hsl(226, 33%, 45%)
Luminanz: 0,121

Orbital #7282B9

RGB: rgb(114, 130, 185)
HSL: hsl(226, 34%, 59%)
Luminanz: 0,231

Lilac Scent Soft Blue #9FAACF

RGB: rgb(159, 170, 207)
HSL: hsl(226, 33%, 72%)
Luminanz: 0,406

Lilac Bisque #C6CDE3

RGB: rgb(198, 205, 227)
HSL: hsl(226, 34%, 83%)
Luminanz: 0,612

Kontrast & Barrierefreiheit

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

Aa #080A10 auf #C6CDE3 12,48:1 AAA

Aa #181E30 auf #C6CDE3 10,45:1 AAA

Aa #080A10 auf #9FAACF 8,60:1 AAA

Aa #28314F auf #C6CDE3 8,06:1 AAA

Aa #181E30 auf #9FAACF 7,20:1 AAA

Aa #37446E auf #C6CDE3 5,98:1 AA

Aa #28314F auf #9FAACF 5,56:1 AA

Aa #080A10 auf #7282B9 5,29:1 AA

Aa #181E30 auf #7282B9 4,43:1 AA (großer Text)

Aa #37446E auf #9FAACF 4,12:1 AA (großer Text)

Aa #4D5F9A auf #C6CDE3 3,87:1 AA (großer Text)

Aa #28314F auf #7282B9 3,42:1 AA (großer Text)

Aa #080A10 auf #4D5F9A 3,22:1 AA (großer Text)

Aa #181E30 auf #4D5F9A 2,70:1 Nicht bestanden

Aa #4D5F9A auf #9FAACF 2,67:1 Nicht bestanden

Aa #37446E auf #7282B9 2,53:1 Nicht bestanden

Aa #7282B9 auf #C6CDE3 2,36:1 Nicht bestanden

Aa #080A10 auf #37446E 2,09:1 Nicht bestanden

Aa #28314F auf #4D5F9A 2,08:1 Nicht bestanden

Aa #181E30 auf #37446E 1,75:1 Nicht bestanden

Aa #4D5F9A auf #7282B9 1,64:1 Nicht bestanden

Aa #7282B9 auf #9FAACF 1,63:1 Nicht bestanden

Aa #080A10 auf #28314F 1,55:1 Nicht bestanden

Aa #37446E auf #4D5F9A 1,54:1 Nicht bestanden

Aa #9FAACF auf #C6CDE3 1,45:1 Nicht bestanden

Aa #28314F auf #37446E 1,35:1 Nicht bestanden

Aa #181E30 auf #28314F 1,30:1 Nicht bestanden

Aa #080A10 auf #181E30 1,19:1 Nicht bestanden

Glassware

Glassware

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen