Messy 12

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

Zurück zur Bibliothek

Messy 12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär

Likes 11

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #FF1AB2;
  --c-vibrant-2: #FF2424;
  --c-vibrant-3: #FB7F09;
  --c-vibrant-4: #FDFF76;
  --c-vibrant-5: #5EF74C;
  --c-vibrant-6: #097A39;
  --c-vibrant-7: #08FFA8;
  --c-vibrant-8: #5756AC;
  --c-vibrant-9: #470078;
  --c-vibrant-10: #200922;
  --c-vibrant-11: #526067;
  --c-vibrant-12: #EBEED7;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Hive (#FDFF76) bis zum dunkelsten Ton Meški Black (#200922). Sie vereint Spicy Pink, Red Stop, Pumpkin Orange, Hive, Biopunk, Jordan Jazz, Yíng Guāng Sè Green, Brandywine Raspberry, Invasive Indigo, Meški Black, Gunmetal und Alligator Egg in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 21 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FDFF76 auf #200922 mit 17,57:1.

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

Farben im Detail

Spicy Pink #FF1AB2

RGB: rgb(255, 26, 178)
HSL: hsl(320, 100%, 55%)
Luminanz: 0,252

Red Stop #FF2424

RGB: rgb(255, 36, 36)
HSL: hsl(0, 100%, 57%)
Luminanz: 0,227

Pumpkin Orange #FB7F09

RGB: rgb(251, 127, 9)
HSL: hsl(29, 97%, 51%)
Luminanz: 0,357

Hive #FDFF76

RGB: rgb(253, 255, 118)
HSL: hsl(61, 100%, 73%)
Luminanz: 0,937

Biopunk #5EF74C

RGB: rgb(94, 247, 76)
HSL: hsl(114, 91%, 63%)
Luminanz: 0,694

Jordan Jazz #097A39

RGB: rgb(9, 122, 57)
HSL: hsl(145, 86%, 26%)
Luminanz: 0,143

Yíng Guāng Sè Green #08FFA8

RGB: rgb(8, 255, 168)
HSL: hsl(159, 100%, 52%)
Luminanz: 0,744

Brandywine Raspberry #5756AC

RGB: rgb(87, 86, 172)
HSL: hsl(241, 34%, 51%)
Luminanz: 0,117

Invasive Indigo #470078

RGB: rgb(71, 0, 120)
HSL: hsl(276, 100%, 24%)
Luminanz: 0,027

Meški Black #200922

RGB: rgb(32, 9, 34)
HSL: hsl(295, 58%, 8%)
Luminanz: 0,006

Gunmetal #526067

RGB: rgb(82, 96, 103)
HSL: hsl(200, 11%, 36%)
Luminanz: 0,111

Alligator Egg #EBEED7

RGB: rgb(235, 238, 215)
HSL: hsl(68, 40%, 89%)
Luminanz: 0,837

Kontrast & Barrierefreiheit

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

Aa #FDFF76 auf #200922 17,57:1 AAA

Aa #200922 auf #EBEED7 15,79:1 AAA

Aa #08FFA8 auf #200922 14,13:1 AAA

Aa #5EF74C auf #200922 13,25:1 AAA

Aa #FDFF76 auf #470078 12,83:1 AAA

Aa #470078 auf #EBEED7 11,53:1 AAA

Aa #08FFA8 auf #470078 10,32:1 AAA

Aa #5EF74C auf #470078 9,67:1 AAA

Aa #FB7F09 auf #200922 7,25:1 AAA

Aa #FDFF76 auf #526067 6,12:1 AA

Aa #FDFF76 auf #5756AC 5,92:1 AA

Aa #526067 auf #EBEED7 5,50:1 AA

Aa #FF1AB2 auf #200922 5,38:1 AA

Aa #5756AC auf #EBEED7 5,33:1 AA

Aa #FB7F09 auf #470078 5,29:1 AA

Aa #FDFF76 auf #097A39 5,12:1 AA

Aa #FF2424 auf #200922 4,92:1 AA

Aa #08FFA8 auf #526067 4,92:1 AA

Aa #08FFA8 auf #5756AC 4,77:1 AA

Aa #5EF74C auf #526067 4,61:1 AA

Aa #097A39 auf #EBEED7 4,60:1 AA

Aa #5EF74C auf #5756AC 4,47:1 AA (großer Text)

Aa #097A39 auf #08FFA8 4,12:1 AA (großer Text)

Aa #FF1AB2 auf #470078 3,93:1 AA (großer Text)

Aa #5EF74C auf #097A39 3,86:1 AA (großer Text)

Aa #FF2424 auf #470078 3,59:1 AA (großer Text)

Aa #FF2424 auf #FDFF76 3,57:1 AA (großer Text)

Aa #097A39 auf #200922 3,43:1 AA (großer Text)

Aa #FF1AB2 auf #FDFF76 3,27:1 AA (großer Text)

Aa #FF2424 auf #EBEED7 3,21:1 AA (großer Text)

Aa #5756AC auf #200922 2,97:1 Nicht bestanden

Aa #FF1AB2 auf #EBEED7 2,94:1 Nicht bestanden

Aa #FF2424 auf #08FFA8 2,87:1 Nicht bestanden

Aa #200922 auf #526067 2,87:1 Nicht bestanden

Aa #FF2424 auf #5EF74C 2,69:1 Nicht bestanden

Aa #FF1AB2 auf #08FFA8 2,63:1 Nicht bestanden

Aa #FB7F09 auf #526067 2,52:1 Nicht bestanden

Aa #097A39 auf #470078 2,50:1 Nicht bestanden

Aa #FF1AB2 auf #5EF74C 2,46:1 Nicht bestanden

Aa #FB7F09 auf #5756AC 2,44:1 Nicht bestanden

Aa #FB7F09 auf #FDFF76 2,42:1 Nicht bestanden

Aa #FB7F09 auf #EBEED7 2,18:1 Nicht bestanden

Aa #5756AC auf #470078 2,16:1 Nicht bestanden

Aa #FB7F09 auf #097A39 2,11:1 Nicht bestanden

Aa #470078 auf #526067 2,10:1 Nicht bestanden

Aa #FB7F09 auf #08FFA8 1,95:1 Nicht bestanden

Aa #FF1AB2 auf #526067 1,87:1 Nicht bestanden

Aa #FB7F09 auf #5EF74C 1,83:1 Nicht bestanden

Aa #FF1AB2 auf #5756AC 1,81:1 Nicht bestanden

Aa #FF2424 auf #526067 1,71:1 Nicht bestanden

Aa #FF2424 auf #5756AC 1,66:1 Nicht bestanden

Aa #FF1AB2 auf #097A39 1,57:1 Nicht bestanden

Aa #FF2424 auf #FB7F09 1,47:1 Nicht bestanden

Aa #FF2424 auf #097A39 1,43:1 Nicht bestanden

Aa #470078 auf #200922 1,37:1 Nicht bestanden

Aa #FF1AB2 auf #FB7F09 1,35:1 Nicht bestanden

Aa #FDFF76 auf #5EF74C 1,33:1 Nicht bestanden

Aa #FDFF76 auf #08FFA8 1,24:1 Nicht bestanden

Aa #5EF74C auf #EBEED7 1,19:1 Nicht bestanden

Aa #097A39 auf #526067 1,19:1 Nicht bestanden

Aa #097A39 auf #5756AC 1,16:1 Nicht bestanden

Aa #08FFA8 auf #EBEED7 1,12:1 Nicht bestanden

Aa #FDFF76 auf #EBEED7 1,11:1 Nicht bestanden

Aa #FF1AB2 auf #FF2424 1,09:1 Nicht bestanden

Aa #5EF74C auf #08FFA8 1,07:1 Nicht bestanden

Aa #5756AC auf #526067 1,03:1 Nicht bestanden

Messy 12

Messy 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen