Mocha

Palette mit 6 Farben · Warm · Gemischt · Harmonie: Monochrom

Zurück zur Bibliothek

Mocha

Palette mit 6 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Monochrom

Bearbeiten

Erdig 6 Farben Warm Gemischt Monochrom 6 chocolate spacesandwich coffee

Likes 54

Farben 6

CSS-Variablen

:root {
  --c-earthy-1: #20130E;
  --c-earthy-2: #4C2C21;
  --c-earthy-3: #78462C;
  --c-earthy-4: #AB6C46;
  --c-earthy-5: #D19E79;
  --c-earthy-6: #F2E3C3;
}

Über diese Palette

Diese erdige Palette mit 6 Farben reicht vom hellsten Ton Cameo Cream (#F2E3C3) bis zum dunkelsten Ton Bighorn Sheep (#20130E). Sie vereint Bighorn Sheep, Couch, Bull Shot, Auric Copper, Darling Clementine und Cameo Cream in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 15. Davon erreichen 5 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #20130E auf #F2E3C3 mit 14,26: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

Bighorn Sheep #20130E

RGB: rgb(32, 19, 14)
HSL: hsl(17, 39%, 9%)
Luminanz: 0,008

Couch #4C2C21

RGB: rgb(76, 44, 33)
HSL: hsl(15, 39%, 21%)
Luminanz: 0,035

Bull Shot #78462C

RGB: rgb(120, 70, 44)
HSL: hsl(21, 46%, 32%)
Luminanz: 0,086

Auric Copper #AB6C46

RGB: rgb(171, 108, 70)
HSL: hsl(23, 42%, 47%)
Luminanz: 0,198

Darling Clementine #D19E79

RGB: rgb(209, 158, 121)
HSL: hsl(25, 49%, 65%)
Luminanz: 0,394

Cameo Cream #F2E3C3

RGB: rgb(242, 227, 195)
HSL: hsl(41, 64%, 86%)
Luminanz: 0,778

Kontrast & Barrierefreiheit

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

Aa #20130E auf #F2E3C3 14,26:1 AAA

Aa #4C2C21 auf #F2E3C3 9,80:1 AAA

Aa #20130E auf #D19E79 7,65:1 AAA

Aa #78462C auf #F2E3C3 6,11:1 AA

Aa #4C2C21 auf #D19E79 5,25:1 AA

Aa #20130E auf #AB6C46 4,28:1 AA (großer Text)

Aa #AB6C46 auf #F2E3C3 3,33:1 AA (großer Text)

Aa #78462C auf #D19E79 3,27:1 AA (großer Text)

Aa #4C2C21 auf #AB6C46 2,94:1 Nicht bestanden

Aa #20130E auf #78462C 2,34:1 Nicht bestanden

Aa #D19E79 auf #F2E3C3 1,86:1 Nicht bestanden

Aa #78462C auf #AB6C46 1,83:1 Nicht bestanden

Aa #AB6C46 auf #D19E79 1,79:1 Nicht bestanden

Aa #4C2C21 auf #78462C 1,60:1 Nicht bestanden

Aa #20130E auf #4C2C21 1,46:1 Nicht bestanden

Mocha

Mocha

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen