War Train

Palette mit 12 Farben · Neutral · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

War Train

Palette mit 12 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Gedeckt 12 Farben Neutral Gemischt Komplementär green purple natural mud

Likes 9

Farben 12

CSS-Variablen

:root {
  --c-muted-1: #103F2F;
  --c-muted-2: #38574F;
  --c-muted-3: #5A794F;
  --c-muted-4: #89AC4F;
  --c-muted-5: #B2DC8F;
  --c-muted-6: #5D531C;
  --c-muted-7: #3D4308;
  --c-muted-8: #8C6DAF;
  --c-muted-9: #7C2D9F;
  --c-muted-10: #4C3D5F;
  --c-muted-11: #303C3C;
  --c-muted-12: #505C5C;
}

Über diese Palette

Diese gedeckte Palette mit 12 Farben reicht vom hellsten Ton Sage Sensation (#B2DC8F) bis zum dunkelsten Ton Mizukaze Green (#103F2F). Sie vereint Mizukaze Green, Balsam Branch, Torrey Pine, Mosquito Fern, Sage Sensation, Bronze Olive, Green Not Found, Violet Frog, Skeletor’s Cape, Powerful Mauve, Edge of the Galaxy und Midnight in NY in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #103F2F auf #B2DC8F mit 7,62:1.

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

Farben im Detail

Mizukaze Green #103F2F

RGB: rgb(16, 63, 47)
HSL: hsl(160, 59%, 15%)
Luminanz: 0,039

Balsam Branch #38574F

RGB: rgb(56, 87, 79)
HSL: hsl(165, 22%, 28%)
Luminanz: 0,082

Torrey Pine #5A794F

RGB: rgb(90, 121, 79)
HSL: hsl(104, 21%, 39%)
Luminanz: 0,164

Mosquito Fern #89AC4F

RGB: rgb(137, 172, 79)
HSL: hsl(83, 37%, 49%)
Luminanz: 0,354

Sage Sensation #B2DC8F

RGB: rgb(178, 220, 143)
HSL: hsl(93, 52%, 71%)
Luminanz: 0,626

Bronze Olive #5D531C

RGB: rgb(93, 83, 28)
HSL: hsl(51, 54%, 24%)
Luminanz: 0,086

Green Not Found #3D4308

RGB: rgb(61, 67, 8)
HSL: hsl(66, 79%, 15%)
Luminanz: 0,050

Violet Frog #8C6DAF

RGB: rgb(140, 109, 175)
HSL: hsl(268, 29%, 56%)
Luminanz: 0,196

Skeletor’s Cape #7C2D9F

RGB: rgb(124, 45, 159)
HSL: hsl(282, 56%, 40%)
Luminanz: 0,087

Powerful Mauve #4C3D5F

RGB: rgb(76, 61, 95)
HSL: hsl(266, 22%, 31%)
Luminanz: 0,057

Edge of the Galaxy #303C3C

RGB: rgb(48, 60, 60)
HSL: hsl(180, 11%, 21%)
Luminanz: 0,042

Midnight in NY #505C5C

RGB: rgb(80, 92, 92)
HSL: hsl(180, 7%, 34%)
Luminanz: 0,101

Kontrast & Barrierefreiheit

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

Aa #103F2F auf #B2DC8F 7,62:1 AAA

Aa #B2DC8F auf #303C3C 7,36:1 AAA

Aa #B2DC8F auf #3D4308 6,75:1 AA

Aa #B2DC8F auf #4C3D5F 6,32:1 AA

Aa #38574F auf #B2DC8F 5,12:1 AA

Aa #B2DC8F auf #5D531C 4,97:1 AA

Aa #B2DC8F auf #7C2D9F 4,95:1 AA

Aa #103F2F auf #89AC4F 4,55:1 AA

Aa #B2DC8F auf #505C5C 4,47:1 AA (großer Text)

Aa #89AC4F auf #303C3C 4,40:1 AA (großer Text)

Aa #89AC4F auf #3D4308 4,03:1 AA (großer Text)

Aa #89AC4F auf #4C3D5F 3,77:1 AA (großer Text)

Aa #5A794F auf #B2DC8F 3,16:1 AA (großer Text)

Aa #38574F auf #89AC4F 3,05:1 AA (großer Text)

Aa #89AC4F auf #5D531C 2,97:1 Nicht bestanden

Aa #89AC4F auf #7C2D9F 2,96:1 Nicht bestanden

Aa #103F2F auf #8C6DAF 2,77:1 Nicht bestanden

Aa #B2DC8F auf #8C6DAF 2,75:1 Nicht bestanden

Aa #8C6DAF auf #303C3C 2,68:1 Nicht bestanden

Aa #89AC4F auf #505C5C 2,67:1 Nicht bestanden

Aa #3D4308 auf #8C6DAF 2,45:1 Nicht bestanden

Aa #103F2F auf #5A794F 2,41:1 Nicht bestanden

Aa #5A794F auf #303C3C 2,33:1 Nicht bestanden

Aa #8C6DAF auf #4C3D5F 2,30:1 Nicht bestanden

Aa #5A794F auf #3D4308 2,14:1 Nicht bestanden

Aa #5A794F auf #4C3D5F 2,00:1 Nicht bestanden

Aa #5A794F auf #89AC4F 1,89:1 Nicht bestanden

Aa #38574F auf #8C6DAF 1,86:1 Nicht bestanden

Aa #5D531C auf #8C6DAF 1,81:1 Nicht bestanden

Aa #8C6DAF auf #7C2D9F 1,80:1 Nicht bestanden

Aa #103F2F auf #505C5C 1,71:1 Nicht bestanden

Aa #89AC4F auf #B2DC8F 1,67:1 Nicht bestanden

Aa #303C3C auf #505C5C 1,65:1 Nicht bestanden

Aa #89AC4F auf #8C6DAF 1,64:1 Nicht bestanden

Aa #8C6DAF auf #505C5C 1,63:1 Nicht bestanden

Aa #38574F auf #5A794F 1,62:1 Nicht bestanden

Aa #5A794F auf #5D531C 1,57:1 Nicht bestanden

Aa #5A794F auf #7C2D9F 1,57:1 Nicht bestanden

Aa #103F2F auf #7C2D9F 1,54:1 Nicht bestanden

Aa #103F2F auf #5D531C 1,53:1 Nicht bestanden

Aa #3D4308 auf #505C5C 1,51:1 Nicht bestanden

Aa #103F2F auf #38574F 1,49:1 Nicht bestanden

Aa #7C2D9F auf #303C3C 1,49:1 Nicht bestanden

Aa #5D531C auf #303C3C 1,48:1 Nicht bestanden

Aa #38574F auf #303C3C 1,44:1 Nicht bestanden

Aa #5A794F auf #505C5C 1,42:1 Nicht bestanden

Aa #4C3D5F auf #505C5C 1,41:1 Nicht bestanden

Aa #5D531C auf #3D4308 1,36:1 Nicht bestanden

Aa #3D4308 auf #7C2D9F 1,36:1 Nicht bestanden

Aa #38574F auf #3D4308 1,32:1 Nicht bestanden

Aa #7C2D9F auf #4C3D5F 1,28:1 Nicht bestanden

Aa #5D531C auf #4C3D5F 1,27:1 Nicht bestanden

Aa #38574F auf #4C3D5F 1,24:1 Nicht bestanden

Aa #103F2F auf #4C3D5F 1,21:1 Nicht bestanden

Aa #4C3D5F auf #303C3C 1,16:1 Nicht bestanden

Aa #5A794F auf #8C6DAF 1,15:1 Nicht bestanden

Aa #38574F auf #505C5C 1,14:1 Nicht bestanden

Aa #103F2F auf #3D4308 1,13:1 Nicht bestanden

Aa #5D531C auf #505C5C 1,11:1 Nicht bestanden

Aa #7C2D9F auf #505C5C 1,11:1 Nicht bestanden

Aa #3D4308 auf #303C3C 1,09:1 Nicht bestanden

Aa #3D4308 auf #4C3D5F 1,07:1 Nicht bestanden

Aa #103F2F auf #303C3C 1,04:1 Nicht bestanden

Aa #38574F auf #5D531C 1,03:1 Nicht bestanden

Aa #38574F auf #7C2D9F 1,03:1 Nicht bestanden

Aa #5D531C auf #7C2D9F 1,00:1 Nicht bestanden

War Train

War Train

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen