Paper 8

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

Zurück zur Bibliothek

Paper 8

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

Bearbeiten

Erdig 8 Farben Warm Gemischt Komplementär colorful steampunk

Likes 886

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #1F244B;
  --c-earthy-2: #654053;
  --c-earthy-3: #A8605D;
  --c-earthy-4: #D1A67E;
  --c-earthy-5: #F6E79C;
  --c-earthy-6: #B6CF8E;
  --c-earthy-7: #60AE7B;
  --c-earthy-8: #3C6B64;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Storm Lightning (#F6E79C) bis zum dunkelsten Ton Fainting Light (#1F244B). Sie vereint Fainting Light, Delicious Berry, Escalante, City Sunrise, Storm Lightning, Al Green, Green Tea Candy und Betta Fish 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 #1F244B auf #F6E79C mit 11,92: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

Fainting Light #1F244B

RGB: rgb(31, 36, 75)
HSL: hsl(233, 42%, 21%)
Luminanz: 0,021

Delicious Berry #654053

RGB: rgb(101, 64, 83)
HSL: hsl(329, 22%, 32%)
Luminanz: 0,071

Escalante #A8605D

RGB: rgb(168, 96, 93)
HSL: hsl(2, 30%, 51%)
Luminanz: 0,175

City Sunrise #D1A67E

RGB: rgb(209, 166, 126)
HSL: hsl(29, 47%, 66%)
Luminanz: 0,423

Storm Lightning #F6E79C

RGB: rgb(246, 231, 156)
HSL: hsl(50, 83%, 79%)
Luminanz: 0,791

Al Green #B6CF8E

RGB: rgb(182, 207, 142)
HSL: hsl(83, 40%, 68%)
Luminanz: 0,565

Green Tea Candy #60AE7B

RGB: rgb(96, 174, 123)
HSL: hsl(141, 33%, 53%)
Luminanz: 0,342

Betta Fish #3C6B64

RGB: rgb(60, 107, 100)
HSL: hsl(171, 28%, 33%)
Luminanz: 0,124

Kontrast & Barrierefreiheit

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

Aa #1F244B auf #F6E79C 11,92:1 AAA

Aa #1F244B auf #B6CF8E 8,71:1 AAA

Aa #654053 auf #F6E79C 6,98:1 AA

Aa #1F244B auf #D1A67E 6,70:1 AA

Aa #1F244B auf #60AE7B 5,55:1 AA

Aa #654053 auf #B6CF8E 5,10:1 AA

Aa #F6E79C auf #3C6B64 4,84:1 AA

Aa #654053 auf #D1A67E 3,93:1 AA (großer Text)

Aa #A8605D auf #F6E79C 3,74:1 AA (großer Text)

Aa #B6CF8E auf #3C6B64 3,54:1 AA (großer Text)

Aa #654053 auf #60AE7B 3,25:1 AA (großer Text)

Aa #1F244B auf #A8605D 3,18:1 AA (großer Text)

Aa #A8605D auf #B6CF8E 2,74:1 Nicht bestanden

Aa #D1A67E auf #3C6B64 2,72:1 Nicht bestanden

Aa #1F244B auf #3C6B64 2,46:1 Nicht bestanden

Aa #60AE7B auf #3C6B64 2,25:1 Nicht bestanden

Aa #F6E79C auf #60AE7B 2,15:1 Nicht bestanden

Aa #A8605D auf #D1A67E 2,11:1 Nicht bestanden

Aa #654053 auf #A8605D 1,86:1 Nicht bestanden

Aa #D1A67E auf #F6E79C 1,78:1 Nicht bestanden

Aa #A8605D auf #60AE7B 1,74:1 Nicht bestanden

Aa #1F244B auf #654053 1,71:1 Nicht bestanden

Aa #B6CF8E auf #60AE7B 1,57:1 Nicht bestanden

Aa #654053 auf #3C6B64 1,44:1 Nicht bestanden

Aa #F6E79C auf #B6CF8E 1,37:1 Nicht bestanden

Aa #D1A67E auf #B6CF8E 1,30:1 Nicht bestanden

Aa #A8605D auf #3C6B64 1,29:1 Nicht bestanden

Aa #D1A67E auf #60AE7B 1,21:1 Nicht bestanden

Paper 8

Paper 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen