Color collection
Moody Color Palettes
Moody palettes for cinematic landing pages, music brands, portfolios, and atmospheric editorial design.
#CE27ACAccent#D65175Surface#21121CText#F7F3F6Support#B8C973Moody 3Moody / Dark UI / EditorialQuality 96Primary#CE274EAccent#D6AA51Surface#271618Text#F7F3F3Support#87C973Moody 2Moody / Dark UI / EditorialQuality 95Primary#CE277DAccent#51D692Surface#24141AText#F7F3F5Support#A0C973Moody 5Moody / Dark UI / EditorialQuality 95Primary#CE5F27Accent#87D651Surface#2E231AText#F7F4F3Support#73C990Moody 4Moody / Dark UI / EditorialQuality 94Primary#CE2F27Accent#C5D651Surface#2A1B18Text#F7F3F3Support#73C978Moody 6Moody / Dark UI / EditorialQuality 94Primary#CE8E27Accent#51D65ASurface#312C1CText#F7F6F3Support#73C9A8How to use these palettes
Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for music pages, portfolios, launch pages, and atmospheric brand sites. Keep body text bright enough because moody palettes can become unreadable quickly.
Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.
CSS Variables
:root {
--primary: #CE27AC;
--accent: #D65175;
--surface: #21121C;
--text: #F7F3F6;
--support: #B8C973;
}FAQ
Where should I use moody color palettes?
These palettes are designed for music pages, portfolios, launch pages, and atmospheric brand sites.
Can I copy these colors into a design system?
Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.
How do I avoid low contrast?
Keep body text bright enough because moody palettes can become unreadable quickly.