Smoky 09

Palette mit 9 Farben · Warm · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Smoky 09

Palette mit 9 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 9 Farben Warm Gemischt Komplementär gray monoramp dark brown

Likes 241

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #FAFAFA;
  --c-muted-2: #D4D8E0;
  --c-muted-3: #ACACAC;
  --c-muted-4: #918B8C;
  --c-muted-5: #6B615E;
  --c-muted-6: #3B342E;
  --c-muted-7: #24211A;
  --c-muted-8: #0E0D0A;
  --c-muted-9: #030201;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Dr. White (#FAFAFA) bis zum dunkelsten Ton Binary Black (#030201). Sie vereint Dr. White, Shy Blunt, Flagstone, Shining Armour, Browse Brown, Six Feet Under, Petroleum, Stout und Binary Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 16 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FAFAFA auf #030201 mit 19,86:1.

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

Farben im Detail

Dr. White #FAFAFA

RGB: rgb(250, 250, 250)
HSL: hsl(0, 0%, 98%)
Luminanz: 0,956

Shy Blunt #D4D8E0

RGB: rgb(212, 216, 224)
HSL: hsl(220, 16%, 85%)
Luminanz: 0,685

Flagstone #ACACAC

RGB: rgb(172, 172, 172)
HSL: hsl(0, 0%, 67%)
Luminanz: 0,413

Shining Armour #918B8C

RGB: rgb(145, 139, 140)
HSL: hsl(350, 3%, 56%)
Luminanz: 0,264

Browse Brown #6B615E

RGB: rgb(107, 97, 94)
HSL: hsl(14, 6%, 39%)
Luminanz: 0,125

Six Feet Under #3B342E

RGB: rgb(59, 52, 46)
HSL: hsl(28, 12%, 21%)
Luminanz: 0,036

Petroleum #24211A

RGB: rgb(36, 33, 26)
HSL: hsl(42, 16%, 12%)
Luminanz: 0,015

Stout #0E0D0A

RGB: rgb(14, 13, 10)
HSL: hsl(45, 17%, 5%)
Luminanz: 0,004

Binary Black #030201

RGB: rgb(3, 2, 1)
HSL: hsl(30, 50%, 1%)
Luminanz: 0,001

Kontrast & Barrierefreiheit

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

Aa #FAFAFA auf #030201 19,86:1 AAA

Aa #FAFAFA auf #0E0D0A 18,62:1 AAA

Aa #FAFAFA auf #24211A 15,39:1 AAA

Aa #D4D8E0 auf #030201 14,51:1 AAA

Aa #D4D8E0 auf #0E0D0A 13,60:1 AAA

Aa #FAFAFA auf #3B342E 11,72:1 AAA

Aa #D4D8E0 auf #24211A 11,24:1 AAA

Aa #ACACAC auf #030201 9,13:1 AAA

Aa #D4D8E0 auf #3B342E 8,56:1 AAA

Aa #ACACAC auf #0E0D0A 8,56:1 AAA

Aa #ACACAC auf #24211A 7,08:1 AAA

Aa #918B8C auf #030201 6,20:1 AA

Aa #918B8C auf #0E0D0A 5,81:1 AA

Aa #FAFAFA auf #6B615E 5,75:1 AA

Aa #ACACAC auf #3B342E 5,39:1 AA

Aa #918B8C auf #24211A 4,80:1 AA

Aa #D4D8E0 auf #6B615E 4,20:1 AA (großer Text)

Aa #918B8C auf #3B342E 3,66:1 AA (großer Text)

Aa #6B615E auf #030201 3,45:1 AA (großer Text)

Aa #6B615E auf #0E0D0A 3,24:1 AA (großer Text)

Aa #FAFAFA auf #918B8C 3,21:1 AA (großer Text)

Aa #6B615E auf #24211A 2,67:1 Nicht bestanden

Aa #ACACAC auf #6B615E 2,65:1 Nicht bestanden

Aa #D4D8E0 auf #918B8C 2,34:1 Nicht bestanden

Aa #FAFAFA auf #ACACAC 2,17:1 Nicht bestanden

Aa #6B615E auf #3B342E 2,04:1 Nicht bestanden

Aa #918B8C auf #6B615E 1,79:1 Nicht bestanden

Aa #3B342E auf #030201 1,69:1 Nicht bestanden

Aa #D4D8E0 auf #ACACAC 1,59:1 Nicht bestanden

Aa #3B342E auf #0E0D0A 1,59:1 Nicht bestanden

Aa #ACACAC auf #918B8C 1,47:1 Nicht bestanden

Aa #FAFAFA auf #D4D8E0 1,37:1 Nicht bestanden

Aa #3B342E auf #24211A 1,31:1 Nicht bestanden

Aa #24211A auf #030201 1,29:1 Nicht bestanden

Aa #24211A auf #0E0D0A 1,21:1 Nicht bestanden

Aa #0E0D0A auf #030201 1,07:1 Nicht bestanden

Smoky 09

Smoky 09

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen