CHLNGE8

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

Zurück zur Bibliothek

CHLNGE8

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär small challenge highsaturation

Likes 90

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #141013;
  --c-vibrant-2: #580909;
  --c-vibrant-3: #910C5C;
  --c-vibrant-4: #7C34AD;
  --c-vibrant-5: #537CDA;
  --c-vibrant-6: #27D5B2;
  --c-vibrant-7: #54F044;
  --c-vibrant-8: #EEDA28;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Spectacular Saffron (#EEDA28) bis zum dunkelsten Ton Sticky Black Tarmac (#141013). Sie vereint Sticky Black Tarmac, Vampiric Council, Cardinal Pink, Purple Pristine, Serenity’s Reign, Wild Caribbean Green, Goblin Warboss und Spectacular Saffron 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 #141013 auf #EEDA28 mit 13,2:1.

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

Farben im Detail

Sticky Black Tarmac #141013

RGB: rgb(20, 16, 19)
HSL: hsl(315, 11%, 7%)
Luminanz: 0,006

Vampiric Council #580909

RGB: rgb(88, 9, 9)
HSL: hsl(0, 81%, 19%)
Luminanz: 0,023

Cardinal Pink #910C5C

RGB: rgb(145, 12, 92)
HSL: hsl(324, 85%, 31%)
Luminanz: 0,071

Purple Pristine #7C34AD

RGB: rgb(124, 52, 173)
HSL: hsl(276, 54%, 44%)
Luminanz: 0,098

Serenity’s Reign #537CDA

RGB: rgb(83, 124, 218)
HSL: hsl(222, 65%, 59%)
Luminanz: 0,213

Wild Caribbean Green #27D5B2

RGB: rgb(39, 213, 178)
HSL: hsl(168, 69%, 49%)
Luminanz: 0,512

Goblin Warboss #54F044

RGB: rgb(84, 240, 68)
HSL: hsl(114, 85%, 60%)
Luminanz: 0,646

Spectacular Saffron #EEDA28

RGB: rgb(238, 218, 40)
HSL: hsl(54, 85%, 55%)
Luminanz: 0,685

Kontrast & Barrierefreiheit

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

Aa #141013 auf #EEDA28 13,20:1 AAA

Aa #141013 auf #54F044 12,51:1 AAA

Aa #141013 auf #27D5B2 10,10:1 AAA

Aa #580909 auf #EEDA28 10,08:1 AAA

Aa #580909 auf #54F044 9,55:1 AAA

Aa #580909 auf #27D5B2 7,71:1 AAA

Aa #910C5C auf #EEDA28 6,09:1 AA

Aa #910C5C auf #54F044 5,78:1 AA

Aa #7C34AD auf #EEDA28 4,98:1 AA

Aa #141013 auf #537CDA 4,73:1 AA

Aa #7C34AD auf #54F044 4,72:1 AA

Aa #910C5C auf #27D5B2 4,66:1 AA

Aa #7C34AD auf #27D5B2 3,81:1 AA (großer Text)

Aa #580909 auf #537CDA 3,61:1 AA (großer Text)

Aa #537CDA auf #EEDA28 2,79:1 Nicht bestanden

Aa #141013 auf #7C34AD 2,65:1 Nicht bestanden

Aa #537CDA auf #54F044 2,65:1 Nicht bestanden

Aa #910C5C auf #537CDA 2,18:1 Nicht bestanden

Aa #141013 auf #910C5C 2,17:1 Nicht bestanden

Aa #537CDA auf #27D5B2 2,14:1 Nicht bestanden

Aa #580909 auf #7C34AD 2,02:1 Nicht bestanden

Aa #7C34AD auf #537CDA 1,78:1 Nicht bestanden

Aa #580909 auf #910C5C 1,65:1 Nicht bestanden

Aa #141013 auf #580909 1,31:1 Nicht bestanden

Aa #27D5B2 auf #EEDA28 1,31:1 Nicht bestanden

Aa #27D5B2 auf #54F044 1,24:1 Nicht bestanden

Aa #910C5C auf #7C34AD 1,22:1 Nicht bestanden

Aa #54F044 auf #EEDA28 1,06:1 Nicht bestanden

CHLNGE8

CHLNGE8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen