Simple64

Palette mit 7 Farben · Neutral · Gemischt · Harmonie: Komplementär

Zurück zur Bibliothek

Simple64

Palette mit 7 Farben · Temperatur: Neutral · Ton: Gemischt · Harmonie: Komplementär

Bearbeiten

Lebendig 7 Farben Neutral Gemischt Komplementär simple

Likes 11

Farben 7

CSS-Variablen

:root {
  --c-vibrant-1: #16044C;
  --c-vibrant-2: #3FFC4A;
  --c-vibrant-3: #1D7CF9;
  --c-vibrant-4: #F9355A;
  --c-vibrant-5: #FEF15E;
  --c-vibrant-6: #808080;
  --c-vibrant-7: #FEFEFE;
}

Über diese Palette

Diese lebendige Palette mit 7 Farben reicht vom hellsten Ton White as Heaven (#FEFEFE) bis zum dunkelsten Ton Magic Whale (#16044C). Sie vereint Magic Whale, Goblin Warboss, Clear Blue, Radical Red, Kihada Yellow, Grey und White as Heaven in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 21. Davon erreichen 6 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #16044C auf #FEFEFE mit 18,01:1.

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

Farben im Detail

Magic Whale #16044C

RGB: rgb(22, 4, 76)
HSL: hsl(255, 90%, 16%)
Luminanz: 0,008

Goblin Warboss #3FFC4A

RGB: rgb(63, 252, 74)
HSL: hsl(123, 97%, 62%)
Luminanz: 0,712

Clear Blue #1D7CF9

RGB: rgb(29, 124, 249)
HSL: hsl(214, 95%, 55%)
Luminanz: 0,215

Radical Red #F9355A

RGB: rgb(249, 53, 90)
HSL: hsl(349, 94%, 59%)
Luminanz: 0,234

Kihada Yellow #FEF15E

RGB: rgb(254, 241, 94)
HSL: hsl(55, 99%, 68%)
Luminanz: 0,848

Grey #808080

RGB: rgb(128, 128, 128)
HSL: hsl(0, 0%, 50%)
Luminanz: 0,216

White as Heaven #FEFEFE

RGB: rgb(254, 254, 254)
HSL: hsl(0, 0%, 100%)
Luminanz: 0,991

Kontrast & Barrierefreiheit

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

Aa #16044C auf #FEFEFE 18,01:1 AAA

Aa #16044C auf #FEF15E 15,54:1 AAA

Aa #16044C auf #3FFC4A 13,18:1 AAA

Aa #16044C auf #F9355A 4,92:1 AA

Aa #16044C auf #808080 4,60:1 AA

Aa #16044C auf #1D7CF9 4,59:1 AA

Aa #1D7CF9 auf #FEFEFE 3,93:1 AA (großer Text)

Aa #808080 auf #FEFEFE 3,92:1 AA (großer Text)

Aa #F9355A auf #FEFEFE 3,66:1 AA (großer Text)

Aa #1D7CF9 auf #FEF15E 3,39:1 AA (großer Text)

Aa #FEF15E auf #808080 3,38:1 AA (großer Text)

Aa #F9355A auf #FEF15E 3,16:1 AA (großer Text)

Aa #3FFC4A auf #1D7CF9 2,87:1 Nicht bestanden

Aa #3FFC4A auf #808080 2,87:1 Nicht bestanden

Aa #3FFC4A auf #F9355A 2,68:1 Nicht bestanden

Aa #3FFC4A auf #FEFEFE 1,37:1 Nicht bestanden

Aa #3FFC4A auf #FEF15E 1,18:1 Nicht bestanden

Aa #FEF15E auf #FEFEFE 1,16:1 Nicht bestanden

Aa #1D7CF9 auf #F9355A 1,07:1 Nicht bestanden

Aa #F9355A auf #808080 1,07:1 Nicht bestanden

Aa #1D7CF9 auf #808080 1,00:1 Nicht bestanden

Simple64

Simple64

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen