Escape9

Palette mit 9 Farben · Kühl · Dunkel · Harmonie: Triadisch

Zurück zur Bibliothek

Escape9

Palette mit 9 Farben · Temperatur: Kühl · Ton: Dunkel · Harmonie: Triadisch

Bearbeiten

Gedeckt 9 Farben Kühl Dunkel Triadisch green night blue moonlight

Likes 220

Farben 9

CSS-Variablen

:root {
  --c-muted-1: #230019;
  --c-muted-2: #1F2439;
  --c-muted-3: #19374B;
  --c-muted-4: #396D7D;
  --c-muted-5: #719797;
  --c-muted-6: #A2B8B1;
  --c-muted-7: #557B78;
  --c-muted-8: #3C5F66;
  --c-muted-9: #254351;
}

Über diese Palette

Diese gedeckte Palette mit 9 Farben reicht vom hellsten Ton Holly Glen (#A2B8B1) bis zum dunkelsten Ton Belladonna (#230019). Sie vereint Belladonna, Midnight Express, Subterranean River, Kimberley Sea, Ship Shape, Holly Glen, Breaker Bay, Freedom und Reflecting Pond in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #230019 auf #A2B8B1 mit 9,24:1.

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

Farben im Detail

Belladonna #230019

RGB: rgb(35, 0, 25)
HSL: hsl(317, 100%, 7%)
Luminanz: 0,004

Midnight Express #1F2439

RGB: rgb(31, 36, 57)
HSL: hsl(228, 30%, 17%)
Luminanz: 0,019

Subterranean River #19374B

RGB: rgb(25, 55, 75)
HSL: hsl(204, 50%, 20%)
Luminanz: 0,035

Kimberley Sea #396D7D

RGB: rgb(57, 109, 125)
HSL: hsl(194, 37%, 36%)
Luminanz: 0,133

Ship Shape #719797

RGB: rgb(113, 151, 151)
HSL: hsl(180, 15%, 52%)
Luminanz: 0,279

Holly Glen #A2B8B1

RGB: rgb(162, 184, 177)
HSL: hsl(161, 13%, 68%)
Luminanz: 0,451

Breaker Bay #557B78

RGB: rgb(85, 123, 120)
HSL: hsl(175, 18%, 41%)
Luminanz: 0,175

Freedom #3C5F66

RGB: rgb(60, 95, 102)
HSL: hsl(190, 26%, 32%)
Luminanz: 0,101

Reflecting Pond #254351

RGB: rgb(37, 67, 81)
HSL: hsl(199, 37%, 23%)
Luminanz: 0,050

Kontrast & Barrierefreiheit

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

Aa #230019 auf #A2B8B1 9,24:1 AAA

Aa #1F2439 auf #A2B8B1 7,32:1 AAA

Aa #230019 auf #719797 6,06:1 AA

Aa #19374B auf #A2B8B1 5,94:1 AA

Aa #A2B8B1 auf #254351 5,01:1 AA

Aa #1F2439 auf #719797 4,80:1 AA

Aa #230019 auf #557B78 4,14:1 AA (großer Text)

Aa #19374B auf #719797 3,89:1 AA (großer Text)

Aa #230019 auf #396D7D 3,37:1 AA (großer Text)

Aa #A2B8B1 auf #3C5F66 3,32:1 AA (großer Text)

Aa #719797 auf #254351 3,29:1 AA (großer Text)

Aa #1F2439 auf #557B78 3,28:1 AA (großer Text)

Aa #230019 auf #3C5F66 2,78:1 Nicht bestanden

Aa #396D7D auf #A2B8B1 2,74:1 Nicht bestanden

Aa #1F2439 auf #396D7D 2,67:1 Nicht bestanden

Aa #19374B auf #557B78 2,66:1 Nicht bestanden

Aa #557B78 auf #254351 2,24:1 Nicht bestanden

Aa #A2B8B1 auf #557B78 2,23:1 Nicht bestanden

Aa #1F2439 auf #3C5F66 2,21:1 Nicht bestanden

Aa #719797 auf #3C5F66 2,18:1 Nicht bestanden

Aa #19374B auf #396D7D 2,16:1 Nicht bestanden

Aa #230019 auf #254351 1,84:1 Nicht bestanden

Aa #396D7D auf #254351 1,83:1 Nicht bestanden

Aa #396D7D auf #719797 1,80:1 Nicht bestanden

Aa #19374B auf #3C5F66 1,79:1 Nicht bestanden

Aa #230019 auf #19374B 1,56:1 Nicht bestanden

Aa #719797 auf #A2B8B1 1,52:1 Nicht bestanden

Aa #3C5F66 auf #254351 1,51:1 Nicht bestanden

Aa #557B78 auf #3C5F66 1,49:1 Nicht bestanden

Aa #1F2439 auf #254351 1,46:1 Nicht bestanden

Aa #719797 auf #557B78 1,46:1 Nicht bestanden

Aa #230019 auf #1F2439 1,26:1 Nicht bestanden

Aa #1F2439 auf #19374B 1,23:1 Nicht bestanden

Aa #396D7D auf #557B78 1,23:1 Nicht bestanden

Aa #396D7D auf #3C5F66 1,21:1 Nicht bestanden

Aa #19374B auf #254351 1,18:1 Nicht bestanden

Escape9

Escape9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen