Grayfruit8

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

Zurück zur Bibliothek

Grayfruit8

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

Bearbeiten

Gedeckt 8 Farben Kühl Gemischt Komplementär green pink purple 3bit

Likes 194

Farben 8

CSS-Variablen

:root {
  --c-muted-1: #000000;
  --c-muted-2: #FFFFFF;
  --c-muted-3: #623EA2;
  --c-muted-4: #2E1F49;
  --c-muted-5: #2EFF6C;
  --c-muted-6: #1D775D;
  --c-muted-7: #E53AFF;
  --c-muted-8: #9B20B7;
}

Über diese Palette

Diese gedeckte Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, White, Poppy Pompadour, Elderberry, Synthetic Spearmint, Verdant Green, Epink und Pink Spyro 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 #000000 auf #FFFFFF mit 21:1.

Eine vielseitige Palette für Marketingseiten, Hero-Blöcke von Produkten, Illustrationen und Akzentzustände in der UI.

Farben im Detail

Black #000000

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

White #FFFFFF

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

Poppy Pompadour #623EA2

RGB: rgb(98, 62, 162)
HSL: hsl(262, 45%, 44%)
Luminanz: 0,087

Elderberry #2E1F49

RGB: rgb(46, 31, 73)
HSL: hsl(261, 40%, 20%)
Luminanz: 0,020

Synthetic Spearmint #2EFF6C

RGB: rgb(46, 255, 108)
HSL: hsl(138, 100%, 59%)
Luminanz: 0,732

Verdant Green #1D775D

RGB: rgb(29, 119, 93)
HSL: hsl(163, 61%, 29%)
Luminanz: 0,143

Epink #E53AFF

RGB: rgb(229, 58, 255)
HSL: hsl(292, 100%, 61%)
Luminanz: 0,269

Pink Spyro #9B20B7

RGB: rgb(155, 32, 183)
HSL: hsl(289, 70%, 42%)
Luminanz: 0,114

Kontrast & Barrierefreiheit

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

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

Aa #000000 auf #2EFF6C 15,64:1 AAA

Aa #FFFFFF auf #2E1F49 14,91:1 AAA

Aa #2E1F49 auf #2EFF6C 11,10:1 AAA

Aa #FFFFFF auf #623EA2 7,69:1 AAA

Aa #FFFFFF auf #9B20B7 6,39:1 AA

Aa #000000 auf #E53AFF 6,38:1 AA

Aa #623EA2 auf #2EFF6C 5,73:1 AA

Aa #FFFFFF auf #1D775D 5,46:1 AA

Aa #2EFF6C auf #9B20B7 4,76:1 AA

Aa #2E1F49 auf #E53AFF 4,53:1 AA

Aa #2EFF6C auf #1D775D 4,06:1 AA (großer Text)

Aa #000000 auf #1D775D 3,85:1 AA (großer Text)

Aa #FFFFFF auf #E53AFF 3,29:1 AA (großer Text)

Aa #000000 auf #9B20B7 3,28:1 AA (großer Text)

Aa #000000 auf #623EA2 2,73:1 Nicht bestanden

Aa #2E1F49 auf #1D775D 2,73:1 Nicht bestanden

Aa #2EFF6C auf #E53AFF 2,45:1 Nicht bestanden

Aa #623EA2 auf #E53AFF 2,34:1 Nicht bestanden

Aa #2E1F49 auf #9B20B7 2,33:1 Nicht bestanden

Aa #623EA2 auf #2E1F49 1,94:1 Nicht bestanden

Aa #E53AFF auf #9B20B7 1,94:1 Nicht bestanden

Aa #1D775D auf #E53AFF 1,66:1 Nicht bestanden

Aa #000000 auf #2E1F49 1,41:1 Nicht bestanden

Aa #623EA2 auf #1D775D 1,41:1 Nicht bestanden

Aa #FFFFFF auf #2EFF6C 1,34:1 Nicht bestanden

Aa #623EA2 auf #9B20B7 1,20:1 Nicht bestanden

Aa #1D775D auf #9B20B7 1,17:1 Nicht bestanden

Grayfruit8

Grayfruit8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen