Melancholy — 5-color palette
#8B9DC3#C9B6D9#E6B5B5#9D8CA1#5C6B7AHex codes
Hex
#8B9DC3
RGB
139, 157, 195
HSL
221°, 32%, 65%
Hex
#C9B6D9
RGB
201, 182, 217
HSL
273°, 32%, 78%
Hex
#E6B5B5
RGB
230, 181, 181
HSL
0°, 49%, 81%
Hex
#9D8CA1
RGB
157, 140, 161
HSL
289°, 10%, 59%
Hex
#5C6B7A
RGB
92, 107, 122
HSL
210°, 14%, 42%
How to use this palette
The first color in Melancholy 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 {
--melancholy-1: #8B9DC3;
--melancholy-2: #C9B6D9;
--melancholy-3: #E6B5B5;
--melancholy-4: #9D8CA1;
--melancholy-5: #5C6B7A;
}