Powersuit

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

Zurück zur Bibliothek

Powersuit

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

Bearbeiten

Erdig 8 Farben Warm Gemischt Komplementär green orange red powersuit

Likes 19

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #651212;
  --c-earthy-2: #AB1717;
  --c-earthy-3: #CF5E34;
  --c-earthy-4: #D7B56C;
  --c-earthy-5: #2B2C35;
  --c-earthy-6: #216158;
  --c-earthy-7: #3DA750;
  --c-earthy-8: #FFFFFF;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Haiti (#2B2C35). Sie vereint Adana Kebabı, Ketchup Later, Chilean Fire, Yellow Lab, Haiti, Humboldt Redwoods, Leapfrog und White 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 #2B2C35 auf #FFFFFF mit 13,87:1.

Bodenständige, natürliche Töne – passend für nachhaltige und Bio-Marken, Cafés, Outdoor-Ausrüstung und warme redaktionelle Typografie.

Farben im Detail

Adana Kebabı #651212

RGB: rgb(101, 18, 18)
HSL: hsl(0, 70%, 23%)
Luminanz: 0,032

Ketchup Later #AB1717

RGB: rgb(171, 23, 23)
HSL: hsl(0, 76%, 38%)
Luminanz: 0,093

Chilean Fire #CF5E34

RGB: rgb(207, 94, 52)
HSL: hsl(16, 62%, 51%)
Luminanz: 0,215

Yellow Lab #D7B56C

RGB: rgb(215, 181, 108)
HSL: hsl(41, 57%, 63%)
Luminanz: 0,486

Haiti #2B2C35

RGB: rgb(43, 44, 53)
HSL: hsl(234, 10%, 19%)
Luminanz: 0,026

Humboldt Redwoods #216158

RGB: rgb(33, 97, 88)
HSL: hsl(172, 49%, 25%)
Luminanz: 0,096

Leapfrog #3DA750

RGB: rgb(61, 167, 80)
HSL: hsl(131, 46%, 45%)
Luminanz: 0,292

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Kontrast & Barrierefreiheit

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

Aa #2B2C35 auf #FFFFFF 13,87:1 AAA

Aa #651212 auf #FFFFFF 12,74:1 AAA

Aa #AB1717 auf #FFFFFF 7,33:1 AAA

Aa #216158 auf #FFFFFF 7,20:1 AAA

Aa #D7B56C auf #2B2C35 7,08:1 AAA

Aa #651212 auf #D7B56C 6,50:1 AA

Aa #2B2C35 auf #3DA750 4,52:1 AA

Aa #651212 auf #3DA750 4,15:1 AA (großer Text)

Aa #CF5E34 auf #FFFFFF 3,96:1 AA (großer Text)

Aa #AB1717 auf #D7B56C 3,74:1 AA (großer Text)

Aa #D7B56C auf #216158 3,68:1 AA (großer Text)

Aa #CF5E34 auf #2B2C35 3,50:1 AA (großer Text)

Aa #651212 auf #CF5E34 3,22:1 AA (großer Text)

Aa #3DA750 auf #FFFFFF 3,07:1 AA (großer Text)

Aa #AB1717 auf #3DA750 2,39:1 Nicht bestanden

Aa #216158 auf #3DA750 2,35:1 Nicht bestanden

Aa #CF5E34 auf #D7B56C 2,02:1 Nicht bestanden

Aa #D7B56C auf #FFFFFF 1,96:1 Nicht bestanden

Aa #2B2C35 auf #216158 1,93:1 Nicht bestanden

Aa #AB1717 auf #2B2C35 1,89:1 Nicht bestanden

Aa #AB1717 auf #CF5E34 1,85:1 Nicht bestanden

Aa #CF5E34 auf #216158 1,82:1 Nicht bestanden

Aa #651212 auf #216158 1,77:1 Nicht bestanden

Aa #651212 auf #AB1717 1,74:1 Nicht bestanden

Aa #D7B56C auf #3DA750 1,57:1 Nicht bestanden

Aa #CF5E34 auf #3DA750 1,29:1 Nicht bestanden

Aa #651212 auf #2B2C35 1,09:1 Nicht bestanden

Aa #AB1717 auf #216158 1,02:1 Nicht bestanden

Powersuit

Powersuit

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen