Crayolablind

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

Zurück zur Bibliothek

Crayolablind

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär challenge pixeljoint

Likes 8

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #8E3179;
  --c-vibrant-2: #CA3435;
  --c-vibrant-3: #FF91A4;
  --c-vibrant-4: #FCD667;
  --c-vibrant-5: #93DFB8;
  --c-vibrant-6: #B5B35C;
  --c-vibrant-7: #02A4D3;
  --c-vibrant-8: #00468C;
  --c-vibrant-9: #FFFFFF;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Congress Blue (#00468C). Sie vereint Violet Vixen, Young Mahogany, Salmon Pink, Yuzu Marmalade, Green Jewel, Hemp Tea, Malibu Blue, Congress Blue und White in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 7 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #00468C auf #FFFFFF mit 9,31:1.

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

Farben im Detail

Violet Vixen #8E3179

RGB: rgb(142, 49, 121)
HSL: hsl(314, 49%, 37%)
Luminanz: 0,093

Young Mahogany #CA3435

RGB: rgb(202, 52, 53)
HSL: hsl(360, 59%, 50%)
Luminanz: 0,153

Salmon Pink #FF91A4

RGB: rgb(255, 145, 164)
HSL: hsl(350, 100%, 78%)
Luminanz: 0,442

Yuzu Marmalade #FCD667

RGB: rgb(252, 214, 103)
HSL: hsl(45, 96%, 70%)
Luminanz: 0,698

Green Jewel #93DFB8

RGB: rgb(147, 223, 184)
HSL: hsl(149, 54%, 73%)
Luminanz: 0,624

Hemp Tea #B5B35C

RGB: rgb(181, 179, 92)
HSL: hsl(59, 38%, 54%)
Luminanz: 0,428

Malibu Blue #02A4D3

RGB: rgb(2, 164, 211)
HSL: hsl(193, 98%, 42%)
Luminanz: 0,313

Congress Blue #00468C

RGB: rgb(0, 70, 140)
HSL: hsl(210, 100%, 27%)
Luminanz: 0,063

White #FFFFFF

RGB: rgb(255, 255, 255)
HSL: hsl(0, 0%, 100%)
Luminanz: 1,000

Kontrast & Barrierefreiheit

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

Aa #00468C auf #FFFFFF 9,31:1 AAA

Aa #8E3179 auf #FFFFFF 7,33:1 AAA

Aa #FCD667 auf #00468C 6,63:1 AA

Aa #93DFB8 auf #00468C 5,98:1 AA

Aa #8E3179 auf #FCD667 5,22:1 AA

Aa #CA3435 auf #FFFFFF 5,18:1 AA

Aa #8E3179 auf #93DFB8 4,71:1 AA

Aa #FF91A4 auf #00468C 4,36:1 AA (großer Text)

Aa #B5B35C auf #00468C 4,24:1 AA (großer Text)

Aa #CA3435 auf #FCD667 3,69:1 AA (großer Text)

Aa #8E3179 auf #FF91A4 3,43:1 AA (großer Text)

Aa #8E3179 auf #B5B35C 3,34:1 AA (großer Text)

Aa #CA3435 auf #93DFB8 3,33:1 AA (großer Text)

Aa #02A4D3 auf #00468C 3,22:1 AA (großer Text)

Aa #02A4D3 auf #FFFFFF 2,90:1 Nicht bestanden

Aa #8E3179 auf #02A4D3 2,53:1 Nicht bestanden

Aa #CA3435 auf #FF91A4 2,43:1 Nicht bestanden

Aa #CA3435 auf #B5B35C 2,36:1 Nicht bestanden

Aa #B5B35C auf #FFFFFF 2,19:1 Nicht bestanden

Aa #FF91A4 auf #FFFFFF 2,13:1 Nicht bestanden

Aa #FCD667 auf #02A4D3 2,06:1 Nicht bestanden

Aa #93DFB8 auf #02A4D3 1,86:1 Nicht bestanden

Aa #CA3435 auf #00468C 1,80:1 Nicht bestanden

Aa #CA3435 auf #02A4D3 1,79:1 Nicht bestanden

Aa #FCD667 auf #B5B35C 1,56:1 Nicht bestanden

Aa #93DFB8 auf #FFFFFF 1,56:1 Nicht bestanden

Aa #FF91A4 auf #FCD667 1,52:1 Nicht bestanden

Aa #8E3179 auf #CA3435 1,41:1 Nicht bestanden

Aa #93DFB8 auf #B5B35C 1,41:1 Nicht bestanden

Aa #FCD667 auf #FFFFFF 1,40:1 Nicht bestanden

Aa #FF91A4 auf #93DFB8 1,37:1 Nicht bestanden

Aa #FF91A4 auf #02A4D3 1,36:1 Nicht bestanden

Aa #B5B35C auf #02A4D3 1,32:1 Nicht bestanden

Aa #8E3179 auf #00468C 1,27:1 Nicht bestanden

Aa #FCD667 auf #93DFB8 1,11:1 Nicht bestanden

Aa #FF91A4 auf #B5B35C 1,03:1 Nicht bestanden

Crayolablind

Crayolablind

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen