Sign Up Sign Up
Shock'N'Gore

Shock'N'Gore

10-color palette · Warm · Mixed · Complementary harmony

Back to Library

Shock'N'Gore

10-color palette · Warm temperature · Mixed tone · Complementary harmony

Modify
Earthy 10 colors Warm Mixed Complementary red blue purple cyan
Likes 13
Colors 10

CSS variables

:root {
  --c-earthy-1: #99657A;
  --c-earthy-2: #85433C;
  --c-earthy-3: #2E0F13;
  --c-earthy-4: #57344D;
  --c-earthy-5: #695C80;
  --c-earthy-6: #7B85B0;
  --c-earthy-7: #84B2E0;
  --c-earthy-8: #5FA6C7;
  --c-earthy-9: #5D8FA1;
  --c-earthy-10: #BBD4ED;
}

About this palette

This 10-color earthy palette runs from Summer Birthday (#BBD4ED) as its lightest tone to Dark Danger (#2E0F13) as its darkest. It blends Mellow Mauve, Strawberry Jam, Dark Danger, Italian Plum, Napa Winery, Corsican Purple, Dun Morogh Blue, Ethereal Blue, Georgian Revival Blue and Summer Birthday into a single set you can drop straight into a UI. Of its 45 color pairings, 8 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #2E0F13 on #BBD4ED at 11.52:1.

Grounded, natural tones — suits sustainability/organic brands, coffee shops, outdoor gear, and warm editorial typography.

Color breakdown

Mellow Mauve #99657A
RGB
rgb(153, 101, 122)
HSL
hsl(336, 20%, 50%)
Luminance
0.175
Strawberry Jam #85433C
RGB
rgb(133, 67, 60)
HSL
hsl(6, 38%, 38%)
Luminance
0.093
Dark Danger #2E0F13
RGB
rgb(46, 15, 19)
HSL
hsl(352, 51%, 12%)
Luminance
0.010
Italian Plum #57344D
RGB
rgb(87, 52, 77)
HSL
hsl(317, 25%, 27%)
Luminance
0.050
Napa Winery #695C80
RGB
rgb(105, 92, 128)
HSL
hsl(262, 16%, 43%)
Luminance
0.122
Corsican Purple #7B85B0
RGB
rgb(123, 133, 176)
HSL
hsl(229, 25%, 59%)
Luminance
0.241
Dun Morogh Blue #84B2E0
RGB
rgb(132, 178, 224)
HSL
hsl(210, 60%, 70%)
Luminance
0.421
Ethereal Blue #5FA6C7
RGB
rgb(95, 166, 199)
HSL
hsl(199, 48%, 58%)
Luminance
0.338
Georgian Revival Blue #5D8FA1
RGB
rgb(93, 143, 161)
HSL
hsl(196, 27%, 50%)
Luminance
0.246
Summer Birthday #BBD4ED
RGB
rgb(187, 212, 237)
HSL
hsl(210, 58%, 83%)
Luminance
0.638

Contrast & accessibility

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

Aa #2E0F13 on #BBD4ED 11.52:1 AAA
Aa #2E0F13 on #84B2E0 7.89:1 AAA
Aa #57344D on #BBD4ED 6.86:1 AA
Aa #2E0F13 on #5FA6C7 6.50:1 AA
Aa #2E0F13 on #5D8FA1 4.95:1 AA
Aa #2E0F13 on #7B85B0 4.88:1 AA
Aa #85433C on #BBD4ED 4.80:1 AA
Aa #57344D on #84B2E0 4.70:1 AA
Aa #695C80 on #BBD4ED 3.99:1 AA Large
Aa #57344D on #5FA6C7 3.88:1 AA Large
Aa #99657A on #2E0F13 3.77:1 AA Large
Aa #85433C on #84B2E0 3.29:1 AA Large
Aa #99657A on #BBD4ED 3.06:1 AA Large
Aa #57344D on #5D8FA1 2.95:1 Fail
Aa #57344D on #7B85B0 2.91:1 Fail
Aa #2E0F13 on #695C80 2.88:1 Fail
Aa #695C80 on #84B2E0 2.74:1 Fail
Aa #85433C on #5FA6C7 2.71:1 Fail
Aa #85433C on #2E0F13 2.40:1 Fail
Aa #7B85B0 on #BBD4ED 2.36:1 Fail
Aa #5D8FA1 on #BBD4ED 2.33:1 Fail
Aa #695C80 on #5FA6C7 2.26:1 Fail
Aa #99657A on #57344D 2.24:1 Fail
Aa #99657A on #84B2E0 2.10:1 Fail
Aa #85433C on #5D8FA1 2.06:1 Fail
Aa #85433C on #7B85B0 2.03:1 Fail
Aa #5FA6C7 on #BBD4ED 1.77:1 Fail
Aa #99657A on #5FA6C7 1.73:1 Fail
Aa #57344D on #695C80 1.72:1 Fail
Aa #695C80 on #5D8FA1 1.72:1 Fail
Aa #695C80 on #7B85B0 1.69:1 Fail
Aa #2E0F13 on #57344D 1.68:1 Fail
Aa #7B85B0 on #84B2E0 1.62:1 Fail
Aa #84B2E0 on #5D8FA1 1.60:1 Fail
Aa #99657A on #85433C 1.57:1 Fail
Aa #84B2E0 on #BBD4ED 1.46:1 Fail
Aa #85433C on #57344D 1.43:1 Fail
Aa #7B85B0 on #5FA6C7 1.33:1 Fail
Aa #99657A on #695C80 1.31:1 Fail
Aa #99657A on #5D8FA1 1.31:1 Fail
Aa #5FA6C7 on #5D8FA1 1.31:1 Fail
Aa #99657A on #7B85B0 1.30:1 Fail
Aa #84B2E0 on #5FA6C7 1.21:1 Fail
Aa #85433C on #695C80 1.20:1 Fail
Aa #7B85B0 on #5D8FA1 1.01:1 Fail

Similar palettes

#F9ED69 #F08A5D #B83B5E #6A2C70
4 colors
#7D5A50 #B4846C #E5B299 #FCDEC0
4 colors
#FFF8EA #9E7676 #815B5B #594545
4 colors
#2C3639 #3F4E4F #A27B5C #DCD7C9
4 colors
#F67280 #C06C84 #6C5B7B #355C7D
4 colors
#2B2E4A #E84545 #903749 #53354A
4 colors
#E5D9B6 #A4BE7B #5F8D4E #285430
4 colors
#A9907E #F3DEBA #ABC4AA #675D50
4 colors