Sign Up Sign Up
Mocha

Mocha

6-color palette · Warm · Mixed · Monochromatic harmony

Back to Library

Mocha

6-color palette · Warm temperature · Mixed tone · Monochromatic harmony

Modify
Earthy 6 colors Warm Mixed Monochromatic 6 chocolate spacesandwich coffee
Likes 54
Colors 6

CSS variables

:root {
  --c-earthy-1: #20130E;
  --c-earthy-2: #4C2C21;
  --c-earthy-3: #78462C;
  --c-earthy-4: #AB6C46;
  --c-earthy-5: #D19E79;
  --c-earthy-6: #F2E3C3;
}

About this palette

This 6-color earthy palette runs from Cameo Cream (#F2E3C3) as its lightest tone to Bighorn Sheep (#20130E) as its darkest. It blends Bighorn Sheep, Couch, Bull Shot, Auric Copper, Darling Clementine and Cameo Cream into a single set you can drop straight into a UI. Of its 15 color pairings, 5 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #20130E on #F2E3C3 at 14.26:1.

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

Color breakdown

Bighorn Sheep #20130E
RGB
rgb(32, 19, 14)
HSL
hsl(17, 39%, 9%)
Luminance
0.008
Couch #4C2C21
RGB
rgb(76, 44, 33)
HSL
hsl(15, 39%, 21%)
Luminance
0.035
Bull Shot #78462C
RGB
rgb(120, 70, 44)
HSL
hsl(21, 46%, 32%)
Luminance
0.086
Auric Copper #AB6C46
RGB
rgb(171, 108, 70)
HSL
hsl(23, 42%, 47%)
Luminance
0.198
Darling Clementine #D19E79
RGB
rgb(209, 158, 121)
HSL
hsl(25, 49%, 65%)
Luminance
0.394
Cameo Cream #F2E3C3
RGB
rgb(242, 227, 195)
HSL
hsl(41, 64%, 86%)
Luminance
0.778

Contrast & accessibility

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

Aa #20130E on #F2E3C3 14.26:1 AAA
Aa #4C2C21 on #F2E3C3 9.80:1 AAA
Aa #20130E on #D19E79 7.65:1 AAA
Aa #78462C on #F2E3C3 6.11:1 AA
Aa #4C2C21 on #D19E79 5.25:1 AA
Aa #20130E on #AB6C46 4.28:1 AA Large
Aa #AB6C46 on #F2E3C3 3.33:1 AA Large
Aa #78462C on #D19E79 3.27:1 AA Large
Aa #4C2C21 on #AB6C46 2.94:1 Fail
Aa #20130E on #78462C 2.34:1 Fail
Aa #D19E79 on #F2E3C3 1.86:1 Fail
Aa #78462C on #AB6C46 1.83:1 Fail
Aa #AB6C46 on #D19E79 1.79:1 Fail
Aa #4C2C21 on #78462C 1.60:1 Fail
Aa #20130E on #4C2C21 1.46: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