Popcorn 12

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

Zurück zur Bibliothek

Popcorn 12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär

Likes 12

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #0E1012;
  --c-vibrant-2: #654E78;
  --c-vibrant-3: #7A73FF;
  --c-vibrant-4: #FFDBAB;
  --c-vibrant-5: #A33665;
  --c-vibrant-6: #FF524C;
  --c-vibrant-7: #FF8CD7;
  --c-vibrant-8: #539C81;
  --c-vibrant-9: #4CFF79;
  --c-vibrant-10: #F7A359;
  --c-vibrant-11: #FFED78;
  --c-vibrant-12: #FFF9D6;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Wild Apple (#FFF9D6) bis zum dunkelsten Ton Ruined Smores (#0E1012). Sie vereint Ruined Smores, Imperial Palace, Stargate Shimmer, Peach Glow, Valentine’s Day, Red Orange Juice, Pink Delight, Wintergreen Shadow, Experimintal Green, Ginger Milk, Golden Aurelia und Wild Apple in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 17 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #0E1012 auf #FFF9D6 mit 17,95:1.

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

Farben im Detail

Ruined Smores #0E1012

RGB: rgb(14, 16, 18)
HSL: hsl(210, 13%, 6%)
Luminanz: 0,005

Imperial Palace #654E78

RGB: rgb(101, 78, 120)
HSL: hsl(273, 21%, 39%)
Luminanz: 0,096

Stargate Shimmer #7A73FF

RGB: rgb(122, 115, 255)
HSL: hsl(243, 100%, 73%)
Luminanz: 0,236

Peach Glow #FFDBAB

RGB: rgb(255, 219, 171)
HSL: hsl(34, 100%, 84%)
Luminanz: 0,749

Valentine’s Day #A33665

RGB: rgb(163, 54, 101)
HSL: hsl(334, 50%, 43%)
Luminanz: 0,114

Red Orange Juice #FF524C

RGB: rgb(255, 82, 76)
HSL: hsl(2, 100%, 65%)
Luminanz: 0,278

Pink Delight #FF8CD7

RGB: rgb(255, 140, 215)
HSL: hsl(321, 100%, 77%)
Luminanz: 0,449

Wintergreen Shadow #539C81

RGB: rgb(83, 156, 129)
HSL: hsl(158, 31%, 47%)
Luminanz: 0,272

Experimintal Green #4CFF79

RGB: rgb(76, 255, 121)
HSL: hsl(135, 100%, 65%)
Luminanz: 0,744

Ginger Milk #F7A359

RGB: rgb(247, 163, 89)
HSL: hsl(28, 91%, 66%)
Luminanz: 0,467

Golden Aurelia #FFED78

RGB: rgb(255, 237, 120)
HSL: hsl(52, 100%, 74%)
Luminanz: 0,832

Wild Apple #FFF9D6

RGB: rgb(255, 249, 214)
HSL: hsl(51, 100%, 92%)
Luminanz: 0,939

Kontrast & Barrierefreiheit

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

Aa #0E1012 auf #FFF9D6 17,95:1 AAA

Aa #0E1012 auf #FFED78 16,01:1 AAA

Aa #0E1012 auf #FFDBAB 14,50:1 AAA

Aa #0E1012 auf #4CFF79 14,42:1 AAA

Aa #0E1012 auf #F7A359 9,39:1 AAA

Aa #0E1012 auf #FF8CD7 9,06:1 AAA

Aa #654E78 auf #FFF9D6 6,78:1 AA

Aa #654E78 auf #FFED78 6,05:1 AA

Aa #A33665 auf #FFF9D6 6,04:1 AA

Aa #0E1012 auf #FF524C 5,96:1 AA

Aa #0E1012 auf #539C81 5,85:1 AA

Aa #654E78 auf #FFDBAB 5,48:1 AA

Aa #654E78 auf #4CFF79 5,45:1 AA

Aa #A33665 auf #FFED78 5,39:1 AA

Aa #0E1012 auf #7A73FF 5,20:1 AA

Aa #FFDBAB auf #A33665 4,88:1 AA

Aa #A33665 auf #4CFF79 4,85:1 AA

Aa #654E78 auf #F7A359 3,55:1 AA (großer Text)

Aa #7A73FF auf #FFF9D6 3,45:1 AA (großer Text)

Aa #654E78 auf #FF8CD7 3,43:1 AA (großer Text)

Aa #A33665 auf #F7A359 3,16:1 AA (großer Text)

Aa #7A73FF auf #FFED78 3,08:1 AA (großer Text)

Aa #539C81 auf #FFF9D6 3,07:1 AA (großer Text)

Aa #A33665 auf #FF8CD7 3,05:1 AA (großer Text)

Aa #FF524C auf #FFF9D6 3,01:1 AA (großer Text)

Aa #0E1012 auf #A33665 2,97:1 Nicht bestanden

Aa #7A73FF auf #FFDBAB 2,79:1 Nicht bestanden

Aa #7A73FF auf #4CFF79 2,78:1 Nicht bestanden

Aa #539C81 auf #FFED78 2,74:1 Nicht bestanden

Aa #FF524C auf #FFED78 2,69:1 Nicht bestanden

Aa #0E1012 auf #654E78 2,65:1 Nicht bestanden

Aa #FFDBAB auf #539C81 2,48:1 Nicht bestanden

Aa #539C81 auf #4CFF79 2,47:1 Nicht bestanden

Aa #FFDBAB auf #FF524C 2,43:1 Nicht bestanden

Aa #FF524C auf #4CFF79 2,42:1 Nicht bestanden

Aa #654E78 auf #FF524C 2,25:1 Nicht bestanden

Aa #654E78 auf #539C81 2,21:1 Nicht bestanden

Aa #A33665 auf #FF524C 2,01:1 Nicht bestanden

Aa #FF8CD7 auf #FFF9D6 1,98:1 Nicht bestanden

Aa #A33665 auf #539C81 1,97:1 Nicht bestanden

Aa #654E78 auf #7A73FF 1,96:1 Nicht bestanden

Aa #F7A359 auf #FFF9D6 1,91:1 Nicht bestanden

Aa #7A73FF auf #F7A359 1,81:1 Nicht bestanden

Aa #FF8CD7 auf #FFED78 1,77:1 Nicht bestanden

Aa #7A73FF auf #A33665 1,75:1 Nicht bestanden

Aa #7A73FF auf #FF8CD7 1,74:1 Nicht bestanden

Aa #F7A359 auf #FFED78 1,71:1 Nicht bestanden

Aa #539C81 auf #F7A359 1,61:1 Nicht bestanden

Aa #FFDBAB auf #FF8CD7 1,60:1 Nicht bestanden

Aa #FF8CD7 auf #4CFF79 1,59:1 Nicht bestanden

Aa #FF524C auf #F7A359 1,58:1 Nicht bestanden

Aa #FFDBAB auf #F7A359 1,55:1 Nicht bestanden

Aa #FF8CD7 auf #539C81 1,55:1 Nicht bestanden

Aa #4CFF79 auf #F7A359 1,54:1 Nicht bestanden

Aa #FF524C auf #FF8CD7 1,52:1 Nicht bestanden

Aa #FFDBAB auf #FFF9D6 1,24:1 Nicht bestanden

Aa #4CFF79 auf #FFF9D6 1,24:1 Nicht bestanden

Aa #7A73FF auf #FF524C 1,15:1 Nicht bestanden

Aa #7A73FF auf #539C81 1,13:1 Nicht bestanden

Aa #654E78 auf #A33665 1,12:1 Nicht bestanden

Aa #FFED78 auf #FFF9D6 1,12:1 Nicht bestanden

Aa #4CFF79 auf #FFED78 1,11:1 Nicht bestanden

Aa #FFDBAB auf #FFED78 1,10:1 Nicht bestanden

Aa #FF8CD7 auf #F7A359 1,04:1 Nicht bestanden

Aa #FF524C auf #539C81 1,02:1 Nicht bestanden

Aa #FFDBAB auf #4CFF79 1,01:1 Nicht bestanden

Popcorn 12

Popcorn 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen