Midnight Cocoa color palette — #F9D9D2 · #7F3B00 · #422C00 · #0F0F00 · #010200
Built around Bronze, softened by Espresso — the whole palette hums with optimism and sophistication.
The five colors
- Shell Pink (#F9D9D2): A whisper-light, dusty orange — the color of toasted spice.
- Bronze (#7F3B00): A full-bodied, balanced gold — the color of afternoon light on wheat.
- Espresso (#422C00): A deep, shadowed, dusty gold — the color of old brass.
- Ink (#0F0F00): A deep, shadowed, dusty green — the color of fresh herbs.
- Black (#010200): quiet, heavy and certain.
Feels like: Optimism, Sophistication, Depth, Luxury. Tagged dark, muted.
Use it as a design system
One click turns Midnight Cocoa into a complete token system: semantic roles from primary to success, an 11-stop OKLCH scale per role, a WCAG AA/AAA and APCA contrast matrix, an auto-derived dark mode and 11 export formats including CSS custom properties, Tailwind, Figma Variables and shadcn/ui.
Similar palettes
- Hushed Chestnut Harbor color palette (#FFEAE3, #9A5100, #5A4000, #2D2500, #060800)
- Moonless Veranda color palette (#EEE1C7, #624700, #18209F, #291C00, #00000B)
- Charred Ultramarine Grove color palette (#EFDEE8, #0056C4, #684D00, #0C0D06, #020100)
- Nocturne Aubergine color palette (#EEE7D8, #4C3800, #2D008A, #310045, #020100)
- Charred Boulevard color palette (#EADCE4, #990046, #570201, #180A00, #020100)
- Gentle Courtyard color palette (#EFE7DA, #769C36, #007E76, #680A05, #040200)
- Olive Lantern color palette (#F3DABD, #796B00, #335100, #002A0B, #000F0A)
- Amber Ridge color palette (#FFE6D9, #B27E00, #615E00, #303E00, #001E0D)
Browse the whole catalog at Explore, or see today's palette.