Side Forest

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

Zurück zur Bibliothek

Side Forest

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

Bearbeiten

Erdig 12 Farben Warm Gemischt Komplementär forest 12vember 3digithex 3hex

Likes 94

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #221122;
  --c-earthy-2: #332233;
  --c-earthy-3: #334444;
  --c-earthy-4: #336644;
  --c-earthy-5: #668855;
  --c-earthy-6: #99AA55;
  --c-earthy-7: #CCAA88;
  --c-earthy-8: #DDCCBB;
  --c-earthy-9: #889999;
  --c-earthy-10: #776688;
  --c-earthy-11: #663355;
  --c-earthy-12: #BB7777;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton Honey Lime Chicken (#DDCCBB) bis zum dunkelsten Ton Inside (#221122). Sie vereint Inside, Zero Gravity, Firefly, Forest Serenade, Tee Off, Springtide Melodies, African Sand, Honey Lime Chicken, Aged Pewter, Amethyst Gem, Blackberry Deep Red und Nipple in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #221122 auf #DDCCBB mit 11,47: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

Inside #221122

RGB: rgb(34, 17, 34)
HSL: hsl(300, 33%, 10%)
Luminanz: 0,009

Zero Gravity #332233

RGB: rgb(51, 34, 51)
HSL: hsl(300, 20%, 17%)
Luminanz: 0,021

Firefly #334444

RGB: rgb(51, 68, 68)
HSL: hsl(180, 14%, 23%)
Luminanz: 0,053

Forest Serenade #336644

RGB: rgb(51, 102, 68)
HSL: hsl(140, 33%, 30%)
Luminanz: 0,106

Tee Off #668855

RGB: rgb(102, 136, 85)
HSL: hsl(100, 23%, 43%)
Luminanz: 0,211

Springtide Melodies #99AA55

RGB: rgb(153, 170, 85)
HSL: hsl(72, 33%, 50%)
Luminanz: 0,362

African Sand #CCAA88

RGB: rgb(204, 170, 136)
HSL: hsl(30, 40%, 67%)
Luminanz: 0,434

Honey Lime Chicken #DDCCBB

RGB: rgb(221, 204, 187)
HSL: hsl(30, 33%, 80%)
Luminanz: 0,622

Aged Pewter #889999

RGB: rgb(136, 153, 153)
HSL: hsl(180, 8%, 57%)
Luminanz: 0,303

Amethyst Gem #776688

RGB: rgb(119, 102, 136)
HSL: hsl(270, 14%, 47%)
Luminanz: 0,152

Blackberry Deep Red #663355

RGB: rgb(102, 51, 85)
HSL: hsl(320, 33%, 30%)
Luminanz: 0,059

Nipple #BB7777

RGB: rgb(187, 119, 119)
HSL: hsl(0, 33%, 60%)
Luminanz: 0,251

Kontrast & Barrierefreiheit

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

Aa #221122 auf #DDCCBB 11,47:1 AAA

Aa #332233 auf #DDCCBB 9,47:1 AAA

Aa #221122 auf #CCAA88 8,26:1 AAA

Aa #221122 auf #99AA55 7,03:1 AAA

Aa #332233 auf #CCAA88 6,82:1 AA

Aa #334444 auf #DDCCBB 6,55:1 AA

Aa #DDCCBB auf #663355 6,19:1 AA

Aa #221122 auf #889999 6,03:1 AA

Aa #332233 auf #99AA55 5,81:1 AA

Aa #221122 auf #BB7777 5,14:1 AA

Aa #332233 auf #889999 4,98:1 AA

Aa #334444 auf #CCAA88 4,72:1 AA

Aa #CCAA88 auf #663355 4,46:1 AA (großer Text)

Aa #221122 auf #668855 4,45:1 AA (großer Text)

Aa #336644 auf #DDCCBB 4,30:1 AA (großer Text)

Aa #332233 auf #BB7777 4,25:1 AA (großer Text)

Aa #334444 auf #99AA55 4,02:1 AA (großer Text)

Aa #99AA55 auf #663355 3,80:1 AA (großer Text)

Aa #332233 auf #668855 3,68:1 AA (großer Text)

Aa #221122 auf #776688 3,45:1 AA (großer Text)

Aa #334444 auf #889999 3,44:1 AA (großer Text)

Aa #DDCCBB auf #776688 3,32:1 AA (großer Text)

Aa #889999 auf #663355 3,26:1 AA (großer Text)

Aa #336644 auf #CCAA88 3,10:1 AA (großer Text)

Aa #334444 auf #BB7777 2,93:1 Nicht bestanden

Aa #332233 auf #776688 2,85:1 Nicht bestanden

Aa #663355 auf #BB7777 2,77:1 Nicht bestanden

Aa #221122 auf #336644 2,67:1 Nicht bestanden

Aa #336644 auf #99AA55 2,64:1 Nicht bestanden

Aa #668855 auf #DDCCBB 2,57:1 Nicht bestanden

Aa #334444 auf #668855 2,54:1 Nicht bestanden

Aa #668855 auf #663355 2,40:1 Nicht bestanden

Aa #CCAA88 auf #776688 2,39:1 Nicht bestanden

Aa #336644 auf #889999 2,26:1 Nicht bestanden

Aa #DDCCBB auf #BB7777 2,23:1 Nicht bestanden

Aa #332233 auf #336644 2,20:1 Nicht bestanden

Aa #99AA55 auf #776688 2,04:1 Nicht bestanden

Aa #334444 auf #776688 1,97:1 Nicht bestanden

Aa #336644 auf #BB7777 1,93:1 Nicht bestanden

Aa #DDCCBB auf #889999 1,90:1 Nicht bestanden

Aa #776688 auf #663355 1,86:1 Nicht bestanden

Aa #221122 auf #663355 1,85:1 Nicht bestanden

Aa #668855 auf #CCAA88 1,85:1 Nicht bestanden

Aa #221122 auf #334444 1,75:1 Nicht bestanden

Aa #889999 auf #776688 1,75:1 Nicht bestanden

Aa #336644 auf #668855 1,67:1 Nicht bestanden

Aa #99AA55 auf #DDCCBB 1,63:1 Nicht bestanden

Aa #CCAA88 auf #BB7777 1,61:1 Nicht bestanden

Aa #668855 auf #99AA55 1,58:1 Nicht bestanden

Aa #332233 auf #663355 1,53:1 Nicht bestanden

Aa #334444 auf #336644 1,52:1 Nicht bestanden

Aa #776688 auf #BB7777 1,49:1 Nicht bestanden

Aa #332233 auf #334444 1,45:1 Nicht bestanden

Aa #336644 auf #663355 1,44:1 Nicht bestanden

Aa #CCAA88 auf #DDCCBB 1,39:1 Nicht bestanden

Aa #99AA55 auf #BB7777 1,37:1 Nicht bestanden

Aa #CCAA88 auf #889999 1,37:1 Nicht bestanden

Aa #668855 auf #889999 1,35:1 Nicht bestanden

Aa #336644 auf #776688 1,29:1 Nicht bestanden

Aa #668855 auf #776688 1,29:1 Nicht bestanden

Aa #221122 auf #332233 1,21:1 Nicht bestanden

Aa #99AA55 auf #CCAA88 1,17:1 Nicht bestanden

Aa #99AA55 auf #889999 1,17:1 Nicht bestanden

Aa #889999 auf #BB7777 1,17:1 Nicht bestanden

Aa #668855 auf #BB7777 1,15:1 Nicht bestanden

Aa #334444 auf #663355 1,06:1 Nicht bestanden

Side Forest

Side Forest

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen