Candy Heart

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

Zurück zur Bibliothek

Candy Heart

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär pink blue candy palette

Likes 29

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #4B003B;
  --c-vibrant-2: #AD215B;
  --c-vibrant-3: #FF3179;
  --c-vibrant-4: #FF56AA;
  --c-vibrant-5: #F6AAFF;
  --c-vibrant-6: #E1FDFF;
  --c-vibrant-7: #70E2FF;
  --c-vibrant-8: #469CF2;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Matterhorn Snow (#E1FDFF) bis zum dunkelsten Ton Jacarta (#4B003B). Sie vereint Jacarta, Murderous Magenta, Lilac Lotion, Pink Katydid, Rich Brilliant Lavender, Matterhorn Snow, Athena Blue und Perfect Days in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #4B003B auf #E1FDFF mit 14,46:1.

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

Farben im Detail

Jacarta #4B003B

RGB: rgb(75, 0, 59)
HSL: hsl(313, 100%, 15%)
Luminanz: 0,018

Murderous Magenta #AD215B

RGB: rgb(173, 33, 91)
HSL: hsl(335, 68%, 40%)
Luminanz: 0,107

Lilac Lotion #FF3179

RGB: rgb(255, 49, 121)
HSL: hsl(339, 100%, 60%)
Luminanz: 0,248

Pink Katydid #FF56AA

RGB: rgb(255, 86, 170)
HSL: hsl(330, 100%, 67%)
Luminanz: 0,308

Rich Brilliant Lavender #F6AAFF

RGB: rgb(246, 170, 255)
HSL: hsl(294, 100%, 83%)
Luminanz: 0,556

Matterhorn Snow #E1FDFF

RGB: rgb(225, 253, 255)
HSL: hsl(184, 100%, 94%)
Luminanz: 0,935

Athena Blue #70E2FF

RGB: rgb(112, 226, 255)
HSL: hsl(192, 100%, 72%)
Luminanz: 0,651

Perfect Days #469CF2

RGB: rgb(70, 156, 242)
HSL: hsl(210, 87%, 61%)
Luminanz: 0,315

Kontrast & Barrierefreiheit

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

Aa #4B003B auf #E1FDFF 14,46:1 AAA

Aa #4B003B auf #70E2FF 10,28:1 AAA

Aa #4B003B auf #F6AAFF 8,89:1 AAA

Aa #AD215B auf #E1FDFF 6,26:1 AA

Aa #4B003B auf #469CF2 5,36:1 AA

Aa #4B003B auf #FF56AA 5,26:1 AA

Aa #AD215B auf #70E2FF 4,45:1 AA (großer Text)

Aa #4B003B auf #FF3179 4,38:1 AA (großer Text)

Aa #AD215B auf #F6AAFF 3,85:1 AA (großer Text)

Aa #FF3179 auf #E1FDFF 3,30:1 AA (großer Text)

Aa #FF56AA auf #E1FDFF 2,75:1 Nicht bestanden

Aa #E1FDFF auf #469CF2 2,70:1 Nicht bestanden

Aa #FF3179 auf #70E2FF 2,35:1 Nicht bestanden

Aa #AD215B auf #469CF2 2,32:1 Nicht bestanden

Aa #4B003B auf #AD215B 2,31:1 Nicht bestanden

Aa #AD215B auf #FF56AA 2,28:1 Nicht bestanden

Aa #FF3179 auf #F6AAFF 2,03:1 Nicht bestanden

Aa #FF56AA auf #70E2FF 1,96:1 Nicht bestanden

Aa #70E2FF auf #469CF2 1,92:1 Nicht bestanden

Aa #AD215B auf #FF3179 1,90:1 Nicht bestanden

Aa #FF56AA auf #F6AAFF 1,69:1 Nicht bestanden

Aa #F6AAFF auf #469CF2 1,66:1 Nicht bestanden

Aa #F6AAFF auf #E1FDFF 1,63:1 Nicht bestanden

Aa #E1FDFF auf #70E2FF 1,41:1 Nicht bestanden

Aa #FF3179 auf #469CF2 1,22:1 Nicht bestanden

Aa #FF3179 auf #FF56AA 1,20:1 Nicht bestanden

Aa #F6AAFF auf #70E2FF 1,16:1 Nicht bestanden

Aa #FF56AA auf #469CF2 1,02:1 Nicht bestanden

Candy Heart

Candy Heart

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen