Cocoa Lantern color palette — #FFF2EF · #E1DBCF · #9DBBB4 · #C8A2BF · #7C3D25

A conversation between Bronze and Mauve, giving this palette its sense of optimism and sophistication.

The five colors

• Ivory (#FFF2EF): bright and airy, almost weightless.
• Bone (#E1DBCF): bright and airy, almost weightless.
• Ash (#9DBBB4): A luminous, dusty teal — the color of sea glass.
• Mauve (#C8A2BF): A luminous, dusty pink — the color of neon signs at night.
• Bronze (#7C3D25): A full-bodied, balanced orange — the color of toasted spice.

Feels like: Optimism, Sophistication, Softness, Clarity. Tagged pastel, light, muted.

Use it as a design system

One click turns Cocoa Lantern 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

• Ancient Corridor color palette (#FFE9E1, #D5DAEC, #ADA4AF, #662F00, #2F2621)
• Cocoa Lagoon color palette (#FFF3E5, #DBE6C7, #C3C4D3, #DB9D87, #654700)
• Dusty Bronze Ridge color palette (#FCF4E9, #DBE2C2, #CCA776, #A46B3E, #493F00)
• Ancient Blush color palette (#FFF2ED, #EDF595, #DFDCCD, #E17C9C, #532D17)
• Cocoa Boulevard color palette (#FBF4EF, #CADECC, #B47355, #6C3603, #211914)
• Timeworn Lantern color palette (#FCF1FC, #C6F0E2, #E8D6D7, #9482A0, #574652)
• Feathered Moss Study color palette (#FAD7CA, #EBAA8A, #9F9000, #772055, #030000)
• Washed Corridor color palette (#FEF3EC, #FBAE8D, #60BFC8, #7A7BB3, #37302C)

Browse the whole catalog at Explore, or see today's palette.