Petite 8

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

Zurück zur Bibliothek

Petite 8

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

Bearbeiten

Erdig 8 Farben Neutral Gemischt Komplementär artist monoramp adigunpolack

Likes 64

Farben 8

CSS-Variablen

:root {
  --c-earthy-1: #0A0A10;
  --c-earthy-2: #181B22;
  --c-earthy-3: #272F3B;
  --c-earthy-4: #47534E;
  --c-earthy-5: #7B8046;
  --c-earthy-6: #C5AF63;
  --c-earthy-7: #EFD98D;
  --c-earthy-8: #F8F4E4;
}

Über diese Palette

Diese erdige Palette mit 8 Farben reicht vom hellsten Ton Cotton Fluff (#F8F4E4) bis zum dunkelsten Ton Narwhal Grey (#0A0A10). Sie vereint Narwhal Grey, Coarse Wool, Chimney Sweep, Evergreen Field, Fresh Artichoke, Champagne Grape, Natural Yellow und Cotton Fluff 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 #0A0A10 auf #F8F4E4 mit 17,91: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

Narwhal Grey #0A0A10

RGB: rgb(10, 10, 16)
HSL: hsl(240, 23%, 5%)
Luminanz: 0,003

Coarse Wool #181B22

RGB: rgb(24, 27, 34)
HSL: hsl(222, 17%, 11%)
Luminanz: 0,011

Chimney Sweep #272F3B

RGB: rgb(39, 47, 59)
HSL: hsl(216, 20%, 19%)
Luminanz: 0,028

Evergreen Field #47534E

RGB: rgb(71, 83, 78)
HSL: hsl(155, 8%, 30%)
Luminanz: 0,081

Fresh Artichoke #7B8046

RGB: rgb(123, 128, 70)
HSL: hsl(65, 29%, 39%)
Luminanz: 0,201

Champagne Grape #C5AF63

RGB: rgb(197, 175, 99)
HSL: hsl(47, 46%, 58%)
Luminanz: 0,434

Natural Yellow #EFD98D

RGB: rgb(239, 217, 141)
HSL: hsl(47, 75%, 75%)
Luminanz: 0,699

Cotton Fluff #F8F4E4

RGB: rgb(248, 244, 228)
HSL: hsl(48, 59%, 93%)
Luminanz: 0,903

Kontrast & Barrierefreiheit

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

Aa #0A0A10 auf #F8F4E4 17,91:1 AAA

Aa #181B22 auf #F8F4E4 15,63:1 AAA

Aa #0A0A10 auf #EFD98D 14,08:1 AAA

Aa #181B22 auf #EFD98D 12,29:1 AAA

Aa #272F3B auf #F8F4E4 12,24:1 AAA

Aa #272F3B auf #EFD98D 9,63:1 AAA

Aa #0A0A10 auf #C5AF63 9,11:1 AAA

Aa #181B22 auf #C5AF63 7,95:1 AAA

Aa #47534E auf #F8F4E4 7,28:1 AAA

Aa #272F3B auf #C5AF63 6,22:1 AA

Aa #47534E auf #EFD98D 5,73:1 AA

Aa #0A0A10 auf #7B8046 4,72:1 AA

Aa #181B22 auf #7B8046 4,12:1 AA (großer Text)

Aa #7B8046 auf #F8F4E4 3,80:1 AA (großer Text)

Aa #47534E auf #C5AF63 3,70:1 AA (großer Text)

Aa #272F3B auf #7B8046 3,23:1 AA (großer Text)

Aa #7B8046 auf #EFD98D 2,99:1 Nicht bestanden

Aa #0A0A10 auf #47534E 2,46:1 Nicht bestanden

Aa #181B22 auf #47534E 2,15:1 Nicht bestanden

Aa #C5AF63 auf #F8F4E4 1,97:1 Nicht bestanden

Aa #7B8046 auf #C5AF63 1,93:1 Nicht bestanden

Aa #47534E auf #7B8046 1,92:1 Nicht bestanden

Aa #272F3B auf #47534E 1,68:1 Nicht bestanden

Aa #C5AF63 auf #EFD98D 1,55:1 Nicht bestanden

Aa #0A0A10 auf #272F3B 1,46:1 Nicht bestanden

Aa #181B22 auf #272F3B 1,28:1 Nicht bestanden

Aa #EFD98D auf #F8F4E4 1,27:1 Nicht bestanden

Aa #0A0A10 auf #181B22 1,15:1 Nicht bestanden

Petite 8

Petite 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen