Sign Up Sign Up
OrangeFall

OrangeFall

9-color palette · Warm · Dark · Complementary harmony

Back to Library

OrangeFall

9-color palette · Warm temperature · Dark tone · Complementary harmony

Modify
Vibrant 9 colors Warm Dark Complementary fall monoramp colors autumn
Likes 28
Colors 9

CSS variables

: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;
}

About this palette

This 9-color vibrant palette runs from Lemon Sugar (#F0F8E0) as its lightest tone to Tristesse (#100820) as its darkest. It blends Tristesse, Synallactida, Soul Anchor, Cut Ruby, Lionheart, Willpower Orange, Jack-O, Polliwog and Lemon Sugar into a single set you can drop straight into a UI. Of its 36 color pairings, 14 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #100820 on #F0F8E0 at 17.82:1.

A versatile palette suitable for marketing pages, product hero blocks, illustrations, and accent UI states.

Color breakdown

Tristesse #100820
RGB
rgb(16, 8, 32)
HSL
hsl(260, 60%, 8%)
Luminance
0.004
Synallactida #381038
RGB
rgb(56, 16, 56)
HSL
hsl(300, 56%, 14%)
Luminance
0.015
Soul Anchor #601840
RGB
rgb(96, 24, 64)
HSL
hsl(327, 60%, 24%)
Luminance
0.035
Cut Ruby #A01828
RGB
rgb(160, 24, 40)
HSL
hsl(353, 74%, 36%)
Luminance
0.083
Lionheart #D02020
RGB
rgb(208, 32, 32)
HSL
hsl(0, 73%, 47%)
Luminance
0.146
Willpower Orange #F85800
RGB
rgb(248, 88, 0)
HSL
hsl(21, 100%, 49%)
Luminance
0.269
Jack-O #F89800
RGB
rgb(248, 152, 0)
HSL
hsl(37, 100%, 49%)
Luminance
0.424
Polliwog #E8D028
RGB
rgb(232, 208, 40)
HSL
hsl(53, 81%, 53%)
Luminance
0.624
Lemon Sugar #F0F8E0
RGB
rgb(240, 248, 224)
HSL
hsl(80, 63%, 93%)
Luminance
0.910

Contrast & accessibility

14 of 36 color pairings meet the WCAG AA contrast threshold (4.5:1) for body text.

Aa #100820 on #F0F8E0 17.82:1 AAA
Aa #381038 on #F0F8E0 14.78:1 AAA
Aa #100820 on #E8D028 12.51:1 AAA
Aa #601840 on #F0F8E0 11.29:1 AAA
Aa #381038 on #E8D028 10.38:1 AAA
Aa #100820 on #F89800 8.80:1 AAA
Aa #601840 on #E8D028 7.92:1 AAA
Aa #381038 on #F89800 7.30:1 AAA
Aa #A01828 on #F0F8E0 7.23:1 AAA
Aa #100820 on #F85800 5.93:1 AA
Aa #601840 on #F89800 5.57:1 AA
Aa #A01828 on #E8D028 5.08:1 AA
Aa #381038 on #F85800 4.92:1 AA
Aa #D02020 on #F0F8E0 4.91:1 AA
Aa #601840 on #F85800 3.75:1 AA Large
Aa #100820 on #D02020 3.63:1 AA Large
Aa #A01828 on #F89800 3.57:1 AA Large
Aa #D02020 on #E8D028 3.45:1 AA Large
Aa #381038 on #D02020 3.01:1 AA Large
Aa #F85800 on #F0F8E0 3.01:1 AA Large
Aa #100820 on #A01828 2.46:1 Fail
Aa #D02020 on #F89800 2.43:1 Fail
Aa #A01828 on #F85800 2.40:1 Fail
Aa #601840 on #D02020 2.30:1 Fail
Aa #F85800 on #E8D028 2.11:1 Fail
Aa #381038 on #A01828 2.04:1 Fail
Aa #F89800 on #F0F8E0 2.03:1 Fail
Aa #D02020 on #F85800 1.63:1 Fail
Aa #100820 on #601840 1.58:1 Fail
Aa #601840 on #A01828 1.56:1 Fail
Aa #F85800 on #F89800 1.48:1 Fail
Aa #A01828 on #D02020 1.47:1 Fail
Aa #F89800 on #E8D028 1.42:1 Fail
Aa #E8D028 on #F0F8E0 1.42:1 Fail
Aa #381038 on #601840 1.31:1 Fail
Aa #100820 on #381038 1.21:1 Fail

Similar palettes

#000000 #3D0000 #950101 #FF0000
4 colors
#E23E57 #88304E #522546 #311D3F
4 colors
#FF204E #A0153E #5D0E41 #00224D
4 colors
#030637 #3C0753 #720455 #910A67
4 colors
#1C0A00 #361500 #603601 #CC9544
4 colors
#252525 #FF0000 #AF0404 #414141
4 colors
#362222 #171010 #423F3E #2B2B2B
4 colors
#1A1A1D #3B1C32 #6A1E55 #A64D79
4 colors