Primary 8

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

Zurück zur Bibliothek

Primary 8

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

Bearbeiten

Erdig 8 Farben Kühl Gemischt Komplementär isasstudio

Likes 56

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #F5FFE0;
  --c-earthy-2: #1B1926;
  --c-earthy-3: #262157;
  --c-earthy-4: #323DA1;
  --c-earthy-5: #BD2F40;
  --c-earthy-6: #F0E143;
  --c-earthy-7: #6CA84D;
  --c-earthy-8: #23574D;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Milk Foam (#F5FFE0) bis zum dunkelsten Ton Coarse Wool (#1B1926). Sie vereint Milk Foam, Coarse Wool, Spacescape, Liquid Denim, Crimson Cloud, Golden Snitch, Fern Flash und Forest Biome in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #F5FFE0 auf #1B1926 mit 16,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

Milk Foam #F5FFE0

RGB: rgb(245, 255, 224)
HSL: hsl(79, 100%, 94%)
Luminanz: 0,963

Coarse Wool #1B1926

RGB: rgb(27, 25, 38)
HSL: hsl(249, 21%, 12%)
Luminanz: 0,011

Spacescape #262157

RGB: rgb(38, 33, 87)
HSL: hsl(246, 45%, 24%)
Luminanz: 0,022

Liquid Denim #323DA1

RGB: rgb(50, 61, 161)
HSL: hsl(234, 53%, 41%)
Luminanz: 0,066

Crimson Cloud #BD2F40

RGB: rgb(189, 47, 64)
HSL: hsl(353, 60%, 46%)
Luminanz: 0,132

Golden Snitch #F0E143

RGB: rgb(240, 225, 67)
HSL: hsl(55, 85%, 60%)
Luminanz: 0,728

Fern Flash #6CA84D

RGB: rgb(108, 168, 77)
HSL: hsl(100, 37%, 48%)
Luminanz: 0,317

Forest Biome #23574D

RGB: rgb(35, 87, 77)
HSL: hsl(168, 43%, 24%)
Luminanz: 0,077

Kontrast & Barrierefreiheit

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

Aa #F5FFE0 auf #1B1926 16,70:1 AAA

Aa #F5FFE0 auf #262157 14,10:1 AAA

Aa #1B1926 auf #F0E143 12,82:1 AAA

Aa #262157 auf #F0E143 10,82:1 AAA

Aa #F5FFE0 auf #323DA1 8,74:1 AAA

Aa #F5FFE0 auf #23574D 7,97:1 AAA

Aa #323DA1 auf #F0E143 6,71:1 AA

Aa #F0E143 auf #23574D 6,12:1 AA

Aa #1B1926 auf #6CA84D 6,05:1 AA

Aa #F5FFE0 auf #BD2F40 5,56:1 AA

Aa #262157 auf #6CA84D 5,11:1 AA

Aa #BD2F40 auf #F0E143 4,27:1 AA (großer Text)

Aa #323DA1 auf #6CA84D 3,17:1 AA (großer Text)

Aa #1B1926 auf #BD2F40 3,00:1 AA (großer Text)

Aa #6CA84D auf #23574D 2,89:1 Nicht bestanden

Aa #F5FFE0 auf #6CA84D 2,76:1 Nicht bestanden

Aa #262157 auf #BD2F40 2,54:1 Nicht bestanden

Aa #F0E143 auf #6CA84D 2,12:1 Nicht bestanden

Aa #1B1926 auf #23574D 2,09:1 Nicht bestanden

Aa #BD2F40 auf #6CA84D 2,02:1 Nicht bestanden

Aa #1B1926 auf #323DA1 1,91:1 Nicht bestanden

Aa #262157 auf #23574D 1,77:1 Nicht bestanden

Aa #262157 auf #323DA1 1,61:1 Nicht bestanden

Aa #323DA1 auf #BD2F40 1,57:1 Nicht bestanden

Aa #BD2F40 auf #23574D 1,43:1 Nicht bestanden

Aa #F5FFE0 auf #F0E143 1,30:1 Nicht bestanden

Aa #1B1926 auf #262157 1,18:1 Nicht bestanden

Aa #323DA1 auf #23574D 1,10:1 Nicht bestanden

Primary 8

Primary 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen