Sunset 8

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

Zurück zur Bibliothek

Sunset 8

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

Bearbeiten

Lebendig 8 Farben Warm Gemischt Komplementär night warm sunset cool

Likes 93

Farben 8

CSS-Variablen

:root {
  --c-vibrant-1: #FFFF78;
  --c-vibrant-2: #FFD647;
  --c-vibrant-3: #FFC247;
  --c-vibrant-4: #FFA936;
  --c-vibrant-5: #FF8B6F;
  --c-vibrant-6: #E67595;
  --c-vibrant-7: #9A6390;
  --c-vibrant-8: #464678;
}

Über diese Palette

Diese lebendige Palette mit 8 Farben reicht vom hellsten Ton Hive (#FFFF78) bis zum dunkelsten Ton Dramatist (#464678). Sie vereint Hive, Python Yellow, Nârenji Orange, Bee Cluster, Miami Coral, Loveland, Raspberry Jelly Red und Dramatist in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 28. Davon erreichen 4 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #FFFF78 auf #464678 mit 8,23:1.

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

Farben im Detail

Hive #FFFF78

RGB: rgb(255, 255, 120)
HSL: hsl(60, 100%, 74%)
Luminanz: 0,941

Python Yellow #FFD647

RGB: rgb(255, 214, 71)
HSL: hsl(47, 100%, 64%)
Luminanz: 0,698

Nârenji Orange #FFC247

RGB: rgb(255, 194, 71)
HSL: hsl(40, 100%, 64%)
Luminanz: 0,603

Bee Cluster #FFA936

RGB: rgb(255, 169, 54)
HSL: hsl(34, 100%, 61%)
Luminanz: 0,499

Miami Coral #FF8B6F

RGB: rgb(255, 139, 111)
HSL: hsl(12, 100%, 72%)
Luminanz: 0,409

Loveland #E67595

RGB: rgb(230, 117, 149)
HSL: hsl(343, 69%, 68%)
Luminanz: 0,317

Raspberry Jelly Red #9A6390

RGB: rgb(154, 99, 144)
HSL: hsl(311, 22%, 50%)
Luminanz: 0,178

Dramatist #464678

RGB: rgb(70, 70, 120)
HSL: hsl(240, 26%, 37%)
Luminanz: 0,070

Kontrast & Barrierefreiheit

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

Aa #FFFF78 auf #464678 8,23:1 AAA

Aa #FFD647 auf #464678 6,21:1 AA

Aa #FFC247 auf #464678 5,42:1 AA

Aa #FFA936 auf #464678 4,56:1 AA

Aa #FFFF78 auf #9A6390 4,35:1 AA (großer Text)

Aa #FF8B6F auf #464678 3,81:1 AA (großer Text)

Aa #FFD647 auf #9A6390 3,28:1 AA (großer Text)

Aa #E67595 auf #464678 3,05:1 AA (großer Text)

Aa #FFC247 auf #9A6390 2,86:1 Nicht bestanden

Aa #FFFF78 auf #E67595 2,70:1 Nicht bestanden

Aa #FFA936 auf #9A6390 2,41:1 Nicht bestanden

Aa #FFFF78 auf #FF8B6F 2,16:1 Nicht bestanden

Aa #FFD647 auf #E67595 2,04:1 Nicht bestanden

Aa #FF8B6F auf #9A6390 2,01:1 Nicht bestanden

Aa #9A6390 auf #464678 1,89:1 Nicht bestanden

Aa #FFFF78 auf #FFA936 1,81:1 Nicht bestanden

Aa #FFC247 auf #E67595 1,78:1 Nicht bestanden

Aa #FFD647 auf #FF8B6F 1,63:1 Nicht bestanden

Aa #E67595 auf #9A6390 1,61:1 Nicht bestanden

Aa #FFFF78 auf #FFC247 1,52:1 Nicht bestanden

Aa #FFA936 auf #E67595 1,50:1 Nicht bestanden

Aa #FFC247 auf #FF8B6F 1,42:1 Nicht bestanden

Aa #FFD647 auf #FFA936 1,36:1 Nicht bestanden

Aa #FFFF78 auf #FFD647 1,33:1 Nicht bestanden

Aa #FF8B6F auf #E67595 1,25:1 Nicht bestanden

Aa #FFA936 auf #FF8B6F 1,20:1 Nicht bestanden

Aa #FFC247 auf #FFA936 1,19:1 Nicht bestanden

Aa #FFD647 auf #FFC247 1,15:1 Nicht bestanden

Sunset 8

Sunset 8

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen