COLORBLIND 8

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

Zurück zur Bibliothek

COLORBLIND 8

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär

Likes 23

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #900030;
  --c-vibrant-3: #0030A3;
  --c-vibrant-4: #05A300;
  --c-vibrant-5: #D300CE;
  --c-vibrant-6: #4ABEFF;
  --c-vibrant-7: #FFD217;
  --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, Macabre, International Klein Blue, Aquamentus Green, Fúchsia Intenso, Glitter Lake, Tanzanian Gold und White 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 #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

Macabre #900030

RGB: rgb(144, 0, 48)
HSL: hsl(340, 100%, 28%)
Luminanz: 0,061

International Klein Blue #0030A3

RGB: rgb(0, 48, 163)
HSL: hsl(222, 100%, 32%)
Luminanz: 0,048

Aquamentus Green #05A300

RGB: rgb(5, 163, 0)
HSL: hsl(118, 100%, 32%)
Luminanz: 0,262

Fúchsia Intenso #D300CE

RGB: rgb(211, 0, 206)
HSL: hsl(301, 100%, 41%)
Luminanz: 0,183

Glitter Lake #4ABEFF

RGB: rgb(74, 190, 255)
HSL: hsl(202, 100%, 65%)
Luminanz: 0,455

Tanzanian Gold #FFD217

RGB: rgb(255, 210, 23)
HSL: hsl(48, 100%, 55%)
Luminanz: 0,674

White #FFFFFF

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

Kontrast & Barrierefreiheit

12 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 #FFD217 14,48:1 AAA

Aa #0030A3 auf #FFFFFF 10,76:1 AAA

Aa #000000 auf #4ABEFF 10,10:1 AAA

Aa #900030 auf #FFFFFF 9,42:1 AAA

Aa #0030A3 auf #FFD217 7,42:1 AAA

Aa #900030 auf #FFD217 6,50:1 AA

Aa #000000 auf #05A300 6,25:1 AA

Aa #0030A3 auf #4ABEFF 5,18:1 AA

Aa #000000 auf #D300CE 4,66:1 AA

Aa #900030 auf #4ABEFF 4,53:1 AA

Aa #D300CE auf #FFFFFF 4,51:1 AA

Aa #05A300 auf #FFFFFF 3,36:1 AA (großer Text)

Aa #0030A3 auf #05A300 3,20:1 AA (großer Text)

Aa #D300CE auf #FFD217 3,11:1 AA (großer Text)

Aa #900030 auf #05A300 2,80:1 Nicht bestanden

Aa #0030A3 auf #D300CE 2,39:1 Nicht bestanden

Aa #05A300 auf #FFD217 2,32:1 Nicht bestanden

Aa #000000 auf #900030 2,23:1 Nicht bestanden

Aa #D300CE auf #4ABEFF 2,17:1 Nicht bestanden

Aa #900030 auf #D300CE 2,09:1 Nicht bestanden

Aa #4ABEFF auf #FFFFFF 2,08:1 Nicht bestanden

Aa #000000 auf #0030A3 1,95:1 Nicht bestanden

Aa #05A300 auf #4ABEFF 1,62:1 Nicht bestanden

Aa #FFD217 auf #FFFFFF 1,45:1 Nicht bestanden

Aa #4ABEFF auf #FFD217 1,43:1 Nicht bestanden

Aa #05A300 auf #D300CE 1,34:1 Nicht bestanden

Aa #900030 auf #0030A3 1,14:1 Nicht bestanden

COLORBLIND 8

COLORBLIND 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen