Sunset 9

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

Zurück zur Bibliothek

Sunset 9

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

Bearbeiten

Erdig 9 Farben Warm Gemischt Komplementär blue sky sunset colorful

Likes 18

Farben 9

CSS-Variablen

:root {
  --c-earthy-1: #EAEFE9;
  --c-earthy-2: #35353A;
  --c-earthy-3: #DB5800;
  --c-earthy-4: #F2B50A;
  --c-earthy-5: #B8AC62;
  --c-earthy-6: #96AA9F;
  --c-earthy-7: #7D96A0;
  --c-earthy-8: #4B6472;
  --c-earthy-9: #0D273A;
}

Über diese Palette

Diese erdige Palette mit 9 Farben reicht vom hellsten Ton Hurricane Mist (#EAEFE9) bis zum dunkelsten Ton Celestial Canvas (#0D273A). Sie vereint Hurricane Mist, Hawk’s Eye, Raging Leaf, Rucksack Tan, Gimblet, Melville, Kingfisher Grey, English Channel und Celestial Canvas in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 10 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #EAEFE9 auf #0D273A mit 13,17: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

Hurricane Mist #EAEFE9

RGB: rgb(234, 239, 233)
HSL: hsl(110, 16%, 93%)
Luminanz: 0,851

Hawk’s Eye #35353A

RGB: rgb(53, 53, 58)
HSL: hsl(240, 5%, 22%)
Luminanz: 0,036

Raging Leaf #DB5800

RGB: rgb(219, 88, 0)
HSL: hsl(24, 100%, 43%)
Luminanz: 0,220

Rucksack Tan #F2B50A

RGB: rgb(242, 181, 10)
HSL: hsl(44, 92%, 49%)
Luminanz: 0,520

Gimblet #B8AC62

RGB: rgb(184, 172, 98)
HSL: hsl(52, 38%, 55%)
Luminanz: 0,406

Melville #96AA9F

RGB: rgb(150, 170, 159)
HSL: hsl(147, 11%, 63%)
Luminanz: 0,377

Kingfisher Grey #7D96A0

RGB: rgb(125, 150, 160)
HSL: hsl(197, 16%, 56%)
Luminanz: 0,287

English Channel #4B6472

RGB: rgb(75, 100, 114)
HSL: hsl(202, 21%, 37%)
Luminanz: 0,118

Celestial Canvas #0D273A

RGB: rgb(13, 39, 58)
HSL: hsl(205, 63%, 14%)
Luminanz: 0,018

Kontrast & Barrierefreiheit

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

Aa #EAEFE9 auf #0D273A 13,17:1 AAA

Aa #EAEFE9 auf #35353A 10,47:1 AAA

Aa #F2B50A auf #0D273A 8,32:1 AAA

Aa #B8AC62 auf #0D273A 6,66:1 AA

Aa #35353A auf #F2B50A 6,62:1 AA

Aa #96AA9F auf #0D273A 6,25:1 AA

Aa #EAEFE9 auf #4B6472 5,36:1 AA

Aa #35353A auf #B8AC62 5,29:1 AA

Aa #35353A auf #96AA9F 4,96:1 AA

Aa #7D96A0 auf #0D273A 4,93:1 AA

Aa #DB5800 auf #0D273A 3,95:1 AA (großer Text)

Aa #35353A auf #7D96A0 3,92:1 AA (großer Text)

Aa #F2B50A auf #4B6472 3,38:1 AA (großer Text)

Aa #EAEFE9 auf #DB5800 3,33:1 AA (großer Text)

Aa #35353A auf #DB5800 3,14:1 AA (großer Text)

Aa #B8AC62 auf #4B6472 2,71:1 Nicht bestanden

Aa #EAEFE9 auf #7D96A0 2,67:1 Nicht bestanden

Aa #96AA9F auf #4B6472 2,54:1 Nicht bestanden

Aa #4B6472 auf #0D273A 2,46:1 Nicht bestanden

Aa #EAEFE9 auf #96AA9F 2,11:1 Nicht bestanden

Aa #DB5800 auf #F2B50A 2,11:1 Nicht bestanden

Aa #7D96A0 auf #4B6472 2,00:1 Nicht bestanden

Aa #EAEFE9 auf #B8AC62 1,98:1 Nicht bestanden

Aa #35353A auf #4B6472 1,95:1 Nicht bestanden

Aa #DB5800 auf #B8AC62 1,69:1 Nicht bestanden

Aa #F2B50A auf #7D96A0 1,69:1 Nicht bestanden

Aa #DB5800 auf #4B6472 1,61:1 Nicht bestanden

Aa #EAEFE9 auf #F2B50A 1,58:1 Nicht bestanden

Aa #DB5800 auf #96AA9F 1,58:1 Nicht bestanden

Aa #B8AC62 auf #7D96A0 1,35:1 Nicht bestanden

Aa #F2B50A auf #96AA9F 1,33:1 Nicht bestanden

Aa #96AA9F auf #7D96A0 1,27:1 Nicht bestanden

Aa #35353A auf #0D273A 1,26:1 Nicht bestanden

Aa #DB5800 auf #7D96A0 1,25:1 Nicht bestanden

Aa #F2B50A auf #B8AC62 1,25:1 Nicht bestanden

Aa #B8AC62 auf #96AA9F 1,07:1 Nicht bestanden

Sunset 9

Sunset 9

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen