Phezen

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

Zurück zur Bibliothek

Phezen

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

Bearbeiten

Erdig 8 Farben Warm Gemischt Komplementär gray green orange white

Likes 22

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #402F23;
  --c-earthy-2: #283A59;
  --c-earthy-3: #D9C7AD;
  --c-earthy-4: #BF9760;
  --c-earthy-5: #8B8677;
  --c-earthy-6: #B4642C;
  --c-earthy-7: #A12C30;
  --c-earthy-8: #4F7137;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton New Khaki (#D9C7AD) bis zum dunkelsten Ton After Eight (#402F23). Sie vereint After Eight, Nautilus, New Khaki, Cheers!, Roller Coaster, Date Fruit Brown, Dorset Naga und Deep Pine in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 3 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #402F23 auf #D9C7AD mit 7,72: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

After Eight #402F23

RGB: rgb(64, 47, 35)
HSL: hsl(25, 29%, 19%)
Luminanz: 0,032

Nautilus #283A59

RGB: rgb(40, 58, 89)
HSL: hsl(218, 38%, 25%)
Luminanz: 0,042

New Khaki #D9C7AD

RGB: rgb(217, 199, 173)
HSL: hsl(35, 37%, 76%)
Luminanz: 0,586

Cheers! #BF9760

RGB: rgb(191, 151, 96)
HSL: hsl(35, 43%, 56%)
Luminanz: 0,341

Roller Coaster #8B8677

RGB: rgb(139, 134, 119)
HSL: hsl(45, 8%, 51%)
Luminanz: 0,239

Date Fruit Brown #B4642C

RGB: rgb(180, 100, 44)
HSL: hsl(25, 61%, 44%)
Luminanz: 0,190

Dorset Naga #A12C30

RGB: rgb(161, 44, 48)
HSL: hsl(358, 57%, 40%)
Luminanz: 0,096

Deep Pine #4F7137

RGB: rgb(79, 113, 55)
HSL: hsl(95, 35%, 33%)
Luminanz: 0,138

Kontrast & Barrierefreiheit

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

Aa #402F23 auf #D9C7AD 7,72:1 AAA

Aa #283A59 auf #D9C7AD 6,92:1 AA

Aa #402F23 auf #BF9760 4,74:1 AA

Aa #D9C7AD auf #A12C30 4,36:1 AA (großer Text)

Aa #283A59 auf #BF9760 4,25:1 AA (großer Text)

Aa #402F23 auf #8B8677 3,50:1 AA (großer Text)

Aa #D9C7AD auf #4F7137 3,39:1 AA (großer Text)

Aa #283A59 auf #8B8677 3,14:1 AA (großer Text)

Aa #402F23 auf #B4642C 2,91:1 Nicht bestanden

Aa #BF9760 auf #A12C30 2,68:1 Nicht bestanden

Aa #D9C7AD auf #B4642C 2,65:1 Nicht bestanden

Aa #283A59 auf #B4642C 2,61:1 Nicht bestanden

Aa #402F23 auf #4F7137 2,27:1 Nicht bestanden

Aa #D9C7AD auf #8B8677 2,20:1 Nicht bestanden

Aa #BF9760 auf #4F7137 2,08:1 Nicht bestanden

Aa #283A59 auf #4F7137 2,04:1 Nicht bestanden

Aa #8B8677 auf #A12C30 1,98:1 Nicht bestanden

Aa #402F23 auf #A12C30 1,77:1 Nicht bestanden

Aa #B4642C auf #A12C30 1,64:1 Nicht bestanden

Aa #D9C7AD auf #BF9760 1,63:1 Nicht bestanden

Aa #BF9760 auf #B4642C 1,63:1 Nicht bestanden

Aa #283A59 auf #A12C30 1,59:1 Nicht bestanden

Aa #8B8677 auf #4F7137 1,54:1 Nicht bestanden

Aa #BF9760 auf #8B8677 1,35:1 Nicht bestanden

Aa #B4642C auf #4F7137 1,28:1 Nicht bestanden

Aa #A12C30 auf #4F7137 1,28:1 Nicht bestanden

Aa #8B8677 auf #B4642C 1,20:1 Nicht bestanden

Aa #402F23 auf #283A59 1,12:1 Nicht bestanden

Phezen

Phezen

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen