Berry Shake

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

Zurück zur Bibliothek

Berry Shake

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär vibrant gameboy neon 8

Likes 45

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFFFFF;
  --c-vibrant-2: #2E2E49;
  --c-vibrant-3: #B200FF;
  --c-vibrant-4: #53355E;
  --c-vibrant-5: #FF156B;
  --c-vibrant-6: #A30054;
  --c-vibrant-7: #62FF89;
  --c-vibrant-8: #227F5E;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Black Blueberry (#2E2E49). Sie vereint White, Black Blueberry, Poison Purple Paradise, Purpurite Violet, Burning Fireflies, Violet Red, Thallium Flame und Metallic Green 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 #FFFFFF auf #2E2E49 mit 13,1:1.

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

Farben im Detail

White #FFFFFF

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

Black Blueberry #2E2E49

RGB: rgb(46, 46, 73)
HSL: hsl(240, 23%, 23%)
Luminanz: 0,030

Poison Purple Paradise #B200FF

RGB: rgb(178, 0, 255)
HSL: hsl(282, 100%, 50%)
Luminanz: 0,167

Purpurite Violet #53355E

RGB: rgb(83, 53, 94)
HSL: hsl(284, 28%, 29%)
Luminanz: 0,052

Burning Fireflies #FF156B

RGB: rgb(255, 21, 107)
HSL: hsl(338, 100%, 54%)
Luminanz: 0,229

Violet Red #A30054

RGB: rgb(163, 0, 84)
HSL: hsl(329, 100%, 32%)
Luminanz: 0,084

Thallium Flame #62FF89

RGB: rgb(98, 255, 137)
HSL: hsl(135, 100%, 69%)
Luminanz: 0,759

Metallic Green #227F5E

RGB: rgb(34, 127, 94)
HSL: hsl(159, 58%, 32%)
Luminanz: 0,163

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #2E2E49 13,10:1 AAA

Aa #FFFFFF auf #53355E 10,30:1 AAA

Aa #2E2E49 auf #62FF89 10,10:1 AAA

Aa #53355E auf #62FF89 7,94:1 AAA

Aa #FFFFFF auf #A30054 7,82:1 AAA

Aa #A30054 auf #62FF89 6,03:1 AA

Aa #FFFFFF auf #227F5E 4,92:1 AA

Aa #FFFFFF auf #B200FF 4,84:1 AA

Aa #62FF89 auf #227F5E 3,79:1 AA (großer Text)

Aa #FFFFFF auf #FF156B 3,77:1 AA (großer Text)

Aa #B200FF auf #62FF89 3,73:1 AA (großer Text)

Aa #2E2E49 auf #FF156B 3,48:1 AA (großer Text)

Aa #FF156B auf #62FF89 2,90:1 Nicht bestanden

Aa #53355E auf #FF156B 2,73:1 Nicht bestanden

Aa #2E2E49 auf #B200FF 2,71:1 Nicht bestanden

Aa #2E2E49 auf #227F5E 2,66:1 Nicht bestanden

Aa #B200FF auf #53355E 2,13:1 Nicht bestanden

Aa #53355E auf #227F5E 2,09:1 Nicht bestanden

Aa #FF156B auf #A30054 2,07:1 Nicht bestanden

Aa #2E2E49 auf #A30054 1,68:1 Nicht bestanden

Aa #B200FF auf #A30054 1,62:1 Nicht bestanden

Aa #A30054 auf #227F5E 1,59:1 Nicht bestanden

Aa #53355E auf #A30054 1,32:1 Nicht bestanden

Aa #FF156B auf #227F5E 1,31:1 Nicht bestanden

Aa #FFFFFF auf #62FF89 1,30:1 Nicht bestanden

Aa #B200FF auf #FF156B 1,28:1 Nicht bestanden

Aa #2E2E49 auf #53355E 1,27:1 Nicht bestanden

Aa #B200FF auf #227F5E 1,02:1 Nicht bestanden

Berry Shake

Berry Shake

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen