Feel Better

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

Zurück zur Bibliothek

Feel Better

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

Bearbeiten

Erdig 8 Farben Neutral Gemischt Komplementär blue 8 brown dull

Likes 31

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #0D1425;
  --c-earthy-2: #472C32;
  --c-earthy-3: #7E5141;
  --c-earthy-4: #E3D8BB;
  --c-earthy-5: #FFFBD9;
  --c-earthy-6: #96BBDB;
  --c-earthy-7: #5E6EA0;
  --c-earthy-8: #3E3C65;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Cheesecake (#FFFBD9) bis zum dunkelsten Ton Corbeau (#0D1425). Sie vereint Corbeau, Wine Tasting, Nougat Brown, Cornerstone, Cheesecake, Manakin, Moonshade und Storm Is Coming in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 12 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0D1425 auf #FFFBD9 mit 17,53: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

Corbeau #0D1425

RGB: rgb(13, 20, 37)
HSL: hsl(223, 48%, 10%)
Luminanz: 0,007

Wine Tasting #472C32

RGB: rgb(71, 44, 50)
HSL: hsl(347, 23%, 23%)
Luminanz: 0,034

Nougat Brown #7E5141

RGB: rgb(126, 81, 65)
HSL: hsl(16, 32%, 37%)
Luminanz: 0,107

Cornerstone #E3D8BB

RGB: rgb(227, 216, 187)
HSL: hsl(44, 42%, 81%)
Luminanz: 0,690

Cheesecake #FFFBD9

RGB: rgb(255, 251, 217)
HSL: hsl(54, 100%, 93%)
Luminanz: 0,953

Manakin #96BBDB

RGB: rgb(150, 187, 219)
HSL: hsl(208, 49%, 72%)
Luminanz: 0,471

Moonshade #5E6EA0

RGB: rgb(94, 110, 160)
HSL: hsl(225, 26%, 50%)
Luminanz: 0,161

Storm Is Coming #3E3C65

RGB: rgb(62, 60, 101)
HSL: hsl(243, 25%, 32%)
Luminanz: 0,052

Kontrast & Barrierefreiheit

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

Aa #0D1425 auf #FFFBD9 17,53:1 AAA

Aa #0D1425 auf #E3D8BB 12,94:1 AAA

Aa #472C32 auf #FFFBD9 11,98:1 AAA

Aa #FFFBD9 auf #3E3C65 9,83:1 AAA

Aa #0D1425 auf #96BBDB 9,12:1 AAA

Aa #472C32 auf #E3D8BB 8,84:1 AAA

Aa #E3D8BB auf #3E3C65 7,26:1 AAA

Aa #7E5141 auf #FFFBD9 6,39:1 AA

Aa #472C32 auf #96BBDB 6,23:1 AA

Aa #96BBDB auf #3E3C65 5,11:1 AA

Aa #FFFBD9 auf #5E6EA0 4,76:1 AA

Aa #7E5141 auf #E3D8BB 4,71:1 AA

Aa #0D1425 auf #5E6EA0 3,68:1 AA (großer Text)

Aa #E3D8BB auf #5E6EA0 3,51:1 AA (großer Text)

Aa #7E5141 auf #96BBDB 3,32:1 AA (großer Text)

Aa #0D1425 auf #7E5141 2,75:1 Nicht bestanden

Aa #472C32 auf #5E6EA0 2,52:1 Nicht bestanden

Aa #96BBDB auf #5E6EA0 2,47:1 Nicht bestanden

Aa #5E6EA0 auf #3E3C65 2,07:1 Nicht bestanden

Aa #FFFBD9 auf #96BBDB 1,92:1 Nicht bestanden

Aa #472C32 auf #7E5141 1,88:1 Nicht bestanden

Aa #0D1425 auf #3E3C65 1,78:1 Nicht bestanden

Aa #7E5141 auf #3E3C65 1,54:1 Nicht bestanden

Aa #0D1425 auf #472C32 1,46:1 Nicht bestanden

Aa #E3D8BB auf #96BBDB 1,42:1 Nicht bestanden

Aa #E3D8BB auf #FFFBD9 1,35:1 Nicht bestanden

Aa #7E5141 auf #5E6EA0 1,34:1 Nicht bestanden

Aa #472C32 auf #3E3C65 1,22:1 Nicht bestanden

Feel Better

Feel Better

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen