Bastille 8

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Bastille 8

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Komplementär gray simple artist monoramp

Likes 371

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #181923;
  --c-muted-2: #292D41;
  --c-muted-3: #38405D;
  --c-muted-4: #4C546D;
  --c-muted-5: #6F687A;
  --c-muted-6: #8B7983;
  --c-muted-7: #A58D89;
  --c-muted-8: #B59E90;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton Trusty Tan (#B59E90) bis zum dunkelsten Ton River Styx (#181923). Sie vereint River Styx, Black Violet, Mangosteen, Harbourmaster, Decadence, Purple Rubiate, Delicate Brown und Trusty Tan 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 #181923 auf #B59E90 mit 6,87:1.

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

Farben im Detail

River Styx #181923

RGB: rgb(24, 25, 35)
HSL: hsl(235, 19%, 12%)
Luminanz: 0,010

Black Violet #292D41

RGB: rgb(41, 45, 65)
HSL: hsl(230, 23%, 21%)
Luminanz: 0,027

Mangosteen #38405D

RGB: rgb(56, 64, 93)
HSL: hsl(227, 25%, 29%)
Luminanz: 0,053

Harbourmaster #4C546D

RGB: rgb(76, 84, 109)
HSL: hsl(225, 18%, 36%)
Luminanz: 0,090

Decadence #6F687A

RGB: rgb(111, 104, 122)
HSL: hsl(263, 8%, 44%)
Luminanz: 0,147

Purple Rubiate #8B7983

RGB: rgb(139, 121, 131)
HSL: hsl(327, 7%, 51%)
Luminanz: 0,208

Delicate Brown #A58D89

RGB: rgb(165, 141, 137)
HSL: hsl(9, 13%, 59%)
Luminanz: 0,289

Trusty Tan #B59E90

RGB: rgb(181, 158, 144)
HSL: hsl(23, 20%, 64%)
Luminanz: 0,363

Kontrast & Barrierefreiheit

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

Aa #181923 auf #B59E90 6,87:1 AA

Aa #181923 auf #A58D89 5,63:1 AA

Aa #292D41 auf #B59E90 5,34:1 AA

Aa #292D41 auf #A58D89 4,38:1 AA (großer Text)

Aa #181923 auf #8B7983 4,29:1 AA (großer Text)

Aa #38405D auf #B59E90 4,01:1 AA (großer Text)

Aa #292D41 auf #8B7983 3,34:1 AA (großer Text)

Aa #38405D auf #A58D89 3,29:1 AA (großer Text)

Aa #181923 auf #6F687A 3,27:1 AA (großer Text)

Aa #4C546D auf #B59E90 2,95:1 Nicht bestanden

Aa #292D41 auf #6F687A 2,55:1 Nicht bestanden

Aa #38405D auf #8B7983 2,51:1 Nicht bestanden

Aa #4C546D auf #A58D89 2,42:1 Nicht bestanden

Aa #181923 auf #4C546D 2,33:1 Nicht bestanden

Aa #6F687A auf #B59E90 2,10:1 Nicht bestanden

Aa #38405D auf #6F687A 1,91:1 Nicht bestanden

Aa #4C546D auf #8B7983 1,85:1 Nicht bestanden

Aa #292D41 auf #4C546D 1,81:1 Nicht bestanden

Aa #6F687A auf #A58D89 1,72:1 Nicht bestanden

Aa #181923 auf #38405D 1,71:1 Nicht bestanden

Aa #8B7983 auf #B59E90 1,60:1 Nicht bestanden

Aa #4C546D auf #6F687A 1,41:1 Nicht bestanden

Aa #38405D auf #4C546D 1,36:1 Nicht bestanden

Aa #292D41 auf #38405D 1,33:1 Nicht bestanden

Aa #6F687A auf #8B7983 1,31:1 Nicht bestanden

Aa #8B7983 auf #A58D89 1,31:1 Nicht bestanden

Aa #181923 auf #292D41 1,29:1 Nicht bestanden

Aa #A58D89 auf #B59E90 1,22:1 Nicht bestanden

Bastille 8

Bastille 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen