COSMIC

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

Zurück zur Bibliothek

COSMIC

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

Bearbeiten

Lebendig 9 Farben Warm Gemischt Komplementär

Likes 3

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #FFFFFF;
  --c-vibrant-2: #FF974D;
  --c-vibrant-3: #F26419;
  --c-vibrant-4: #583F2F;
  --c-vibrant-5: #FFC01D;
  --c-vibrant-6: #FF4BE9;
  --c-vibrant-7: #39E9FF;
  --c-vibrant-8: #6A34A7;
  --c-vibrant-9: #3B338A;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton White (#FFFFFF) bis zum dunkelsten Ton Majestic Eggplant (#3B338A). Sie vereint White, Pastel Orange, Scarlet Ibis, Lounge Leather, Happy Yipee, Actinic Light, Shimmering Expanse Cyan, Purple Heart und Majestic Eggplant in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 11 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFFFF auf #3B338A mit 10,36:1.

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

Farben im Detail

White #FFFFFF

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

Pastel Orange #FF974D

RGB: rgb(255, 151, 77)
HSL: hsl(25, 100%, 65%)
Luminanz: 0,439

Scarlet Ibis #F26419

RGB: rgb(242, 100, 25)
HSL: hsl(21, 89%, 52%)
Luminanz: 0,281

Lounge Leather #583F2F

RGB: rgb(88, 63, 47)
HSL: hsl(23, 30%, 26%)
Luminanz: 0,058

Happy Yipee #FFC01D

RGB: rgb(255, 192, 29)
HSL: hsl(43, 100%, 56%)
Luminanz: 0,591

Actinic Light #FF4BE9

RGB: rgb(255, 75, 233)
HSL: hsl(307, 100%, 65%)
Luminanz: 0,322

Shimmering Expanse Cyan #39E9FF

RGB: rgb(57, 233, 255)
HSL: hsl(187, 100%, 61%)
Luminanz: 0,664

Purple Heart #6A34A7

RGB: rgb(106, 52, 167)
HSL: hsl(268, 53%, 43%)
Luminanz: 0,083

Majestic Eggplant #3B338A

RGB: rgb(59, 51, 138)
HSL: hsl(246, 46%, 37%)
Luminanz: 0,051

Kontrast & Barrierefreiheit

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

Aa #FFFFFF auf #3B338A 10,36:1 AAA

Aa #FFFFFF auf #583F2F 9,69:1 AAA

Aa #FFFFFF auf #6A34A7 7,89:1 AAA

Aa #39E9FF auf #3B338A 7,04:1 AAA

Aa #583F2F auf #39E9FF 6,59:1 AA

Aa #FFC01D auf #3B338A 6,32:1 AA

Aa #583F2F auf #FFC01D 5,91:1 AA

Aa #39E9FF auf #6A34A7 5,36:1 AA

Aa #FF974D auf #3B338A 4,83:1 AA

Aa #FFC01D auf #6A34A7 4,81:1 AA

Aa #FF974D auf #583F2F 4,52:1 AA

Aa #FF974D auf #6A34A7 3,68:1 AA (großer Text)

Aa #FF4BE9 auf #3B338A 3,67:1 AA (großer Text)

Aa #583F2F auf #FF4BE9 3,43:1 AA (großer Text)

Aa #F26419 auf #3B338A 3,26:1 AA (großer Text)

Aa #FFFFFF auf #F26419 3,18:1 AA (großer Text)

Aa #F26419 auf #583F2F 3,05:1 AA (großer Text)

Aa #FFFFFF auf #FF4BE9 2,82:1 Nicht bestanden

Aa #FF4BE9 auf #6A34A7 2,79:1 Nicht bestanden

Aa #F26419 auf #6A34A7 2,48:1 Nicht bestanden

Aa #F26419 auf #39E9FF 2,16:1 Nicht bestanden

Aa #FFFFFF auf #FF974D 2,15:1 Nicht bestanden

Aa #F26419 auf #FFC01D 1,94:1 Nicht bestanden

Aa #FF4BE9 auf #39E9FF 1,92:1 Nicht bestanden

Aa #FFC01D auf #FF4BE9 1,72:1 Nicht bestanden

Aa #FFFFFF auf #FFC01D 1,64:1 Nicht bestanden

Aa #FF974D auf #F26419 1,48:1 Nicht bestanden

Aa #FFFFFF auf #39E9FF 1,47:1 Nicht bestanden

Aa #FF974D auf #39E9FF 1,46:1 Nicht bestanden

Aa #FF974D auf #FF4BE9 1,32:1 Nicht bestanden

Aa #FF974D auf #FFC01D 1,31:1 Nicht bestanden

Aa #6A34A7 auf #3B338A 1,31:1 Nicht bestanden

Aa #583F2F auf #6A34A7 1,23:1 Nicht bestanden

Aa #F26419 auf #FF4BE9 1,12:1 Nicht bestanden

Aa #FFC01D auf #39E9FF 1,11:1 Nicht bestanden

Aa #583F2F auf #3B338A 1,07:1 Nicht bestanden

COSMIC

COSMIC

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen