Sign Up Sign Up
Village House

Village House

12-color palette · Warm · Dark · Analogous harmony

Back to Library

Village House

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

Modify
Earthy 12 colors Warm Dark Analogous green retro gloomy 12colors
Likes 51
Colors 12

CSS variables

:root {
  --c-earthy-1: #24180A;
  --c-earthy-2: #323232;
  --c-earthy-3: #612721;
  --c-earthy-4: #334A08;
  --c-earthy-5: #526415;
  --c-earthy-6: #595757;
  --c-earthy-7: #8C5B3E;
  --c-earthy-8: #7F8E44;
  --c-earthy-9: #D39741;
  --c-earthy-10: #87738F;
  --c-earthy-11: #8AC4C3;
  --c-earthy-12: #FFFFFF;
}

About this palette

This 12-color earthy palette runs from White (#FFFFFF) as its lightest tone to Cannon Black (#24180A) as its darkest. It blends Cannon Black, Tomcat, Chestnut Leather, Godzilla, Forestial Outpost, Charcoal Dust, Rope, Komatsuna Green, Bugle Call, Greyish Purple, Enchanted Isle and White into a single set you can drop straight into a UI. Of its 66 color pairings, 15 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #24180A on #FFFFFF at 17.35:1.

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

Color breakdown

Cannon Black #24180A
RGB
rgb(36, 24, 10)
HSL
hsl(32, 57%, 9%)
Luminance
0.011
Tomcat #323232
RGB
rgb(50, 50, 50)
HSL
hsl(0, 0%, 20%)
Luminance
0.032
Chestnut Leather #612721
RGB
rgb(97, 39, 33)
HSL
hsl(6, 49%, 25%)
Luminance
0.041
Godzilla #334A08
RGB
rgb(51, 74, 8)
HSL
hsl(81, 80%, 16%)
Luminance
0.056
Forestial Outpost #526415
RGB
rgb(82, 100, 21)
HSL
hsl(74, 65%, 24%)
Luminance
0.110
Charcoal Dust #595757
RGB
rgb(89, 87, 87)
HSL
hsl(0, 1%, 35%)
Luminance
0.096
Rope #8C5B3E
RGB
rgb(140, 91, 62)
HSL
hsl(22, 39%, 40%)
Luminance
0.134
Komatsuna Green #7F8E44
RGB
rgb(127, 142, 68)
HSL
hsl(72, 35%, 41%)
Luminance
0.243
Bugle Call #D39741
RGB
rgb(211, 151, 65)
HSL
hsl(35, 62%, 54%)
Luminance
0.364
Greyish Purple #87738F
RGB
rgb(135, 115, 143)
HSL
hsl(283, 11%, 51%)
Luminance
0.194
Enchanted Isle #8AC4C3
RGB
rgb(138, 196, 195)
HSL
hsl(179, 33%, 65%)
Luminance
0.488
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000

Contrast & accessibility

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

Aa #24180A on #FFFFFF 17.35:1 AAA
Aa #323232 on #FFFFFF 12.82:1 AAA
Aa #612721 on #FFFFFF 11.54:1 AAA
Aa #334A08 on #FFFFFF 9.89:1 AAA
Aa #24180A on #8AC4C3 8.90:1 AAA
Aa #595757 on #FFFFFF 7.18:1 AAA
Aa #24180A on #D39741 6.84:1 AA
Aa #526415 on #FFFFFF 6.58:1 AA
Aa #323232 on #8AC4C3 6.57:1 AA
Aa #612721 on #8AC4C3 5.91:1 AA
Aa #8C5B3E on #FFFFFF 5.70:1 AA
Aa #334A08 on #8AC4C3 5.07:1 AA
Aa #323232 on #D39741 5.05:1 AA
Aa #24180A on #7F8E44 4.84:1 AA
Aa #612721 on #D39741 4.54:1 AA
Aa #87738F on #FFFFFF 4.30:1 AA Large
Aa #24180A on #87738F 4.03:1 AA Large
Aa #334A08 on #D39741 3.90:1 AA Large
Aa #595757 on #8AC4C3 3.68:1 AA Large
Aa #7F8E44 on #FFFFFF 3.59:1 AA Large
Aa #323232 on #7F8E44 3.57:1 AA Large
Aa #526415 on #8AC4C3 3.37:1 AA Large
Aa #612721 on #7F8E44 3.22:1 AA Large
Aa #24180A on #8C5B3E 3.04:1 AA Large
Aa #323232 on #87738F 2.98:1 Fail
Aa #8C5B3E on #8AC4C3 2.92:1 Fail
Aa #595757 on #D39741 2.83:1 Fail
Aa #334A08 on #7F8E44 2.76:1 Fail
Aa #612721 on #87738F 2.68:1 Fail
Aa #24180A on #526415 2.64:1 Fail
Aa #526415 on #D39741 2.59:1 Fail
Aa #D39741 on #FFFFFF 2.54:1 Fail
Aa #24180A on #595757 2.42:1 Fail
Aa #334A08 on #87738F 2.30:1 Fail
Aa #323232 on #8C5B3E 2.25:1 Fail
Aa #8C5B3E on #D39741 2.25:1 Fail
Aa #87738F on #8AC4C3 2.21:1 Fail
Aa #612721 on #8C5B3E 2.02:1 Fail
Aa #595757 on #7F8E44 2.00:1 Fail
Aa #323232 on #526415 1.95:1 Fail
Aa #8AC4C3 on #FFFFFF 1.95:1 Fail
Aa #7F8E44 on #8AC4C3 1.84:1 Fail
Aa #526415 on #7F8E44 1.83:1 Fail
Aa #323232 on #595757 1.79:1 Fail
Aa #24180A on #334A08 1.76:1 Fail
Aa #612721 on #526415 1.75:1 Fail
Aa #334A08 on #8C5B3E 1.73:1 Fail
Aa #D39741 on #87738F 1.70:1 Fail
Aa #595757 on #87738F 1.67:1 Fail
Aa #612721 on #595757 1.61:1 Fail
Aa #8C5B3E on #7F8E44 1.59:1 Fail
Aa #526415 on #87738F 1.53:1 Fail
Aa #24180A on #612721 1.50:1 Fail
Aa #334A08 on #526415 1.50:1 Fail
Aa #7F8E44 on #D39741 1.41:1 Fail
Aa #334A08 on #595757 1.38:1 Fail
Aa #24180A on #323232 1.35:1 Fail
Aa #8C5B3E on #87738F 1.33:1 Fail
Aa #323232 on #334A08 1.30:1 Fail
Aa #D39741 on #8AC4C3 1.30:1 Fail
Aa #595757 on #8C5B3E 1.26:1 Fail
Aa #7F8E44 on #87738F 1.20:1 Fail
Aa #612721 on #334A08 1.17:1 Fail
Aa #526415 on #8C5B3E 1.15:1 Fail
Aa #323232 on #612721 1.11:1 Fail
Aa #526415 on #595757 1.09: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