Mystic Forest — 5-color palette
#2C4A3E#5A7A5E#A8C09A#F0E5C9#8B4513Hex codes
Hex
#2C4A3E
RGB
44, 74, 62
HSL
156°, 25%, 23%
Hex
#5A7A5E
RGB
90, 122, 94
HSL
128°, 15%, 42%
Hex
#A8C09A
RGB
168, 192, 154
HSL
98°, 23%, 68%
Hex
#F0E5C9
RGB
240, 229, 201
HSL
43°, 57%, 86%
Hex
#8B4513
RGB
139, 69, 19
HSL
25°, 76%, 31%
How to use this palette
The first color in Mystic Forest is the dominant tone — use it for primary surfaces and backgrounds. The middle three are the supporting palette: one warm, one cool, one neutral. The last is the accent — reserve it for highlights, calls-to-action, and emphasis.
For web projects, copy the CSS variables below. For print or illustration, use the hex codes directly. If you’re designing for accessibility, check the contrast between the text and background colors before you ship.
CSS
:root {
--mystic-forest-1: #2C4A3E;
--mystic-forest-2: #5A7A5E;
--mystic-forest-3: #A8C09A;
--mystic-forest-4: #F0E5C9;
--mystic-forest-5: #8B4513;
}