Misty Forest Color Palette
Deep enchanted woodland seen through fog — pale grey-green mist, sage and fern, mossy mid-greens, near-black pine, and damp bark shadow. The cool, low-saturation greens read as atmosphere and depth, perfect for layering distance into a forest or hiding something in the trees. Quietly magical rather than cheerful.
Get Paintrix free on the App Store.
Download
Hex codes
Color theory
Base
Complement
Analogous −30°
Analogous +30°
Triadic
Use it for
Code formats
CSS
:root {
--misty-forest-1: #DDE5DE;
--misty-forest-2: #C8D4CB;
--misty-forest-3: #B2C2B6;
--misty-forest-4: #9CB0A1;
--misty-forest-5: #869D8C;
--misty-forest-6: #728A78;
--misty-forest-7: #9BB089;
--misty-forest-8: #89A077;
--misty-forest-9: #779066;
--misty-forest-10: #668056;
--misty-forest-11: #557047;
--misty-forest-12: #456039;
--misty-forest-13: #5E7048;
--misty-forest-14: #52623E;
--misty-forest-15: #475535;
--misty-forest-16: #3C482C;
--misty-forest-17: #323C24;
--misty-forest-18: #28301C;
--misty-forest-19: #2C4A3A;
--misty-forest-20: #264033;
--misty-forest-21: #20362B;
--misty-forest-22: #1B2C24;
--misty-forest-23: #15221C;
--misty-forest-24: #101A15;
--misty-forest-25: #4A4038;
--misty-forest-26: #3F362F;
--misty-forest-27: #342D27;
--misty-forest-28: #2A241F;
--misty-forest-29: #201C18;
--misty-forest-30: #171411;
}SCSS
$misty-forest-1: #DDE5DE;
$misty-forest-2: #C8D4CB;
$misty-forest-3: #B2C2B6;
$misty-forest-4: #9CB0A1;
$misty-forest-5: #869D8C;
$misty-forest-6: #728A78;
$misty-forest-7: #9BB089;
$misty-forest-8: #89A077;
$misty-forest-9: #779066;
$misty-forest-10: #668056;
$misty-forest-11: #557047;
$misty-forest-12: #456039;
$misty-forest-13: #5E7048;
$misty-forest-14: #52623E;
$misty-forest-15: #475535;
$misty-forest-16: #3C482C;
$misty-forest-17: #323C24;
$misty-forest-18: #28301C;
$misty-forest-19: #2C4A3A;
$misty-forest-20: #264033;
$misty-forest-21: #20362B;
$misty-forest-22: #1B2C24;
$misty-forest-23: #15221C;
$misty-forest-24: #101A15;
$misty-forest-25: #4A4038;
$misty-forest-26: #3F362F;
$misty-forest-27: #342D27;
$misty-forest-28: #2A241F;
$misty-forest-29: #201C18;
$misty-forest-30: #171411;Tailwind
// tailwind.config.js
module.exports = {
theme: {
extend: {
colors: {
'misty-forest': {
'1': '#DDE5DE',
'2': '#C8D4CB',
'3': '#B2C2B6',
'4': '#9CB0A1',
'5': '#869D8C',
'6': '#728A78',
'7': '#9BB089',
'8': '#89A077',
'9': '#779066',
'10': '#668056',
'11': '#557047',
'12': '#456039',
'13': '#5E7048',
'14': '#52623E',
'15': '#475535',
'16': '#3C482C',
'17': '#323C24',
'18': '#28301C',
'19': '#2C4A3A',
'20': '#264033',
'21': '#20362B',
'22': '#1B2C24',
'23': '#15221C',
'24': '#101A15',
'25': '#4A4038',
'26': '#3F362F',
'27': '#342D27',
'28': '#2A241F',
'29': '#201C18',
'30': '#171411',
},
},
},
},
};JSON
{
"name": "Misty Forest",
"colors": [
"#DDE5DE",
"#C8D4CB",
"#B2C2B6",
"#9CB0A1",
"#869D8C",
"#728A78",
"#9BB089",
"#89A077",
"#779066",
"#668056",
"#557047",
"#456039",
"#5E7048",
"#52623E",
"#475535",
"#3C482C",
"#323C24",
"#28301C",
"#2C4A3A",
"#264033",
"#20362B",
"#1B2C24",
"#15221C",
"#101A15",
"#4A4038",
"#3F362F",
"#342D27",
"#2A241F",
"#201C18",
"#171411"
]
}Hex list
#DDE5DE
#C8D4CB
#B2C2B6
#9CB0A1
#869D8C
#728A78
#9BB089
#89A077
#779066
#668056
#557047
#456039
#5E7048
#52623E
#475535
#3C482C
#323C24
#28301C
#2C4A3A
#264033
#20362B
#1B2C24
#15221C
#101A15
#4A4038
#3F362F
#342D27
#2A241F
#201C18
#171411