SPAZBOL 8

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

Zurück zur Bibliothek

SPAZBOL 8

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär vibrant limited bright

Likes 18

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #000000;
  --c-vibrant-2: #51007C;
  --c-vibrant-3: #5073D3;
  --c-vibrant-4: #8FD350;
  --c-vibrant-5: #FFF600;
  --c-vibrant-6: #FFFFFF;
  --c-vibrant-7: #ED8F0B;
  --c-vibrant-8: #CC2718;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black (#000000). Sie vereint Black, Pigment Indigo, Cornflower, Fairy Tale Green, Cadmium Yellow, White, Elden Ring Orange und Clear Red 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

Pigment Indigo #51007C

RGB: rgb(81, 0, 124)
HSL: hsl(279, 100%, 24%)
Luminanz: 0,032

Cornflower #5073D3

RGB: rgb(80, 115, 211)
HSL: hsl(224, 60%, 57%)
Luminanz: 0,187

Fairy Tale Green #8FD350

RGB: rgb(143, 211, 80)
HSL: hsl(91, 60%, 57%)
Luminanz: 0,530

Cadmium Yellow #FFF600

RGB: rgb(255, 246, 0)
HSL: hsl(58, 100%, 50%)
Luminanz: 0,872

White #FFFFFF

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

Elden Ring Orange #ED8F0B

RGB: rgb(237, 143, 11)
HSL: hsl(35, 91%, 49%)
Luminanz: 0,377

Clear Red #CC2718

RGB: rgb(204, 39, 24)
HSL: hsl(5, 79%, 45%)
Luminanz: 0,144

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 #FFF600 18,43:1 AAA

Aa #51007C auf #FFFFFF 12,80:1 AAA

Aa #000000 auf #8FD350 11,60:1 AAA

Aa #51007C auf #FFF600 11,23:1 AAA

Aa #000000 auf #ED8F0B 8,53:1 AAA

Aa #51007C auf #8FD350 7,07:1 AAA

Aa #FFFFFF auf #CC2718 5,43:1 AA

Aa #51007C auf #ED8F0B 5,20:1 AA

Aa #FFF600 auf #CC2718 4,76:1 AA

Aa #000000 auf #5073D3 4,73:1 AA

Aa #5073D3 auf #FFFFFF 4,44:1 AA (großer Text)

Aa #5073D3 auf #FFF600 3,89:1 AA (großer Text)

Aa #000000 auf #CC2718 3,87:1 AA (großer Text)

Aa #8FD350 auf #CC2718 3,00:1 AA (großer Text)

Aa #51007C auf #5073D3 2,88:1 Nicht bestanden

Aa #FFFFFF auf #ED8F0B 2,46:1 Nicht bestanden

Aa #5073D3 auf #8FD350 2,45:1 Nicht bestanden

Aa #51007C auf #CC2718 2,36:1 Nicht bestanden

Aa #ED8F0B auf #CC2718 2,20:1 Nicht bestanden

Aa #FFF600 auf #ED8F0B 2,16:1 Nicht bestanden

Aa #8FD350 auf #FFFFFF 1,81:1 Nicht bestanden

Aa #5073D3 auf #ED8F0B 1,80:1 Nicht bestanden

Aa #000000 auf #51007C 1,64:1 Nicht bestanden

Aa #8FD350 auf #FFF600 1,59:1 Nicht bestanden

Aa #8FD350 auf #ED8F0B 1,36:1 Nicht bestanden

Aa #5073D3 auf #CC2718 1,22:1 Nicht bestanden

Aa #FFF600 auf #FFFFFF 1,14:1 Nicht bestanden

SPAZBOL 8

SPAZBOL 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen