Sunfall 12

Palette mit 12 Farben · Warm · Gemischt · Harmonie: Analog

Zurück zur Bibliothek

Sunfall 12

Palette mit 12 Farben · Temperatur: Warm · Ton: Gemischt · Harmonie: Analog

Bearbeiten

Lebendig 12 Farben Warm Gemischt Analog orange midnight pink purple

Likes 106

Farben 12

CSS-Variablen

:root {
  --c-vibrant-1: #1F0A1F;
  --c-vibrant-2: #4D1059;
  --c-vibrant-3: #6B155E;
  --c-vibrant-4: #8C2964;
  --c-vibrant-5: #A63169;
  --c-vibrant-6: #C23E6E;
  --c-vibrant-7: #D94E6A;
  --c-vibrant-8: #DE6B5B;
  --c-vibrant-9: #ED9A6D;
  --c-vibrant-10: #FFC37A;
  --c-vibrant-11: #FFEB99;
  --c-vibrant-12: #FEFFCF;
}

Über diese Palette

Diese lebendige Palette mit 12 Farben reicht vom hellsten Ton Ice Yellow (#FEFFCF) bis zum dunkelsten Ton Meški Black (#1F0A1F). Sie vereint Meški Black, Cosmic Explorer, Purple Curse, Beetiful Magenta, Valentine’s Day, Lilac Rose, Rosy Cheeks, Coralite, Florida Mango, Bronze Blush, Old Yella und Ice Yellow in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 66. Davon erreichen 20 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #1F0A1F auf #FEFFCF mit 18,21:1.

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

Farben im Detail

Meški Black #1F0A1F

RGB: rgb(31, 10, 31)
HSL: hsl(300, 51%, 8%)
Luminanz: 0,006

Cosmic Explorer #4D1059

RGB: rgb(77, 16, 89)
HSL: hsl(290, 70%, 21%)
Luminanz: 0,027

Purple Curse #6B155E

RGB: rgb(107, 21, 94)
HSL: hsl(309, 67%, 25%)
Luminanz: 0,045

Beetiful Magenta #8C2964

RGB: rgb(140, 41, 100)
HSL: hsl(324, 55%, 35%)
Luminanz: 0,081

Valentine’s Day #A63169

RGB: rgb(166, 49, 105)
HSL: hsl(331, 54%, 42%)
Luminanz: 0,113

Lilac Rose #C23E6E

RGB: rgb(194, 62, 110)
HSL: hsl(338, 52%, 50%)
Luminanz: 0,160

Rosy Cheeks #D94E6A

RGB: rgb(217, 78, 106)
HSL: hsl(348, 65%, 58%)
Luminanz: 0,212

Coralite #DE6B5B

RGB: rgb(222, 107, 91)
HSL: hsl(7, 66%, 61%)
Luminanz: 0,268

Florida Mango #ED9A6D

RGB: rgb(237, 154, 109)
HSL: hsl(21, 78%, 68%)
Luminanz: 0,422

Bronze Blush #FFC37A

RGB: rgb(255, 195, 122)
HSL: hsl(33, 100%, 74%)
Luminanz: 0,617

Old Yella #FFEB99

RGB: rgb(255, 235, 153)
HSL: hsl(48, 100%, 80%)
Luminanz: 0,830

Ice Yellow #FEFFCF

RGB: rgb(254, 255, 207)
HSL: hsl(61, 100%, 91%)
Luminanz: 0,971

Kontrast & Barrierefreiheit

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

Aa #1F0A1F auf #FEFFCF 18,21:1 AAA

Aa #1F0A1F auf #FFEB99 15,69:1 AAA

Aa #4D1059 auf #FEFFCF 13,31:1 AAA

Aa #1F0A1F auf #FFC37A 11,89:1 AAA

Aa #4D1059 auf #FFEB99 11,47:1 AAA

Aa #6B155E auf #FEFFCF 10,78:1 AAA

Aa #6B155E auf #FFEB99 9,29:1 AAA

Aa #4D1059 auf #FFC37A 8,70:1 AAA

Aa #1F0A1F auf #ED9A6D 8,42:1 AAA

Aa #8C2964 auf #FEFFCF 7,80:1 AAA

Aa #6B155E auf #FFC37A 7,04:1 AAA

Aa #8C2964 auf #FFEB99 6,73:1 AA

Aa #A63169 auf #FEFFCF 6,25:1 AA

Aa #4D1059 auf #ED9A6D 6,16:1 AA

Aa #1F0A1F auf #DE6B5B 5,67:1 AA

Aa #A63169 auf #FFEB99 5,39:1 AA

Aa #8C2964 auf #FFC37A 5,10:1 AA

Aa #6B155E auf #ED9A6D 4,99:1 AA

Aa #C23E6E auf #FEFFCF 4,85:1 AA

Aa #1F0A1F auf #D94E6A 4,68:1 AA

Aa #C23E6E auf #FFEB99 4,18:1 AA (großer Text)

Aa #4D1059 auf #DE6B5B 4,15:1 AA (großer Text)

Aa #A63169 auf #FFC37A 4,09:1 AA (großer Text)

Aa #D94E6A auf #FEFFCF 3,89:1 AA (großer Text)

Aa #1F0A1F auf #C23E6E 3,75:1 AA (großer Text)

Aa #8C2964 auf #ED9A6D 3,61:1 AA (großer Text)

Aa #4D1059 auf #D94E6A 3,42:1 AA (großer Text)

Aa #6B155E auf #DE6B5B 3,36:1 AA (großer Text)

Aa #D94E6A auf #FFEB99 3,35:1 AA (großer Text)

Aa #DE6B5B auf #FEFFCF 3,21:1 AA (großer Text)

Aa #C23E6E auf #FFC37A 3,17:1 AA (großer Text)

Aa #1F0A1F auf #A63169 2,91:1 Nicht bestanden

Aa #A63169 auf #ED9A6D 2,89:1 Nicht bestanden

Aa #6B155E auf #D94E6A 2,77:1 Nicht bestanden

Aa #DE6B5B auf #FFEB99 2,77:1 Nicht bestanden

Aa #4D1059 auf #C23E6E 2,74:1 Nicht bestanden

Aa #D94E6A auf #FFC37A 2,54:1 Nicht bestanden

Aa #8C2964 auf #DE6B5B 2,43:1 Nicht bestanden

Aa #1F0A1F auf #8C2964 2,33:1 Nicht bestanden

Aa #C23E6E auf #ED9A6D 2,24:1 Nicht bestanden

Aa #6B155E auf #C23E6E 2,22:1 Nicht bestanden

Aa #ED9A6D auf #FEFFCF 2,16:1 Nicht bestanden

Aa #4D1059 auf #A63169 2,13:1 Nicht bestanden

Aa #DE6B5B auf #FFC37A 2,10:1 Nicht bestanden

Aa #8C2964 auf #D94E6A 2,01:1 Nicht bestanden

Aa #A63169 auf #DE6B5B 1,95:1 Nicht bestanden

Aa #ED9A6D auf #FFEB99 1,86:1 Nicht bestanden

Aa #D94E6A auf #ED9A6D 1,80:1 Nicht bestanden

Aa #6B155E auf #A63169 1,72:1 Nicht bestanden

Aa #4D1059 auf #8C2964 1,71:1 Nicht bestanden

Aa #1F0A1F auf #6B155E 1,69:1 Nicht bestanden

Aa #8C2964 auf #C23E6E 1,61:1 Nicht bestanden

Aa #A63169 auf #D94E6A 1,61:1 Nicht bestanden

Aa #FFC37A auf #FEFFCF 1,53:1 Nicht bestanden

Aa #C23E6E auf #DE6B5B 1,51:1 Nicht bestanden

Aa #DE6B5B auf #ED9A6D 1,48:1 Nicht bestanden

Aa #ED9A6D auf #FFC37A 1,41:1 Nicht bestanden

Aa #6B155E auf #8C2964 1,38:1 Nicht bestanden

Aa #1F0A1F auf #4D1059 1,37:1 Nicht bestanden

Aa #FFC37A auf #FFEB99 1,32:1 Nicht bestanden

Aa #A63169 auf #C23E6E 1,29:1 Nicht bestanden

Aa #8C2964 auf #A63169 1,25:1 Nicht bestanden

Aa #C23E6E auf #D94E6A 1,25:1 Nicht bestanden

Aa #4D1059 auf #6B155E 1,23:1 Nicht bestanden

Aa #D94E6A auf #DE6B5B 1,21:1 Nicht bestanden

Aa #FFEB99 auf #FEFFCF 1,16:1 Nicht bestanden

Sunfall 12

Sunfall 12

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen