Sign Up Sign Up
Smoke: It's OK To Feel

Smoke: It's OK To Feel

8-color palette · Warm · Mixed · Analogous harmony

Back to Library

Smoke: It's OK To Feel

8-color palette · Warm temperature · Mixed tone · Analogous harmony

Modify
Earthy 8 colors Warm Mixed Analogous
Likes 21
Colors 8

CSS variables

:root {
  --c-earthy-1: #3A1220;
  --c-earthy-2: #532620;
  --c-earthy-3: #784420;
  --c-earthy-4: #9F6624;
  --c-earthy-5: #BC8A45;
  --c-earthy-6: #D8B686;
  --c-earthy-7: #EFE1CC;
  --c-earthy-8: #FFFFFF;
}

About this palette

This 8-color earthy palette runs from White (#FFFFFF) as its lightest tone to Chocolate Kiss (#3A1220) as its darkest. It blends Chocolate Kiss, Torrefacto Roast, Walnut, Stage Gold, Antiquarian Gold, Dubloon, Ivory Stone and White into a single set you can drop straight into a UI. Of its 28 color pairings, 10 meet the WCAG AA contrast threshold (4.5:1) for body text — the strongest is #3A1220 on #FFFFFF at 16.31:1.

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

Color breakdown

Chocolate Kiss #3A1220
RGB
rgb(58, 18, 32)
HSL
hsl(339, 53%, 15%)
Luminance
0.014
Torrefacto Roast #532620
RGB
rgb(83, 38, 32)
HSL
hsl(7, 44%, 23%)
Luminance
0.033
Walnut #784420
RGB
rgb(120, 68, 32)
HSL
hsl(25, 58%, 30%)
Luminance
0.082
Stage Gold #9F6624
RGB
rgb(159, 102, 36)
HSL
hsl(32, 63%, 38%)
Luminance
0.170
Antiquarian Gold #BC8A45
RGB
rgb(188, 138, 69)
HSL
hsl(35, 47%, 50%)
Luminance
0.293
Dubloon #D8B686
RGB
rgb(216, 182, 134)
HSL
hsl(35, 51%, 69%)
Luminance
0.498
Ivory Stone #EFE1CC
RGB
rgb(239, 225, 204)
HSL
hsl(36, 52%, 87%)
Luminance
0.766
White #FFFFFF
RGB
rgb(255, 255, 255)
HSL
hsl(0, 0%, 100%)
Luminance
1.000

Contrast & accessibility

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

Aa #3A1220 on #FFFFFF 16.31:1 AAA
Aa #3A1220 on #EFE1CC 12.67:1 AAA
Aa #532620 on #FFFFFF 12.61:1 AAA
Aa #532620 on #EFE1CC 9.79:1 AAA
Aa #3A1220 on #D8B686 8.51:1 AAA
Aa #784420 on #FFFFFF 7.94:1 AAA
Aa #532620 on #D8B686 6.58:1 AA
Aa #784420 on #EFE1CC 6.16:1 AA
Aa #3A1220 on #BC8A45 5.33:1 AA
Aa #9F6624 on #FFFFFF 4.77:1 AA
Aa #784420 on #D8B686 4.14:1 AA Large
Aa #532620 on #BC8A45 4.12:1 AA Large
Aa #9F6624 on #EFE1CC 3.71:1 AA Large
Aa #3A1220 on #9F6624 3.42:1 AA Large
Aa #BC8A45 on #FFFFFF 3.06:1 AA Large
Aa #532620 on #9F6624 2.64:1 Fail
Aa #784420 on #BC8A45 2.59:1 Fail
Aa #9F6624 on #D8B686 2.49:1 Fail
Aa #BC8A45 on #EFE1CC 2.38:1 Fail
Aa #3A1220 on #784420 2.06:1 Fail
Aa #D8B686 on #FFFFFF 1.92:1 Fail
Aa #784420 on #9F6624 1.66:1 Fail
Aa #BC8A45 on #D8B686 1.60:1 Fail
Aa #532620 on #784420 1.59:1 Fail
Aa #9F6624 on #BC8A45 1.56:1 Fail
Aa #D8B686 on #EFE1CC 1.49:1 Fail
Aa #3A1220 on #532620 1.29:1 Fail
Aa #EFE1CC on #FFFFFF 1.29: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