Sign Up Sign Up
Tetsuo

Tetsuo

12-color palette · Warm · Dark · Complementary harmony

Back to Library

Tetsuo

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

Modify
Muted 12 colors Warm Dark Complementary manga anime mierdinsky comic
Likes 19
Colors 12

CSS variables

:root {
  --c-muted-1: #330033;
  --c-muted-2: #303030;
  --c-muted-3: #754402;
  --c-muted-4: #2A5B5B;
  --c-muted-5: #009999;
  --c-muted-6: #AA0000;
  --c-muted-7: #8F5F30;
  --c-muted-8: #696969;
  --c-muted-9: #BA5D2F;
  --c-muted-10: #996666;
  --c-muted-11: #CC9966;
  --c-muted-12: #FFCC66;
}

About this palette

This 12-color muted palette runs from Qing Yellow (#FFCC66) as its lightest tone to Exquisite Eggplant (#330033) as its darkest. It blends Exquisite Eggplant, Off Black, Dusky Brown, Bayberry, Regula Barbara Blue, Heartbeat, Rusty Coin, Dim Grey, Gold Varnish Brown, Copper Rose, Oak Buff and Qing Yellow into a single set you can drop straight into a UI. Of its 66 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #330033 on #FFCC66 at 11.85:1.

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

Color breakdown

Exquisite Eggplant #330033
RGB
rgb(51, 0, 51)
HSL
hsl(300, 100%, 10%)
Luminance
0.009
Off Black #303030
RGB
rgb(48, 48, 48)
HSL
hsl(0, 0%, 19%)
Luminance
0.030
Dusky Brown #754402
RGB
rgb(117, 68, 2)
HSL
hsl(34, 97%, 23%)
Luminance
0.079
Bayberry #2A5B5B
RGB
rgb(42, 91, 91)
HSL
hsl(180, 37%, 26%)
Luminance
0.087
Regula Barbara Blue #009999
RGB
rgb(0, 153, 153)
HSL
hsl(180, 100%, 30%)
Luminance
0.251
Heartbeat #AA0000
RGB
rgb(170, 0, 0)
HSL
hsl(0, 100%, 33%)
Luminance
0.086
Rusty Coin #8F5F30
RGB
rgb(143, 95, 48)
HSL
hsl(30, 50%, 37%)
Luminance
0.142
Dim Grey #696969
RGB
rgb(105, 105, 105)
HSL
hsl(0, 0%, 41%)
Luminance
0.141
Gold Varnish Brown #BA5D2F
RGB
rgb(186, 93, 47)
HSL
hsl(20, 60%, 46%)
Luminance
0.185
Copper Rose #996666
RGB
rgb(153, 102, 102)
HSL
hsl(0, 20%, 50%)
Luminance
0.172
Oak Buff #CC9966
RGB
rgb(204, 153, 102)
HSL
hsl(30, 50%, 60%)
Luminance
0.366
Qing Yellow #FFCC66
RGB
rgb(255, 204, 102)
HSL
hsl(40, 100%, 70%)
Luminance
0.654

Contrast & accessibility

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

Aa #330033 on #FFCC66 11.85:1 AAA
Aa #303030 on #FFCC66 8.85:1 AAA
Aa #330033 on #CC9966 7.00:1 AAA
Aa #754402 on #FFCC66 5.45:1 AA
Aa #303030 on #CC9966 5.23:1 AA
Aa #AA0000 on #FFCC66 5.20:1 AA
Aa #2A5B5B on #FFCC66 5.13:1 AA
Aa #330033 on #009999 5.06:1 AA
Aa #330033 on #BA5D2F 3.95:1 AA Large
Aa #303030 on #009999 3.78:1 AA Large
Aa #330033 on #996666 3.74:1 AA Large
Aa #696969 on #FFCC66 3.68:1 AA Large
Aa #8F5F30 on #FFCC66 3.66:1 AA Large
Aa #330033 on #8F5F30 3.24:1 AA Large
Aa #330033 on #696969 3.22:1 AA Large
Aa #754402 on #CC9966 3.22:1 AA Large
Aa #996666 on #FFCC66 3.17:1 AA Large
Aa #AA0000 on #CC9966 3.07:1 AA Large
Aa #2A5B5B on #CC9966 3.03:1 AA Large
Aa #BA5D2F on #FFCC66 3.00:1 AA Large
Aa #303030 on #BA5D2F 2.95:1 Fail
Aa #303030 on #996666 2.79:1 Fail
Aa #303030 on #8F5F30 2.42:1 Fail
Aa #303030 on #696969 2.40:1 Fail
Aa #009999 on #FFCC66 2.34:1 Fail
Aa #754402 on #009999 2.33:1 Fail
Aa #330033 on #2A5B5B 2.31:1 Fail
Aa #330033 on #AA0000 2.28:1 Fail
Aa #009999 on #AA0000 2.22:1 Fail
Aa #2A5B5B on #009999 2.19:1 Fail
Aa #330033 on #754402 2.17:1 Fail
Aa #696969 on #CC9966 2.17:1 Fail
Aa #8F5F30 on #CC9966 2.16:1 Fail
Aa #996666 on #CC9966 1.87:1 Fail
Aa #754402 on #BA5D2F 1.82:1 Fail
Aa #BA5D2F on #CC9966 1.77:1 Fail
Aa #303030 on #2A5B5B 1.73:1 Fail
Aa #AA0000 on #BA5D2F 1.73:1 Fail
Aa #754402 on #996666 1.72:1 Fail
Aa #2A5B5B on #BA5D2F 1.71:1 Fail
Aa #303030 on #AA0000 1.70:1 Fail
Aa #CC9966 on #FFCC66 1.69:1 Fail
Aa #AA0000 on #996666 1.64:1 Fail
Aa #303030 on #754402 1.62:1 Fail
Aa #2A5B5B on #996666 1.62:1 Fail
Aa #009999 on #696969 1.57:1 Fail
Aa #009999 on #8F5F30 1.56:1 Fail
Aa #754402 on #8F5F30 1.49:1 Fail
Aa #754402 on #696969 1.48:1 Fail
Aa #AA0000 on #8F5F30 1.42:1 Fail
Aa #AA0000 on #696969 1.41:1 Fail
Aa #2A5B5B on #8F5F30 1.40:1 Fail
Aa #2A5B5B on #696969 1.39:1 Fail
Aa #009999 on #CC9966 1.38:1 Fail
Aa #009999 on #996666 1.35:1 Fail
Aa #330033 on #303030 1.34:1 Fail
Aa #009999 on #BA5D2F 1.28:1 Fail
Aa #696969 on #BA5D2F 1.23:1 Fail
Aa #8F5F30 on #BA5D2F 1.22:1 Fail
Aa #8F5F30 on #996666 1.16:1 Fail
Aa #696969 on #996666 1.16:1 Fail
Aa #754402 on #2A5B5B 1.06:1 Fail
Aa #BA5D2F on #996666 1.06:1 Fail
Aa #754402 on #AA0000 1.05:1 Fail
Aa #2A5B5B on #AA0000 1.01:1 Fail
Aa #8F5F30 on #696969 1.01: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