OrangeFall

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

Zurück zur Bibliothek

OrangeFall

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

Bearbeiten

Lebendig 9 Farben Warm Dunkel Komplementär fall monoramp colors autumn

Likes 28

Farben 9

CSS-Variablen

:root {
  --c-vibrant-1: #100820;
  --c-vibrant-2: #381038;
  --c-vibrant-3: #601840;
  --c-vibrant-4: #A01828;
  --c-vibrant-5: #D02020;
  --c-vibrant-6: #F85800;
  --c-vibrant-7: #F89800;
  --c-vibrant-8: #E8D028;
  --c-vibrant-9: #F0F8E0;
}

Über diese Palette

Diese lebendige Palette mit 9 Farben reicht vom hellsten Ton Lemon Sugar (#F0F8E0) bis zum dunkelsten Ton Tristesse (#100820). Sie vereint Tristesse, Synallactida, Soul Anchor, Cut Ruby, Lionheart, Willpower Orange, Jack-O, Polliwog und Lemon Sugar in einem Set, das du direkt in deine Benutzeroberfläche übernehmen kannst. Farbpaare in der Palette: 36. Davon erreichen 14 die WCAG-AA-Kontrastschwelle (4,5:1) für Fließtext – am stärksten ist #100820 auf #F0F8E0 mit 17,82:1.

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

Farben im Detail

Tristesse #100820

RGB: rgb(16, 8, 32)
HSL: hsl(260, 60%, 8%)
Luminanz: 0,004

Synallactida #381038

RGB: rgb(56, 16, 56)
HSL: hsl(300, 56%, 14%)
Luminanz: 0,015

Soul Anchor #601840

RGB: rgb(96, 24, 64)
HSL: hsl(327, 60%, 24%)
Luminanz: 0,035

Cut Ruby #A01828

RGB: rgb(160, 24, 40)
HSL: hsl(353, 74%, 36%)
Luminanz: 0,083

Lionheart #D02020

RGB: rgb(208, 32, 32)
HSL: hsl(0, 73%, 47%)
Luminanz: 0,146

Willpower Orange #F85800

RGB: rgb(248, 88, 0)
HSL: hsl(21, 100%, 49%)
Luminanz: 0,269

Jack-O #F89800

RGB: rgb(248, 152, 0)
HSL: hsl(37, 100%, 49%)
Luminanz: 0,424

Polliwog #E8D028

RGB: rgb(232, 208, 40)
HSL: hsl(53, 81%, 53%)
Luminanz: 0,624

Lemon Sugar #F0F8E0

RGB: rgb(240, 248, 224)
HSL: hsl(80, 63%, 93%)
Luminanz: 0,910

Kontrast & Barrierefreiheit

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

Aa #100820 auf #F0F8E0 17,82:1 AAA

Aa #381038 auf #F0F8E0 14,78:1 AAA

Aa #100820 auf #E8D028 12,51:1 AAA

Aa #601840 auf #F0F8E0 11,29:1 AAA

Aa #381038 auf #E8D028 10,38:1 AAA

Aa #100820 auf #F89800 8,80:1 AAA

Aa #601840 auf #E8D028 7,92:1 AAA

Aa #381038 auf #F89800 7,30:1 AAA

Aa #A01828 auf #F0F8E0 7,23:1 AAA

Aa #100820 auf #F85800 5,93:1 AA

Aa #601840 auf #F89800 5,57:1 AA

Aa #A01828 auf #E8D028 5,08:1 AA

Aa #381038 auf #F85800 4,92:1 AA

Aa #D02020 auf #F0F8E0 4,91:1 AA

Aa #601840 auf #F85800 3,75:1 AA (großer Text)

Aa #100820 auf #D02020 3,63:1 AA (großer Text)

Aa #A01828 auf #F89800 3,57:1 AA (großer Text)

Aa #D02020 auf #E8D028 3,45:1 AA (großer Text)

Aa #381038 auf #D02020 3,01:1 AA (großer Text)

Aa #F85800 auf #F0F8E0 3,01:1 AA (großer Text)

Aa #100820 auf #A01828 2,46:1 Nicht bestanden

Aa #D02020 auf #F89800 2,43:1 Nicht bestanden

Aa #A01828 auf #F85800 2,40:1 Nicht bestanden

Aa #601840 auf #D02020 2,30:1 Nicht bestanden

Aa #F85800 auf #E8D028 2,11:1 Nicht bestanden

Aa #381038 auf #A01828 2,04:1 Nicht bestanden

Aa #F89800 auf #F0F8E0 2,03:1 Nicht bestanden

Aa #D02020 auf #F85800 1,63:1 Nicht bestanden

Aa #100820 auf #601840 1,58:1 Nicht bestanden

Aa #601840 auf #A01828 1,56:1 Nicht bestanden

Aa #F85800 auf #F89800 1,48:1 Nicht bestanden

Aa #A01828 auf #D02020 1,47:1 Nicht bestanden

Aa #F89800 auf #E8D028 1,42:1 Nicht bestanden

Aa #E8D028 auf #F0F8E0 1,42:1 Nicht bestanden

Aa #381038 auf #601840 1,31:1 Nicht bestanden

Aa #100820 auf #381038 1,21:1 Nicht bestanden

OrangeFall

OrangeFall

CSS-Variablen

Über diese Palette

Farben im Detail

Kontrast & Barrierefreiheit

Ähnliche Paletten

Schriftarten

Icons & SVG

Farben

Bilder

CSS-Tools

Entwicklung

Dokumentation

Unternehmen