Color City 8

Palette mit 9 Farben · Warm · Gemischt · Harmonie: Triadisch

Zurück zur Bibliothek

Color City 8

Palette mit 9 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Triadisch

Bearbeiten

Erdig 9 Farben Warm Gemischt Triadisch polyphrog forest city

Likes 62

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #26171B;
  --c-earthy-2: #46474C;
  --c-earthy-3: #7A7070;
  --c-earthy-4: #E0DCA4;
  --c-earthy-5: #B5BD3D;
  --c-earthy-6: #C0552A;
  --c-earthy-7: #6D3E0F;
  --c-earthy-8: #508714;
  --c-earthy-9: #85A796;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Buckwheat Groats (#E0DCA4) bis zum dunkelsten Ton Kurobeni (#26171B). Sie vereint Kurobeni, Midnight Magic, Simple Silhouette, Buckwheat Groats, Hopscotch, Raucous Orange, Sepia, Kelp Forest und Beckett 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 #26171B auf #E0DCA4 mit 12,24: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

Kurobeni #26171B

RGB: rgb(38, 23, 27)
HSL: hsl(344, 25%, 12%)
Luminanz: 0,011

Midnight Magic #46474C

RGB: rgb(70, 71, 76)
HSL: hsl(230, 4%, 29%)
Luminanz: 0,063

Simple Silhouette #7A7070

RGB: rgb(122, 112, 112)
HSL: hsl(0, 4%, 46%)
Luminanz: 0,169

Buckwheat Groats #E0DCA4

RGB: rgb(224, 220, 164)
HSL: hsl(56, 49%, 76%)
Luminanz: 0,697

Hopscotch #B5BD3D

RGB: rgb(181, 189, 61)
HSL: hsl(64, 51%, 49%)
Luminanz: 0,466

Raucous Orange #C0552A

RGB: rgb(192, 85, 42)
HSL: hsl(17, 64%, 46%)
Luminanz: 0,179

Sepia #6D3E0F

RGB: rgb(109, 62, 15)
HSL: hsl(30, 76%, 24%)
Luminanz: 0,067

Kelp Forest #508714

RGB: rgb(80, 135, 20)
HSL: hsl(89, 74%, 30%)
Luminanz: 0,191

Beckett #85A796

RGB: rgb(133, 167, 150)
HSL: hsl(150, 16%, 59%)
Luminanz: 0,348

Kontrast & Barrierefreiheit

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

Aa #26171B auf #E0DCA4 12,24:1 AAA

Aa #26171B auf #B5BD3D 8,45:1 AAA

Aa #46474C auf #E0DCA4 6,59:1 AA

Aa #26171B auf #85A796 6,52:1 AA

Aa #E0DCA4 auf #6D3E0F 6,37:1 AA

Aa #46474C auf #B5BD3D 4,55:1 AA

Aa #B5BD3D auf #6D3E0F 4,39:1 AA (großer Text)

Aa #26171B auf #508714 3,95:1 AA (großer Text)

Aa #26171B auf #C0552A 3,75:1 AA (großer Text)

Aa #26171B auf #7A7070 3,59:1 AA (großer Text)

Aa #46474C auf #85A796 3,51:1 AA (großer Text)

Aa #7A7070 auf #E0DCA4 3,41:1 AA (großer Text)

Aa #6D3E0F auf #85A796 3,39:1 AA (großer Text)

Aa #E0DCA4 auf #C0552A 3,27:1 AA (großer Text)

Aa #E0DCA4 auf #508714 3,10:1 AA (großer Text)

Aa #7A7070 auf #B5BD3D 2,35:1 Nicht bestanden

Aa #B5BD3D auf #C0552A 2,25:1 Nicht bestanden

Aa #B5BD3D auf #508714 2,14:1 Nicht bestanden

Aa #46474C auf #508714 2,13:1 Nicht bestanden

Aa #6D3E0F auf #508714 2,05:1 Nicht bestanden

Aa #46474C auf #C0552A 2,02:1 Nicht bestanden

Aa #C0552A auf #6D3E0F 1,95:1 Nicht bestanden

Aa #46474C auf #7A7070 1,93:1 Nicht bestanden

Aa #26171B auf #6D3E0F 1,92:1 Nicht bestanden

Aa #E0DCA4 auf #85A796 1,88:1 Nicht bestanden

Aa #7A7070 auf #6D3E0F 1,87:1 Nicht bestanden

Aa #26171B auf #46474C 1,86:1 Nicht bestanden

Aa #7A7070 auf #85A796 1,82:1 Nicht bestanden

Aa #C0552A auf #85A796 1,74:1 Nicht bestanden

Aa #508714 auf #85A796 1,65:1 Nicht bestanden

Aa #E0DCA4 auf #B5BD3D 1,45:1 Nicht bestanden

Aa #B5BD3D auf #85A796 1,29:1 Nicht bestanden

Aa #7A7070 auf #508714 1,10:1 Nicht bestanden

Aa #C0552A auf #508714 1,05:1 Nicht bestanden

Aa #46474C auf #6D3E0F 1,04:1 Nicht bestanden

Aa #7A7070 auf #C0552A 1,04:1 Nicht bestanden

Color City 8

Color City 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen