Fade12

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

Zurück zur Bibliothek

Fade12

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

Bearbeiten

Lebendig 12 Farben Warm Gemischt Komplementär 12colors

Likes 9

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #FE5F55;
  --c-vibrant-2: #F5D549;
  --c-vibrant-3: #5ABD5C;
  --c-vibrant-4: #423A60;
  --c-vibrant-5: #9C579E;
  --c-vibrant-6: #E986C6;
  --c-vibrant-7: #FFDCA8;
  --c-vibrant-8: #C1FFA8;
  --c-vibrant-9: #A8D9FF;
  --c-vibrant-10: #000019;
  --c-vibrant-11: #828282;
  --c-vibrant-12: #F0FFFE;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Vapour (#F0FFFE) bis zum dunkelsten Ton Benthic Black (#000019). Sie vereint Sunset Orange, Anna Banana, Forest Maid, Patriot Blue, Heath Spotted Orchid, Blushed Bombshell, Sarcoline, Menthol, Malmö FF, Benthic Black, Squant und Vapour in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 15 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #000019 auf #F0FFFE mit 20,16:1.

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

Farben im Detail

Sunset Orange #FE5F55

RGB: rgb(254, 95, 85)
HSL: hsl(4, 99%, 66%)
Luminanz: 0,299

Anna Banana #F5D549

RGB: rgb(245, 213, 73)
HSL: hsl(49, 90%, 62%)
Luminanz: 0,675

Forest Maid #5ABD5C

RGB: rgb(90, 189, 92)
HSL: hsl(121, 43%, 55%)
Luminanz: 0,393

Patriot Blue #423A60

RGB: rgb(66, 58, 96)
HSL: hsl(253, 25%, 30%)
Luminanz: 0,050

Heath Spotted Orchid #9C579E

RGB: rgb(156, 87, 158)
HSL: hsl(298, 29%, 48%)
Luminanz: 0,164

Blushed Bombshell #E986C6

RGB: rgb(233, 134, 198)
HSL: hsl(321, 69%, 72%)
Luminanz: 0,385

Sarcoline #FFDCA8

RGB: rgb(255, 220, 168)
HSL: hsl(36, 100%, 83%)
Luminanz: 0,753

Menthol #C1FFA8

RGB: rgb(193, 255, 168)
HSL: hsl(103, 100%, 83%)
Luminanz: 0,857

Malmö FF #A8D9FF

RGB: rgb(168, 217, 255)
HSL: hsl(206, 100%, 83%)
Luminanz: 0,652

Benthic Black #000019

RGB: rgb(0, 0, 25)
HSL: hsl(240, 100%, 5%)
Luminanz: 0,001

Squant #828282

RGB: rgb(130, 130, 130)
HSL: hsl(0, 0%, 51%)
Luminanz: 0,223

Vapour #F0FFFE

RGB: rgb(240, 255, 254)
HSL: hsl(176, 100%, 97%)
Luminanz: 0,972

Kontrast & Barrierefreiheit

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

Aa #000019 auf #F0FFFE 20,16:1 AAA

Aa #C1FFA8 auf #000019 17,89:1 AAA

Aa #FFDCA8 auf #000019 15,83:1 AAA

Aa #F5D549 auf #000019 14,30:1 AAA

Aa #A8D9FF auf #000019 13,84:1 AAA

Aa #423A60 auf #F0FFFE 10,19:1 AAA

Aa #423A60 auf #C1FFA8 9,04:1 AAA

Aa #5ABD5C auf #000019 8,75:1 AAA

Aa #E986C6 auf #000019 8,57:1 AAA

Aa #423A60 auf #FFDCA8 8,00:1 AAA

Aa #F5D549 auf #423A60 7,23:1 AAA

Aa #423A60 auf #A8D9FF 7,00:1 AAA

Aa #FE5F55 auf #000019 6,89:1 AA

Aa #000019 auf #828282 5,39:1 AA

Aa #9C579E auf #F0FFFE 4,79:1 AA

Aa #5ABD5C auf #423A60 4,42:1 AA (großer Text)

Aa #423A60 auf #E986C6 4,33:1 AA (großer Text)

Aa #9C579E auf #C1FFA8 4,25:1 AA (großer Text)

Aa #9C579E auf #000019 4,21:1 AA (großer Text)

Aa #9C579E auf #FFDCA8 3,76:1 AA (großer Text)

Aa #828282 auf #F0FFFE 3,74:1 AA (großer Text)

Aa #FE5F55 auf #423A60 3,48:1 AA (großer Text)

Aa #F5D549 auf #9C579E 3,39:1 AA (großer Text)

Aa #C1FFA8 auf #828282 3,32:1 AA (großer Text)

Aa #9C579E auf #A8D9FF 3,29:1 AA (großer Text)

Aa #FFDCA8 auf #828282 2,94:1 Nicht bestanden

Aa #FE5F55 auf #F0FFFE 2,93:1 Nicht bestanden

Aa #423A60 auf #828282 2,72:1 Nicht bestanden

Aa #F5D549 auf #828282 2,65:1 Nicht bestanden

Aa #FE5F55 auf #C1FFA8 2,60:1 Nicht bestanden

Aa #A8D9FF auf #828282 2,57:1 Nicht bestanden

Aa #E986C6 auf #F0FFFE 2,35:1 Nicht bestanden

Aa #FE5F55 auf #FFDCA8 2,30:1 Nicht bestanden

Aa #5ABD5C auf #F0FFFE 2,30:1 Nicht bestanden

Aa #423A60 auf #9C579E 2,13:1 Nicht bestanden

Aa #E986C6 auf #C1FFA8 2,09:1 Nicht bestanden

Aa #FE5F55 auf #F5D549 2,08:1 Nicht bestanden

Aa #5ABD5C auf #9C579E 2,08:1 Nicht bestanden

Aa #5ABD5C auf #C1FFA8 2,05:1 Nicht bestanden

Aa #9C579E auf #E986C6 2,03:1 Nicht bestanden

Aa #FE5F55 auf #A8D9FF 2,01:1 Nicht bestanden

Aa #423A60 auf #000019 1,98:1 Nicht bestanden

Aa #E986C6 auf #FFDCA8 1,85:1 Nicht bestanden

Aa #5ABD5C auf #FFDCA8 1,81:1 Nicht bestanden

Aa #F5D549 auf #E986C6 1,67:1 Nicht bestanden

Aa #FE5F55 auf #9C579E 1,63:1 Nicht bestanden

Aa #F5D549 auf #5ABD5C 1,63:1 Nicht bestanden

Aa #5ABD5C auf #828282 1,62:1 Nicht bestanden

Aa #E986C6 auf #A8D9FF 1,61:1 Nicht bestanden

Aa #E986C6 auf #828282 1,59:1 Nicht bestanden

Aa #5ABD5C auf #A8D9FF 1,58:1 Nicht bestanden

Aa #A8D9FF auf #F0FFFE 1,46:1 Nicht bestanden

Aa #F5D549 auf #F0FFFE 1,41:1 Nicht bestanden

Aa #C1FFA8 auf #A8D9FF 1,29:1 Nicht bestanden

Aa #FE5F55 auf #828282 1,28:1 Nicht bestanden

Aa #9C579E auf #828282 1,28:1 Nicht bestanden

Aa #FE5F55 auf #5ABD5C 1,27:1 Nicht bestanden

Aa #FFDCA8 auf #F0FFFE 1,27:1 Nicht bestanden

Aa #F5D549 auf #C1FFA8 1,25:1 Nicht bestanden

Aa #FE5F55 auf #E986C6 1,24:1 Nicht bestanden

Aa #FFDCA8 auf #A8D9FF 1,14:1 Nicht bestanden

Aa #FFDCA8 auf #C1FFA8 1,13:1 Nicht bestanden

Aa #C1FFA8 auf #F0FFFE 1,13:1 Nicht bestanden

Aa #F5D549 auf #FFDCA8 1,11:1 Nicht bestanden

Aa #F5D549 auf #A8D9FF 1,03:1 Nicht bestanden

Aa #5ABD5C auf #E986C6 1,02:1 Nicht bestanden

Fade12

Fade12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen