Studio Ghibli
Soft greens, warm earth tones, and gentle sky blues — the colors of a Ghibli morning.
Studio Ghibli — 5-color palette
#7CA982#F4E3C1#A8C3A4#E8B7A0#5B7065Hex codes
Hex
#7CA982
RGB
124, 169, 130
HSL
128°, 21%, 57%
Hex
#F4E3C1
RGB
244, 227, 193
HSL
40°, 70%, 86%
Hex
#A8C3A4
RGB
168, 195, 164
HSL
112°, 21%, 70%
Hex
#E8B7A0
RGB
232, 183, 160
HSL
19°, 61%, 77%
Hex
#5B7065
RGB
91, 112, 101
HSL
149°, 10%, 40%
How to use this palette
The first color in Studio Ghibli 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 {
--studio-ghibli-1: #7CA982;
--studio-ghibli-2: #F4E3C1;
--studio-ghibli-3: #A8C3A4;
--studio-ghibli-4: #E8B7A0;
--studio-ghibli-5: #5B7065;
}