Sign Up Sign Up
Sunfall

Sunfall

10-color palette · Cool · Dark · Complementary harmony

Back to Library

Sunfall

10-color palette · Cool temperature · Dark tone · Complementary harmony

Modify
Muted 10 colors Cool Dark Complementary orange fire torch torchlight
Likes 92
Colors 10

CSS variables

:root {
  --c-muted-1: #000809;
  --c-muted-2: #021423;
  --c-muted-3: #09243B;
  --c-muted-4: #2A415A;
  --c-muted-5: #586279;
  --c-muted-6: #B43B28;
  --c-muted-7: #D45211;
  --c-muted-8: #FF9537;
  --c-muted-9: #FFD4A3;
  --c-muted-10: #FFECD6;
}

About this palette

This 10-color muted palette runs from Crushed Cashew (#FFECD6) as its lightest tone to Eight Ball (#000809) as its darkest. It blends Eight Ball, Creeping Death, Celestial Canvas, Blue Tone Ink, Nightly, Bricky Brick, Hot Bolognese, Energy Orange, Sherbet Pop and Crushed Cashew into a single set you can drop straight into a UI. Of its 45 color pairings, 15 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000809 on #FFECD6 at 17.54:1.

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

Color breakdown

Eight Ball #000809
RGB
rgb(0, 8, 9)
HSL
hsl(187, 100%, 2%)
Luminance
0.002
Creeping Death #021423
RGB
rgb(2, 20, 35)
HSL
hsl(207, 89%, 7%)
Luminance
0.006
Celestial Canvas #09243B
RGB
rgb(9, 36, 59)
HSL
hsl(208, 74%, 13%)
Luminance
0.016
Blue Tone Ink #2A415A
RGB
rgb(42, 65, 90)
HSL
hsl(211, 36%, 26%)
Luminance
0.050
Nightly #586279
RGB
rgb(88, 98, 121)
HSL
hsl(222, 16%, 41%)
Luminance
0.122
Bricky Brick #B43B28
RGB
rgb(180, 59, 40)
HSL
hsl(8, 64%, 43%)
Luminance
0.130
Hot Bolognese #D45211
RGB
rgb(212, 82, 17)
HSL
hsl(20, 85%, 45%)
Luminance
0.201
Energy Orange #FF9537
RGB
rgb(255, 149, 55)
HSL
hsl(28, 100%, 61%)
Luminance
0.430
Sherbet Pop #FFD4A3
RGB
rgb(255, 212, 163)
HSL
hsl(32, 100%, 82%)
Luminance
0.710
Crushed Cashew #FFECD6
RGB
rgb(255, 236, 214)
HSL
hsl(32, 100%, 92%)
Luminance
0.861

Contrast & accessibility

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

Aa #000809 on #FFECD6 17.54:1 AAA
Aa #021423 on #FFECD6 16.17:1 AAA
Aa #000809 on #FFD4A3 14.63:1 AAA
Aa #09243B on #FFECD6 13.73:1 AAA
Aa #021423 on #FFD4A3 13.49:1 AAA
Aa #09243B on #FFD4A3 11.45:1 AAA
Aa #000809 on #FF9537 9.25:1 AAA
Aa #2A415A on #FFECD6 9.10:1 AAA
Aa #021423 on #FF9537 8.52:1 AAA
Aa #2A415A on #FFD4A3 7.59:1 AAA
Aa #09243B on #FF9537 7.24:1 AAA
Aa #586279 on #FFECD6 5.30:1 AA
Aa #B43B28 on #FFECD6 5.07:1 AA
Aa #000809 on #D45211 4.83:1 AA
Aa #2A415A on #FF9537 4.80:1 AA
Aa #021423 on #D45211 4.45:1 AA Large
Aa #586279 on #FFD4A3 4.42:1 AA Large
Aa #B43B28 on #FFD4A3 4.23:1 AA Large
Aa #09243B on #D45211 3.78:1 AA Large
Aa #D45211 on #FFECD6 3.63:1 AA Large
Aa #000809 on #B43B28 3.46:1 AA Large
Aa #000809 on #586279 3.31:1 AA Large
Aa #021423 on #B43B28 3.19:1 AA Large
Aa #021423 on #586279 3.05:1 AA Large
Aa #D45211 on #FFD4A3 3.03:1 AA Large
Aa #586279 on #FF9537 2.79:1 Fail
Aa #09243B on #B43B28 2.71:1 Fail
Aa #B43B28 on #FF9537 2.67:1 Fail
Aa #09243B on #586279 2.59:1 Fail
Aa #2A415A on #D45211 2.50:1 Fail
Aa #000809 on #2A415A 1.93:1 Fail
Aa #D45211 on #FF9537 1.92:1 Fail
Aa #FF9537 on #FFECD6 1.90:1 Fail
Aa #2A415A on #B43B28 1.80:1 Fail
Aa #021423 on #2A415A 1.78:1 Fail
Aa #2A415A on #586279 1.72:1 Fail
Aa #FF9537 on #FFD4A3 1.58:1 Fail
Aa #09243B on #2A415A 1.51:1 Fail
Aa #586279 on #D45211 1.46:1 Fail
Aa #B43B28 on #D45211 1.39:1 Fail
Aa #000809 on #09243B 1.28:1 Fail
Aa #FFD4A3 on #FFECD6 1.20:1 Fail
Aa #021423 on #09243B 1.18:1 Fail
Aa #000809 on #021423 1.08:1 Fail
Aa #586279 on #B43B28 1.05:1 Fail

Similar palettes

#212121 #323232 #0D7377 #14FFEC
4 colors
#0A2647 #144272 #205295 #2C74B3
4 colors
#040D12 #183D3D #5C8374 #93B1A6
4 colors
#142850 #27496D #0C7B93 #00A8CC
4 colors
#635985 #443C68 #393053 #18122B
4 colors
#000000 #150050 #3F0071 #610094
4 colors
#151515 #301B3F #3C415C #B4A5A5
4 colors
#041C32 #04293A #064663 #ECB365
4 colors