Awkward 8

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

Zurück zur Bibliothek

Awkward 8

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

Bearbeiten

Lebendig 8 Farben Neutral Gemischt Komplementär vibrant limited colorful bright

Likes 35

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #5CA8C2;
  --c-vibrant-2: #055D31;
  --c-vibrant-3: #86D86A;
  --c-vibrant-4: #FDFDF0;
  --c-vibrant-5: #FAA3CE;
  --c-vibrant-6: #A4573D;
  --c-vibrant-7: #02020F;
  --c-vibrant-8: #7A2796;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Granulated Sugar (#FDFDF0) bis zum dunkelsten Ton Benthic Black (#02020F). Sie vereint Blue Mist, Ficus Elastica, Green Lacewing, Granulated Sugar, Taffy Pink, Pennywise, Benthic Black und Orb of Discord in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FDFDF0 auf #02020F mit 20,12:1.

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

Farben im Detail

Blue Mist #5CA8C2

RGB: rgb(92, 168, 194)
HSL: hsl(195, 46%, 56%)
Luminanz: 0,342

Ficus Elastica #055D31

RGB: rgb(5, 93, 49)
HSL: hsl(150, 90%, 19%)
Luminanz: 0,081

Green Lacewing #86D86A

RGB: rgb(134, 216, 106)
HSL: hsl(105, 59%, 63%)
Luminanz: 0,552

Granulated Sugar #FDFDF0

RGB: rgb(253, 253, 240)
HSL: hsl(60, 76%, 97%)
Luminanz: 0,974

Taffy Pink #FAA3CE

RGB: rgb(250, 163, 206)
HSL: hsl(330, 90%, 81%)
Luminanz: 0,510

Pennywise #A4573D

RGB: rgb(164, 87, 61)
HSL: hsl(15, 46%, 44%)
Luminanz: 0,151

Benthic Black #02020F

RGB: rgb(2, 2, 15)
HSL: hsl(240, 76%, 3%)
Luminanz: 0,001

Orb of Discord #7A2796

RGB: rgb(122, 39, 150)
HSL: hsl(285, 59%, 37%)
Luminanz: 0,078

Kontrast & Barrierefreiheit

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

Aa #FDFDF0 auf #02020F 20,12:1 AAA

Aa #86D86A auf #02020F 11,83:1 AAA

Aa #FAA3CE auf #02020F 11,00:1 AAA

Aa #FDFDF0 auf #7A2796 8,01:1 AAA

Aa #055D31 auf #FDFDF0 7,83:1 AAA

Aa #5CA8C2 auf #02020F 7,70:1 AAA

Aa #FDFDF0 auf #A4573D 5,11:1 AA

Aa #86D86A auf #7A2796 4,71:1 AA

Aa #055D31 auf #86D86A 4,60:1 AA

Aa #FAA3CE auf #7A2796 4,38:1 AA (großer Text)

Aa #055D31 auf #FAA3CE 4,28:1 AA (großer Text)

Aa #A4573D auf #02020F 3,94:1 AA (großer Text)

Aa #5CA8C2 auf #7A2796 3,06:1 AA (großer Text)

Aa #86D86A auf #A4573D 3,00:1 AA (großer Text)

Aa #5CA8C2 auf #055D31 2,99:1 Nicht bestanden

Aa #FAA3CE auf #A4573D 2,79:1 Nicht bestanden

Aa #5CA8C2 auf #FDFDF0 2,61:1 Nicht bestanden

Aa #055D31 auf #02020F 2,57:1 Nicht bestanden

Aa #02020F auf #7A2796 2,51:1 Nicht bestanden

Aa #5CA8C2 auf #A4573D 1,95:1 Nicht bestanden

Aa #FDFDF0 auf #FAA3CE 1,83:1 Nicht bestanden

Aa #86D86A auf #FDFDF0 1,70:1 Nicht bestanden

Aa #A4573D auf #7A2796 1,57:1 Nicht bestanden

Aa #5CA8C2 auf #86D86A 1,54:1 Nicht bestanden

Aa #055D31 auf #A4573D 1,53:1 Nicht bestanden

Aa #5CA8C2 auf #FAA3CE 1,43:1 Nicht bestanden

Aa #86D86A auf #FAA3CE 1,08:1 Nicht bestanden

Aa #055D31 auf #7A2796 1,02:1 Nicht bestanden

Awkward 8

Awkward 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen