Seafoam

Palette mit 8 Farben · Kühl · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Seafoam

Palette mit 8 Farben · Temperatur: Kühl · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Erdig 8 Farben Kühl Gemischt Komplementär green blue purple sea

Likes 639

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #37364E;
  --c-earthy-2: #355D69;
  --c-earthy-3: #6AAE9D;
  --c-earthy-4: #B9D4B4;
  --c-earthy-5: #F4E9D4;
  --c-earthy-6: #D0BAA9;
  --c-earthy-7: #9E8E91;
  --c-earthy-8: #5B4A68;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Mimosa (#F4E9D4) bis zum dunkelsten Ton Tiě Hēi Metal (#37364E). Sie vereint Tiě Hēi Metal, Under the Sea, Green Crush, Lime Taffy, Mimosa, Chinchilla Chenille, Autumn Orchid und Bon Vivant in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #37364E auf #F4E9D4 mit 9,7: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

Tiě Hēi Metal #37364E

RGB: rgb(55, 54, 78)
HSL: hsl(243, 18%, 26%)
Luminanz: 0,040

Under the Sea #355D69

RGB: rgb(53, 93, 105)
HSL: hsl(194, 33%, 31%)
Luminanz: 0,096

Green Crush #6AAE9D

RGB: rgb(106, 174, 157)
HSL: hsl(165, 30%, 55%)
Luminanz: 0,358

Lime Taffy #B9D4B4

RGB: rgb(185, 212, 180)
HSL: hsl(111, 27%, 77%)
Luminanz: 0,607

Mimosa #F4E9D4

RGB: rgb(244, 233, 212)
HSL: hsl(39, 59%, 89%)
Luminanz: 0,823

Chinchilla Chenille #D0BAA9

RGB: rgb(208, 186, 169)
HSL: hsl(26, 29%, 74%)
Luminanz: 0,514

Autumn Orchid #9E8E91

RGB: rgb(158, 142, 145)
HSL: hsl(349, 8%, 59%)
Luminanz: 0,287

Bon Vivant #5B4A68

RGB: rgb(91, 74, 104)
HSL: hsl(274, 17%, 35%)
Luminanz: 0,081

Kontrast & Barrierefreiheit

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

Aa #37364E auf #F4E9D4 9,70:1 AAA

Aa #37364E auf #B9D4B4 7,30:1 AAA

Aa #F4E9D4 auf #5B4A68 6,65:1 AA

Aa #37364E auf #D0BAA9 6,27:1 AA

Aa #355D69 auf #F4E9D4 5,97:1 AA

Aa #B9D4B4 auf #5B4A68 5,01:1 AA

Aa #37364E auf #6AAE9D 4,53:1 AA

Aa #355D69 auf #B9D4B4 4,50:1 AA

Aa #D0BAA9 auf #5B4A68 4,30:1 AA (großer Text)

Aa #355D69 auf #D0BAA9 3,86:1 AA (großer Text)

Aa #37364E auf #9E8E91 3,74:1 AA (großer Text)

Aa #6AAE9D auf #5B4A68 3,11:1 AA (großer Text)

Aa #355D69 auf #6AAE9D 2,79:1 Nicht bestanden

Aa #F4E9D4 auf #9E8E91 2,59:1 Nicht bestanden

Aa #9E8E91 auf #5B4A68 2,57:1 Nicht bestanden

Aa #355D69 auf #9E8E91 2,30:1 Nicht bestanden

Aa #6AAE9D auf #F4E9D4 2,14:1 Nicht bestanden

Aa #B9D4B4 auf #9E8E91 1,95:1 Nicht bestanden

Aa #D0BAA9 auf #9E8E91 1,68:1 Nicht bestanden

Aa #37364E auf #355D69 1,62:1 Nicht bestanden

Aa #6AAE9D auf #B9D4B4 1,61:1 Nicht bestanden

Aa #F4E9D4 auf #D0BAA9 1,55:1 Nicht bestanden

Aa #37364E auf #5B4A68 1,46:1 Nicht bestanden

Aa #6AAE9D auf #D0BAA9 1,38:1 Nicht bestanden

Aa #B9D4B4 auf #F4E9D4 1,33:1 Nicht bestanden

Aa #6AAE9D auf #9E8E91 1,21:1 Nicht bestanden

Aa #B9D4B4 auf #D0BAA9 1,16:1 Nicht bestanden

Aa #355D69 auf #5B4A68 1,11:1 Nicht bestanden

Seafoam

Seafoam

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen