Sign Up Sign Up
Old Sch8l

Old Sch8l

8-color palette · Cool · Dark · Complementary harmony

Back to Library

Old Sch8l

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

Modify
Muted 8 colors Cool Dark Complementary retro
Likes 13
Colors 8

CSS variables

:root {
  --c-muted-1: #000000;
  --c-muted-2: #333300;
  --c-muted-3: #993300;
  --c-muted-4: #6666CC;
  --c-muted-5: #003366;
  --c-muted-6: #339933;
  --c-muted-7: #999933;
  --c-muted-8: #CCCCCC;
}

About this palette

This 8-color muted palette runs from Cerebral Grey (#CCCCCC) as its lightest tone to Black (#000000) as its darkest. It blends Black, Wasabi Nori, Chocoholic, Dark Periwinkle, Prussian Blue, Putting Green, Appletini and Cerebral Grey into a single set you can drop straight into a UI. Of its 28 color pairings, 6 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #000000 on #CCCCCC at 13.08:1.

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

Color breakdown

Black #000000
RGB
rgb(0, 0, 0)
HSL
hsl(0, 0%, 0%)
Luminance
0.000
Wasabi Nori #333300
RGB
rgb(51, 51, 0)
HSL
hsl(60, 100%, 10%)
Luminance
0.031
Chocoholic #993300
RGB
rgb(153, 51, 0)
HSL
hsl(20, 100%, 30%)
Luminance
0.091
Dark Periwinkle #6666CC
RGB
rgb(102, 102, 204)
HSL
hsl(240, 50%, 60%)
Luminance
0.167
Prussian Blue #003366
RGB
rgb(0, 51, 102)
HSL
hsl(210, 100%, 20%)
Luminance
0.033
Putting Green #339933
RGB
rgb(51, 153, 51)
HSL
hsl(120, 50%, 40%)
Luminance
0.237
Appletini #999933
RGB
rgb(153, 153, 51)
HSL
hsl(60, 50%, 40%)
Luminance
0.298
Cerebral Grey #CCCCCC
RGB
rgb(204, 204, 204)
HSL
hsl(0, 0%, 80%)
Luminance
0.604

Contrast & accessibility

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

Aa #000000 on #CCCCCC 13.08:1 AAA
Aa #333300 on #CCCCCC 8.10:1 AAA
Aa #003366 on #CCCCCC 7.85:1 AAA
Aa #000000 on #999933 6.96:1 AA
Aa #000000 on #339933 5.75:1 AA
Aa #993300 on #CCCCCC 4.62:1 AA
Aa #000000 on #6666CC 4.34:1 AA Large
Aa #333300 on #999933 4.31:1 AA Large
Aa #003366 on #999933 4.18:1 AA Large
Aa #333300 on #339933 3.56:1 AA Large
Aa #003366 on #339933 3.45:1 AA Large
Aa #6666CC on #CCCCCC 3.01:1 AA Large
Aa #000000 on #993300 2.83:1 Fail
Aa #333300 on #6666CC 2.69:1 Fail
Aa #6666CC on #003366 2.60:1 Fail
Aa #993300 on #999933 2.46:1 Fail
Aa #339933 on #CCCCCC 2.28:1 Fail
Aa #993300 on #339933 2.03:1 Fail
Aa #999933 on #CCCCCC 1.88:1 Fail
Aa #333300 on #993300 1.75:1 Fail
Aa #993300 on #003366 1.70:1 Fail
Aa #000000 on #003366 1.67:1 Fail
Aa #000000 on #333300 1.61:1 Fail
Aa #6666CC on #999933 1.60:1 Fail
Aa #993300 on #6666CC 1.53:1 Fail
Aa #6666CC on #339933 1.32:1 Fail
Aa #339933 on #999933 1.21:1 Fail
Aa #333300 on #003366 1.03: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