RAINBOWPOP12

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

Zurück zur Bibliothek

RAINBOWPOP12

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

Bearbeiten

Lebendig 12 Farben Neutral Gemischt Komplementär bright candy rainbow sweet

Likes 18

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #BF0F44;
  --c-vibrant-2: #E0690D;
  --c-vibrant-3: #F2F20A;
  --c-vibrant-4: #FDFFE0;
  --c-vibrant-5: #8BE615;
  --c-vibrant-6: #08BD59;
  --c-vibrant-7: #00D1D1;
  --c-vibrant-8: #0075CF;
  --c-vibrant-9: #3C1FAD;
  --c-vibrant-10: #310340;
  --c-vibrant-11: #8B2299;
  --c-vibrant-12: #D44696;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Ceramite White (#FDFFE0) bis zum dunkelsten Ton Dark Violet (#310340). Sie vereint Red Jalapeño, Tiger Moth Orange, Huáng Sè Yellow, Ceramite White, Poisonous Pistachio, Pistou Green, Jade Glass, Wizard Blue, Indigo Blue, Dark Violet, Passionate Purple und Kirby in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 16 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FDFFE0 auf #310340 mit 16,88:1.

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

Farben im Detail

Red Jalapeño #BF0F44

RGB: rgb(191, 15, 68)
HSL: hsl(342, 85%, 40%)
Luminanz: 0,118

Tiger Moth Orange #E0690D

RGB: rgb(224, 105, 13)
HSL: hsl(26, 89%, 46%)
Luminanz: 0,260

Huáng Sè Yellow #F2F20A

RGB: rgb(242, 242, 10)
HSL: hsl(60, 92%, 49%)
Luminanz: 0,824

Ceramite White #FDFFE0

RGB: rgb(253, 255, 224)
HSL: hsl(64, 100%, 94%)
Luminanz: 0,978

Poisonous Pistachio #8BE615

RGB: rgb(139, 230, 21)
HSL: hsl(86, 83%, 49%)
Luminanz: 0,621

Pistou Green #08BD59

RGB: rgb(8, 189, 89)
HSL: hsl(147, 92%, 39%)
Luminanz: 0,372

Jade Glass #00D1D1

RGB: rgb(0, 209, 209)
HSL: hsl(180, 100%, 41%)
Luminanz: 0,502

Wizard Blue #0075CF

RGB: rgb(0, 117, 207)
HSL: hsl(206, 100%, 41%)
Luminanz: 0,172

Indigo Blue #3C1FAD

RGB: rgb(60, 31, 173)
HSL: hsl(252, 70%, 40%)
Luminanz: 0,050

Dark Violet #310340

RGB: rgb(49, 3, 64)
HSL: hsl(285, 91%, 13%)
Luminanz: 0,011

Passionate Purple #8B2299

RGB: rgb(139, 34, 153)
HSL: hsl(293, 64%, 37%)
Luminanz: 0,089

Kirby #D44696

RGB: rgb(212, 70, 150)
HSL: hsl(326, 62%, 55%)
Luminanz: 0,206

Kontrast & Barrierefreiheit

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

Aa #FDFFE0 auf #310340 16,88:1 AAA

Aa #F2F20A auf #310340 14,36:1 AAA

Aa #8BE615 auf #310340 11,03:1 AAA

Aa #FDFFE0 auf #3C1FAD 10,32:1 AAA

Aa #00D1D1 auf #310340 9,07:1 AAA

Aa #F2F20A auf #3C1FAD 8,78:1 AAA

Aa #FDFFE0 auf #8B2299 7,38:1 AAA

Aa #08BD59 auf #310340 6,93:1 AA

Aa #8BE615 auf #3C1FAD 6,74:1 AA

Aa #F2F20A auf #8B2299 6,27:1 AA

Aa #BF0F44 auf #FDFFE0 6,11:1 AA

Aa #00D1D1 auf #3C1FAD 5,54:1 AA

Aa #BF0F44 auf #F2F20A 5,19:1 AA

Aa #E0690D auf #310340 5,09:1 AA

Aa #8BE615 auf #8B2299 4,82:1 AA

Aa #FDFFE0 auf #0075CF 4,62:1 AA

Aa #08BD59 auf #3C1FAD 4,23:1 AA (großer Text)

Aa #310340 auf #D44696 4,20:1 AA (großer Text)

Aa #FDFFE0 auf #D44696 4,02:1 AA (großer Text)

Aa #BF0F44 auf #8BE615 3,99:1 AA (großer Text)

Aa #00D1D1 auf #8B2299 3,96:1 AA (großer Text)

Aa #F2F20A auf #0075CF 3,93:1 AA (großer Text)

Aa #0075CF auf #310340 3,65:1 AA (großer Text)

Aa #F2F20A auf #D44696 3,42:1 AA (großer Text)

Aa #E0690D auf #FDFFE0 3,32:1 AA (großer Text)

Aa #BF0F44 auf #00D1D1 3,28:1 AA (großer Text)

Aa #E0690D auf #3C1FAD 3,11:1 AA (großer Text)

Aa #08BD59 auf #8B2299 3,03:1 AA (großer Text)

Aa #8BE615 auf #0075CF 3,02:1 AA (großer Text)

Aa #E0690D auf #F2F20A 2,82:1 Nicht bestanden

Aa #BF0F44 auf #310340 2,77:1 Nicht bestanden

Aa #8BE615 auf #D44696 2,62:1 Nicht bestanden

Aa #3C1FAD auf #D44696 2,57:1 Nicht bestanden

Aa #BF0F44 auf #08BD59 2,50:1 Nicht bestanden

Aa #00D1D1 auf #0075CF 2,48:1 Nicht bestanden

Aa #FDFFE0 auf #08BD59 2,44:1 Nicht bestanden

Aa #310340 auf #8B2299 2,29:1 Nicht bestanden

Aa #0075CF auf #3C1FAD 2,23:1 Nicht bestanden

Aa #E0690D auf #8B2299 2,22:1 Nicht bestanden

Aa #E0690D auf #8BE615 2,17:1 Nicht bestanden

Aa #00D1D1 auf #D44696 2,16:1 Nicht bestanden

Aa #F2F20A auf #08BD59 2,07:1 Nicht bestanden

Aa #08BD59 auf #0075CF 1,90:1 Nicht bestanden

Aa #FDFFE0 auf #00D1D1 1,86:1 Nicht bestanden

Aa #BF0F44 auf #E0690D 1,84:1 Nicht bestanden

Aa #8B2299 auf #D44696 1,84:1 Nicht bestanden

Aa #E0690D auf #00D1D1 1,78:1 Nicht bestanden

Aa #BF0F44 auf #3C1FAD 1,69:1 Nicht bestanden

Aa #08BD59 auf #D44696 1,65:1 Nicht bestanden

Aa #3C1FAD auf #310340 1,64:1 Nicht bestanden

Aa #0075CF auf #8B2299 1,60:1 Nicht bestanden

Aa #8BE615 auf #08BD59 1,59:1 Nicht bestanden

Aa #F2F20A auf #00D1D1 1,58:1 Nicht bestanden

Aa #FDFFE0 auf #8BE615 1,53:1 Nicht bestanden

Aa #BF0F44 auf #D44696 1,52:1 Nicht bestanden

Aa #3C1FAD auf #8B2299 1,40:1 Nicht bestanden

Aa #E0690D auf #0075CF 1,39:1 Nicht bestanden

Aa #E0690D auf #08BD59 1,36:1 Nicht bestanden

Aa #BF0F44 auf #0075CF 1,32:1 Nicht bestanden

Aa #08BD59 auf #00D1D1 1,31:1 Nicht bestanden

Aa #F2F20A auf #8BE615 1,30:1 Nicht bestanden

Aa #8BE615 auf #00D1D1 1,22:1 Nicht bestanden

Aa #BF0F44 auf #8B2299 1,21:1 Nicht bestanden

Aa #E0690D auf #D44696 1,21:1 Nicht bestanden

Aa #F2F20A auf #FDFFE0 1,18:1 Nicht bestanden

Aa #0075CF auf #D44696 1,15:1 Nicht bestanden

RAINBOWPOP12

RAINBOWPOP12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen