4pi

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

Zurück zur Bibliothek

4pi

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär vibrant pico8

Likes 49

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFE2CE;
  --c-vibrant-2: #F56214;
  --c-vibrant-3: #FFC414;
  --c-vibrant-4: #3BD827;
  --c-vibrant-5: #147658;
  --c-vibrant-6: #14C4CE;
  --c-vibrant-7: #1D3162;
  --c-vibrant-8: #A73176;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Melted Marshmallow (#FFE2CE) bis zum dunkelsten Ton Mythical Night (#1D3162). Sie vereint Melted Marshmallow, Light My Fire, Sunflower, Bitter Lime and Defeat, Greasy Greens, Neon Lagoon, Mythical Night und Plum Kingdom 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 #FFE2CE auf #1D3162 mit 10,21:1.

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

Farben im Detail

Melted Marshmallow #FFE2CE

RGB: rgb(255, 226, 206)
HSL: hsl(24, 100%, 90%)
Luminanz: 0,801

Light My Fire #F56214

RGB: rgb(245, 98, 20)
HSL: hsl(21, 92%, 52%)
Luminanz: 0,282

Sunflower #FFC414

RGB: rgb(255, 196, 20)
HSL: hsl(45, 100%, 54%)
Luminanz: 0,608

Bitter Lime and Defeat #3BD827

RGB: rgb(59, 216, 39)
HSL: hsl(113, 69%, 50%)
Luminanz: 0,502

Greasy Greens #147658

RGB: rgb(20, 118, 88)
HSL: hsl(162, 71%, 27%)
Luminanz: 0,138

Neon Lagoon #14C4CE

RGB: rgb(20, 196, 206)
HSL: hsl(183, 82%, 44%)
Luminanz: 0,441

Mythical Night #1D3162

RGB: rgb(29, 49, 98)
HSL: hsl(223, 54%, 25%)
Luminanz: 0,033

Plum Kingdom #A73176

RGB: rgb(167, 49, 118)
HSL: hsl(325, 55%, 42%)
Luminanz: 0,117

Kontrast & Barrierefreiheit

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

Aa #FFE2CE auf #1D3162 10,21:1 AAA

Aa #FFC414 auf #1D3162 7,89:1 AAA

Aa #3BD827 auf #1D3162 6,62:1 AA

Aa #14C4CE auf #1D3162 5,89:1 AA

Aa #FFE2CE auf #A73176 5,09:1 AA

Aa #FFE2CE auf #147658 4,52:1 AA

Aa #F56214 auf #1D3162 3,98:1 AA (großer Text)

Aa #FFC414 auf #A73176 3,93:1 AA (großer Text)

Aa #FFC414 auf #147658 3,50:1 AA (großer Text)

Aa #3BD827 auf #A73176 3,30:1 AA (großer Text)

Aa #14C4CE auf #A73176 2,94:1 Nicht bestanden

Aa #3BD827 auf #147658 2,93:1 Nicht bestanden

Aa #147658 auf #14C4CE 2,61:1 Nicht bestanden

Aa #FFE2CE auf #F56214 2,56:1 Nicht bestanden

Aa #147658 auf #1D3162 2,26:1 Nicht bestanden

Aa #1D3162 auf #A73176 2,00:1 Nicht bestanden

Aa #F56214 auf #A73176 1,99:1 Nicht bestanden

Aa #F56214 auf #FFC414 1,98:1 Nicht bestanden

Aa #F56214 auf #147658 1,76:1 Nicht bestanden

Aa #FFE2CE auf #14C4CE 1,73:1 Nicht bestanden

Aa #F56214 auf #3BD827 1,66:1 Nicht bestanden

Aa #FFE2CE auf #3BD827 1,54:1 Nicht bestanden

Aa #F56214 auf #14C4CE 1,48:1 Nicht bestanden

Aa #FFC414 auf #14C4CE 1,34:1 Nicht bestanden

Aa #FFE2CE auf #FFC414 1,29:1 Nicht bestanden

Aa #FFC414 auf #3BD827 1,19:1 Nicht bestanden

Aa #147658 auf #A73176 1,13:1 Nicht bestanden

Aa #3BD827 auf #14C4CE 1,12:1 Nicht bestanden

4pi

4pi

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen