SPOOK 12

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

Zurück zur Bibliothek

SPOOK 12

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

Bearbeiten

Erdig 12 Farben Neutral Gemischt Komplementär spooky halloween monsters creepy

Likes 188

Farben 12

CSS-Variablen

:root {
  --c-earthy-1: #FFFFFF;
  --c-earthy-2: #C1A3FF;
  --c-earthy-3: #9150E9;
  --c-earthy-4: #543593;
  --c-earthy-5: #FFDA54;
  --c-earthy-6: #CB8B4D;
  --c-earthy-7: #80BE3B;
  --c-earthy-8: #586830;
  --c-earthy-9: #FF8F47;
  --c-earthy-10: #A04732;
  --c-earthy-11: #79493E;
  --c-earthy-12: #000000;
}

Über diese Palette

Diese erdige Palette mit 12 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint White, Diva, Pericallis Hybrida, Blue Magenta Violet, Glitter Is Not Gold, Orange Nectar Bat, Jasmine Green, Deathworld Forest, Orangish, Picante, Fire Roasted und Black in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 14 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #000000 mit 21: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

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Diva #C1A3FF

RGB: rgb(193, 163, 255)
HSL: hsl(260, 100%, 82%)
Luminanz: 0,448

Pericallis Hybrida #9150E9

RGB: rgb(145, 80, 233)
HSL: hsl(265, 78%, 61%)
Luminanz: 0,176

Blue Magenta Violet #543593

RGB: rgb(84, 53, 147)
HSL: hsl(260, 47%, 39%)
Luminanz: 0,065

Glitter Is Not Gold #FFDA54

RGB: rgb(255, 218, 84)
HSL: hsl(47, 100%, 66%)
Luminanz: 0,720

Orange Nectar Bat #CB8B4D

RGB: rgb(203, 139, 77)
HSL: hsl(30, 55%, 55%)
Luminanz: 0,317

Jasmine Green #80BE3B

RGB: rgb(128, 190, 59)
HSL: hsl(88, 53%, 49%)
Luminanz: 0,417

Deathworld Forest #586830

RGB: rgb(88, 104, 48)
HSL: hsl(77, 37%, 30%)
Luminanz: 0,122

Orangish #FF8F47

RGB: rgb(255, 143, 71)
HSL: hsl(23, 100%, 64%)
Luminanz: 0,414

Picante #A04732

RGB: rgb(160, 71, 50)
HSL: hsl(11, 52%, 41%)
Luminanz: 0,122

Fire Roasted #79493E

RGB: rgb(121, 73, 62)
HSL: hsl(11, 32%, 36%)
Luminanz: 0,092

Black #000000

RGB: rgb(0, 0, 0)
HSL: hsl(0, 0%, 0%)
Luminanz: 0,000

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #000000 21,00:1 AAA

Aa #FFDA54 auf #000000 15,41:1 AAA

Aa #C1A3FF auf #000000 9,95:1 AAA

Aa #80BE3B auf #000000 9,35:1 AAA

Aa #FF8F47 auf #000000 9,27:1 AAA

Aa #FFFFFF auf #543593 9,10:1 AAA

Aa #FFFFFF auf #79493E 7,41:1 AAA

Aa #CB8B4D auf #000000 7,34:1 AAA

Aa #543593 auf #FFDA54 6,68:1 AA

Aa #FFFFFF auf #586830 6,11:1 AA

Aa #FFFFFF auf #A04732 6,10:1 AA

Aa #FFDA54 auf #79493E 5,43:1 AA

Aa #FFFFFF auf #9150E9 4,64:1 AA

Aa #9150E9 auf #000000 4,53:1 AA

Aa #FFDA54 auf #586830 4,48:1 AA (großer Text)

Aa #FFDA54 auf #A04732 4,48:1 AA (großer Text)

Aa #C1A3FF auf #543593 4,31:1 AA (großer Text)

Aa #543593 auf #80BE3B 4,05:1 AA (großer Text)

Aa #543593 auf #FF8F47 4,02:1 AA (großer Text)

Aa #C1A3FF auf #79493E 3,51:1 AA (großer Text)

Aa #586830 auf #000000 3,44:1 AA (großer Text)

Aa #A04732 auf #000000 3,44:1 AA (großer Text)

Aa #9150E9 auf #FFDA54 3,40:1 AA (großer Text)

Aa #80BE3B auf #79493E 3,30:1 AA (großer Text)

Aa #FF8F47 auf #79493E 3,27:1 AA (großer Text)

Aa #543593 auf #CB8B4D 3,18:1 AA (großer Text)

Aa #C1A3FF auf #586830 2,89:1 Nicht bestanden

Aa #C1A3FF auf #A04732 2,89:1 Nicht bestanden

Aa #FFFFFF auf #CB8B4D 2,86:1 Nicht bestanden

Aa #79493E auf #000000 2,84:1 Nicht bestanden

Aa #80BE3B auf #586830 2,72:1 Nicht bestanden

Aa #80BE3B auf #A04732 2,72:1 Nicht bestanden

Aa #586830 auf #FF8F47 2,70:1 Nicht bestanden

Aa #FF8F47 auf #A04732 2,69:1 Nicht bestanden

Aa #CB8B4D auf #79493E 2,59:1 Nicht bestanden

Aa #543593 auf #000000 2,31:1 Nicht bestanden

Aa #FFFFFF auf #FF8F47 2,26:1 Nicht bestanden

Aa #FFFFFF auf #80BE3B 2,25:1 Nicht bestanden

Aa #C1A3FF auf #9150E9 2,20:1 Nicht bestanden

Aa #CB8B4D auf #586830 2,13:1 Nicht bestanden

Aa #CB8B4D auf #A04732 2,13:1 Nicht bestanden

Aa #FFFFFF auf #C1A3FF 2,11:1 Nicht bestanden

Aa #FFDA54 auf #CB8B4D 2,10:1 Nicht bestanden

Aa #9150E9 auf #80BE3B 2,06:1 Nicht bestanden

Aa #9150E9 auf #FF8F47 2,05:1 Nicht bestanden

Aa #9150E9 auf #543593 1,96:1 Nicht bestanden

Aa #FFDA54 auf #FF8F47 1,66:1 Nicht bestanden

Aa #FFDA54 auf #80BE3B 1,65:1 Nicht bestanden

Aa #9150E9 auf #CB8B4D 1,62:1 Nicht bestanden

Aa #9150E9 auf #79493E 1,60:1 Nicht bestanden

Aa #C1A3FF auf #FFDA54 1,55:1 Nicht bestanden

Aa #543593 auf #586830 1,49:1 Nicht bestanden

Aa #543593 auf #A04732 1,49:1 Nicht bestanden

Aa #FFFFFF auf #FFDA54 1,36:1 Nicht bestanden

Aa #C1A3FF auf #CB8B4D 1,36:1 Nicht bestanden

Aa #9150E9 auf #586830 1,32:1 Nicht bestanden

Aa #9150E9 auf #A04732 1,32:1 Nicht bestanden

Aa #CB8B4D auf #80BE3B 1,27:1 Nicht bestanden

Aa #CB8B4D auf #FF8F47 1,26:1 Nicht bestanden

Aa #543593 auf #79493E 1,23:1 Nicht bestanden

Aa #586830 auf #79493E 1,21:1 Nicht bestanden

Aa #A04732 auf #79493E 1,21:1 Nicht bestanden

Aa #C1A3FF auf #FF8F47 1,07:1 Nicht bestanden

Aa #C1A3FF auf #80BE3B 1,06:1 Nicht bestanden

Aa #80BE3B auf #FF8F47 1,01:1 Nicht bestanden

Aa #586830 auf #A04732 1,00:1 Nicht bestanden

SPOOK 12

SPOOK 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen