Easy8

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

Zurück zur Bibliothek

Easy8

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

Bearbeiten

Lebendig 8 Farben Neutral Gemischt Komplementär

Likes 13

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #FF0055;
  --c-vibrant-3: #FFAA00;
  --c-vibrant-4: #CCFF00;
  --c-vibrant-5: #00FFAA;
  --c-vibrant-6: #0055FF;
  --c-vibrant-7: #AA00FF;
  --c-vibrant-8: #FFFFFF;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Red Light Neon, Flash of Orange, Electric Lime, Enthusiasm, Nīlā Blue, Digital Violets und White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 8 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

Red Light Neon #FF0055

RGB: rgb(255, 0, 85)
HSL: hsl(340, 100%, 50%)
Luminanz: 0,219

Flash of Orange #FFAA00

RGB: rgb(255, 170, 0)
HSL: hsl(40, 100%, 50%)
Luminanz: 0,500

Electric Lime #CCFF00

RGB: rgb(204, 255, 0)
HSL: hsl(72, 100%, 50%)
Luminanz: 0,844

Enthusiasm #00FFAA

RGB: rgb(0, 255, 170)
HSL: hsl(160, 100%, 50%)
Luminanz: 0,744

Nīlā Blue #0055FF

RGB: rgb(0, 85, 255)
HSL: hsl(220, 100%, 50%)
Luminanz: 0,137

Digital Violets #AA00FF

RGB: rgb(170, 0, 255)
HSL: hsl(280, 100%, 50%)
Luminanz: 0,158

White #FFFFFF

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

Kontrast & Barrierefreiheit

8 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 #CCFF00 17,87:1 AAA

Aa #000000 auf #00FFAA 15,88:1 AAA

Aa #000000 auf #FFAA00 11,00:1 AAA

Aa #0055FF auf #FFFFFF 5,61:1 AA

Aa #000000 auf #FF0055 5,38:1 AA

Aa #AA00FF auf #FFFFFF 5,06:1 AA

Aa #CCFF00 auf #0055FF 4,77:1 AA

Aa #CCFF00 auf #AA00FF 4,30:1 AA (großer Text)

Aa #00FFAA auf #0055FF 4,24:1 AA (großer Text)

Aa #000000 auf #AA00FF 4,15:1 AA (großer Text)

Aa #FF0055 auf #FFFFFF 3,90:1 AA (großer Text)

Aa #00FFAA auf #AA00FF 3,82:1 AA (großer Text)

Aa #000000 auf #0055FF 3,74:1 AA (großer Text)

Aa #FF0055 auf #CCFF00 3,32:1 AA (großer Text)

Aa #FF0055 auf #00FFAA 2,95:1 Nicht bestanden

Aa #FFAA00 auf #0055FF 2,94:1 Nicht bestanden

Aa #FFAA00 auf #AA00FF 2,65:1 Nicht bestanden

Aa #FF0055 auf #FFAA00 2,04:1 Nicht bestanden

Aa #FFAA00 auf #FFFFFF 1,91:1 Nicht bestanden

Aa #FFAA00 auf #CCFF00 1,62:1 Nicht bestanden

Aa #FF0055 auf #0055FF 1,44:1 Nicht bestanden

Aa #FFAA00 auf #00FFAA 1,44:1 Nicht bestanden

Aa #00FFAA auf #FFFFFF 1,32:1 Nicht bestanden

Aa #FF0055 auf #AA00FF 1,30:1 Nicht bestanden

Aa #CCFF00 auf #FFFFFF 1,18:1 Nicht bestanden

Aa #CCFF00 auf #00FFAA 1,13:1 Nicht bestanden

Aa #0055FF auf #AA00FF 1,11:1 Nicht bestanden

Easy8

Easy8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen