Candy Castle

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

Zurück zur Bibliothek

Candy Castle

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär vibrant pink blue saturated

Likes 51

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFEFB8;
  --c-vibrant-2: #FFCB4D;
  --c-vibrant-3: #EE6284;
  --c-vibrant-4: #6CE9C4;
  --c-vibrant-5: #38001A;
  --c-vibrant-6: #CF6200;
  --c-vibrant-7: #A41357;
  --c-vibrant-8: #008FB6;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Dandelion Whisper (#FFEFB8) bis zum dunkelsten Ton Rhodophobia (#38001A). Sie vereint Dandelion Whisper, Decisive Yellow, Jellyfish Sting, Onsen, Rhodophobia, Curry Powder, Plum Perfect und Spinnaker Blue in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 9 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFEFB8 auf #38001A mit 15,46:1.

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

Farben im Detail

Dandelion Whisper #FFEFB8

RGB: rgb(255, 239, 184)
HSL: hsl(46, 100%, 86%)
Luminanz: 0,865

Decisive Yellow #FFCB4D

RGB: rgb(255, 203, 77)
HSL: hsl(42, 100%, 65%)
Luminanz: 0,645

Jellyfish Sting #EE6284

RGB: rgb(238, 98, 132)
HSL: hsl(345, 80%, 66%)
Luminanz: 0,286

Onsen #6CE9C4

RGB: rgb(108, 233, 196)
HSL: hsl(162, 74%, 67%)
Luminanz: 0,655

Rhodophobia #38001A

RGB: rgb(56, 0, 26)
HSL: hsl(332, 100%, 11%)
Luminanz: 0,009

Curry Powder #CF6200

RGB: rgb(207, 98, 0)
HSL: hsl(28, 100%, 41%)
Luminanz: 0,220

Plum Perfect #A41357

RGB: rgb(164, 19, 87)
HSL: hsl(332, 79%, 36%)
Luminanz: 0,091

Spinnaker Blue #008FB6

RGB: rgb(0, 143, 182)
HSL: hsl(193, 100%, 36%)
Luminanz: 0,230

Kontrast & Barrierefreiheit

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

Aa #FFEFB8 auf #38001A 15,46:1 AAA

Aa #6CE9C4 auf #38001A 11,91:1 AAA

Aa #FFCB4D auf #38001A 11,75:1 AAA

Aa #FFEFB8 auf #A41357 6,51:1 AA

Aa #EE6284 auf #38001A 5,68:1 AA

Aa #6CE9C4 auf #A41357 5,02:1 AA

Aa #FFCB4D auf #A41357 4,95:1 AA

Aa #38001A auf #008FB6 4,74:1 AA

Aa #38001A auf #CF6200 4,56:1 AA

Aa #FFEFB8 auf #CF6200 3,39:1 AA (großer Text)

Aa #FFEFB8 auf #008FB6 3,26:1 AA (großer Text)

Aa #FFEFB8 auf #EE6284 2,72:1 Nicht bestanden

Aa #6CE9C4 auf #CF6200 2,61:1 Nicht bestanden

Aa #FFCB4D auf #CF6200 2,57:1 Nicht bestanden

Aa #6CE9C4 auf #008FB6 2,51:1 Nicht bestanden

Aa #FFCB4D auf #008FB6 2,48:1 Nicht bestanden

Aa #EE6284 auf #A41357 2,39:1 Nicht bestanden

Aa #38001A auf #A41357 2,37:1 Nicht bestanden

Aa #EE6284 auf #6CE9C4 2,10:1 Nicht bestanden

Aa #FFCB4D auf #EE6284 2,07:1 Nicht bestanden

Aa #A41357 auf #008FB6 1,99:1 Nicht bestanden

Aa #CF6200 auf #A41357 1,92:1 Nicht bestanden

Aa #FFEFB8 auf #FFCB4D 1,32:1 Nicht bestanden

Aa #FFEFB8 auf #6CE9C4 1,30:1 Nicht bestanden

Aa #EE6284 auf #CF6200 1,24:1 Nicht bestanden

Aa #EE6284 auf #008FB6 1,20:1 Nicht bestanden

Aa #CF6200 auf #008FB6 1,04:1 Nicht bestanden

Aa #FFCB4D auf #6CE9C4 1,01:1 Nicht bestanden

Candy Castle

Candy Castle

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen