Pelennor8

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

Zurück zur Bibliothek

Pelennor8

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

Bearbeiten

Gedeckt 8 Farben Warm Gemischt Monochrom cold muted desaturated grey

Likes 130

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #191D1E;
  --c-muted-2: #3F4550;
  --c-muted-3: #70787A;
  --c-muted-4: #C0BFC0;
  --c-muted-5: #EAE5E2;
  --c-muted-6: #BAAA91;
  --c-muted-7: #877459;
  --c-muted-8: #534B3A;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Soft Violet (#EAE5E2) bis zum dunkelsten Ton Gluon Grey (#191D1E). Sie vereint Gluon Grey, Dark Crypt, Phantom, Silver, Soft Violet, Open Canyon, Verde Marrón und Metallic Bronze in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #191D1E auf #EAE5E2 mit 13,6:1.

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

Farben im Detail

Gluon Grey #191D1E

RGB: rgb(25, 29, 30)
HSL: hsl(192, 9%, 11%)
Luminanz: 0,012

Dark Crypt #3F4550

RGB: rgb(63, 69, 80)
HSL: hsl(219, 12%, 28%)
Luminanz: 0,059

Phantom #70787A

RGB: rgb(112, 120, 122)
HSL: hsl(192, 4%, 46%)
Luminanz: 0,183

Silver #C0BFC0

RGB: rgb(192, 191, 192)
HSL: hsl(300, 1%, 75%)
Luminanz: 0,523

Soft Violet #EAE5E2

RGB: rgb(234, 229, 226)
HSL: hsl(23, 16%, 90%)
Luminanz: 0,790

Open Canyon #BAAA91

RGB: rgb(186, 170, 145)
HSL: hsl(37, 23%, 65%)
Luminanz: 0,412

Verde Marrón #877459

RGB: rgb(135, 116, 89)
HSL: hsl(35, 21%, 44%)
Luminanz: 0,184

Metallic Bronze #534B3A

RGB: rgb(83, 75, 58)
HSL: hsl(41, 18%, 28%)
Luminanz: 0,072

Kontrast & Barrierefreiheit

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

Aa #191D1E auf #EAE5E2 13,60:1 AAA

Aa #191D1E auf #C0BFC0 9,27:1 AAA

Aa #3F4550 auf #EAE5E2 7,71:1 AAA

Aa #191D1E auf #BAAA91 7,48:1 AAA

Aa #EAE5E2 auf #534B3A 6,90:1 AA

Aa #3F4550 auf #C0BFC0 5,26:1 AA

Aa #C0BFC0 auf #534B3A 4,70:1 AA

Aa #3F4550 auf #BAAA91 4,24:1 AA (großer Text)

Aa #BAAA91 auf #534B3A 3,80:1 AA (großer Text)

Aa #191D1E auf #877459 3,78:1 AA (großer Text)

Aa #191D1E auf #70787A 3,77:1 AA (großer Text)

Aa #70787A auf #EAE5E2 3,61:1 AA (großer Text)

Aa #EAE5E2 auf #877459 3,60:1 AA (großer Text)

Aa #70787A auf #C0BFC0 2,46:1 Nicht bestanden

Aa #C0BFC0 auf #877459 2,45:1 Nicht bestanden

Aa #3F4550 auf #70787A 2,14:1 Nicht bestanden

Aa #3F4550 auf #877459 2,14:1 Nicht bestanden

Aa #70787A auf #BAAA91 1,99:1 Nicht bestanden

Aa #BAAA91 auf #877459 1,98:1 Nicht bestanden

Aa #191D1E auf #534B3A 1,97:1 Nicht bestanden

Aa #877459 auf #534B3A 1,92:1 Nicht bestanden

Aa #70787A auf #534B3A 1,91:1 Nicht bestanden

Aa #EAE5E2 auf #BAAA91 1,82:1 Nicht bestanden

Aa #191D1E auf #3F4550 1,76:1 Nicht bestanden

Aa #C0BFC0 auf #EAE5E2 1,47:1 Nicht bestanden

Aa #C0BFC0 auf #BAAA91 1,24:1 Nicht bestanden

Aa #3F4550 auf #534B3A 1,12:1 Nicht bestanden

Aa #70787A auf #877459 1,00:1 Nicht bestanden

Pelennor8

Pelennor8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen