Gloom 8

Palette mit 8 Farben · Neutral · Gemischt · Harmonie: Monochrom

Zurück zur Bibliothek

Gloom 8

Palette mit 8 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Monochrom

Bearbeiten

Gedeckt 8 Farben Neutral Gemischt Monochrom blue purple gloomy

Likes 26

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #201F23;
  --c-muted-2: #3A3741;
  --c-muted-3: #514E5D;
  --c-muted-4: #62606D;
  --c-muted-5: #79737A;
  --c-muted-6: #8B8485;
  --c-muted-7: #A5A09A;
  --c-muted-8: #B5B2A6;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Rushmore Grey (#B5B2A6) bis zum dunkelsten Ton Wet Charcoal (#201F23). Sie vereint Wet Charcoal, Black Marlin, Salvation, Prince Royal, Cement Feet, Purpura, Mauve Melody und Rushmore Grey in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #201F23 auf #B5B2A6 mit 7,71:1.

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

Farben im Detail

Wet Charcoal #201F23

RGB: rgb(32, 31, 35)
HSL: hsl(255, 6%, 13%)
Luminanz: 0,014

Black Marlin #3A3741

RGB: rgb(58, 55, 65)
HSL: hsl(258, 8%, 24%)
Luminanz: 0,040

Salvation #514E5D

RGB: rgb(81, 78, 93)
HSL: hsl(252, 9%, 34%)
Luminanz: 0,080

Prince Royal #62606D

RGB: rgb(98, 96, 109)
HSL: hsl(249, 6%, 40%)
Luminanz: 0,121

Cement Feet #79737A

RGB: rgb(121, 115, 122)
HSL: hsl(291, 3%, 46%)
Luminanz: 0,177

Purpura #8B8485

RGB: rgb(139, 132, 133)
HSL: hsl(351, 3%, 53%)
Luminanz: 0,237

Mauve Melody #A5A09A

RGB: rgb(165, 160, 154)
HSL: hsl(33, 6%, 63%)
Luminanz: 0,355

Rushmore Grey #B5B2A6

RGB: rgb(181, 178, 166)
HSL: hsl(48, 9%, 68%)
Luminanz: 0,444

Kontrast & Barrierefreiheit

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

Aa #201F23 auf #B5B2A6 7,71:1 AAA

Aa #201F23 auf #A5A09A 6,32:1 AA

Aa #3A3741 auf #B5B2A6 5,48:1 AA

Aa #3A3741 auf #A5A09A 4,49:1 AA (großer Text)

Aa #201F23 auf #8B8485 4,48:1 AA (großer Text)

Aa #514E5D auf #B5B2A6 3,80:1 AA (großer Text)

Aa #201F23 auf #79737A 3,55:1 AA (großer Text)

Aa #3A3741 auf #8B8485 3,18:1 AA (großer Text)

Aa #514E5D auf #A5A09A 3,12:1 AA (großer Text)

Aa #62606D auf #B5B2A6 2,90:1 Nicht bestanden

Aa #201F23 auf #62606D 2,66:1 Nicht bestanden

Aa #3A3741 auf #79737A 2,52:1 Nicht bestanden

Aa #62606D auf #A5A09A 2,37:1 Nicht bestanden

Aa #514E5D auf #8B8485 2,21:1 Nicht bestanden

Aa #79737A auf #B5B2A6 2,17:1 Nicht bestanden

Aa #201F23 auf #514E5D 2,03:1 Nicht bestanden

Aa #3A3741 auf #62606D 1,89:1 Nicht bestanden

Aa #79737A auf #A5A09A 1,78:1 Nicht bestanden

Aa #514E5D auf #79737A 1,75:1 Nicht bestanden

Aa #8B8485 auf #B5B2A6 1,72:1 Nicht bestanden

Aa #62606D auf #8B8485 1,68:1 Nicht bestanden

Aa #3A3741 auf #514E5D 1,44:1 Nicht bestanden

Aa #201F23 auf #3A3741 1,41:1 Nicht bestanden

Aa #8B8485 auf #A5A09A 1,41:1 Nicht bestanden

Aa #62606D auf #79737A 1,33:1 Nicht bestanden

Aa #514E5D auf #62606D 1,31:1 Nicht bestanden

Aa #79737A auf #8B8485 1,26:1 Nicht bestanden

Aa #A5A09A auf #B5B2A6 1,22:1 Nicht bestanden

Gloom 8

Gloom 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen