Cocoa Coast color palette — #FFF4E3 · #E8AE9D · #AB8D5F · #0A7D89 · #6C3900

Bronze and Teal set the tone — five colors that lean into trust and stability.

The five colors

• Cream (#FFF4E3): A whisper-light, dusty gold — the color of old brass.
• Melon (#E8AE9D): A luminous, dusty orange — the color of autumn markets.
• Caramel (#AB8D5F): A luminous, dusty gold — the color of afternoon light on wheat.
• Teal (#0A7D89): A full-bodied, balanced blue — the color of open sky before noon.
• Bronze (#6C3900): A full-bodied, balanced gold — the color of old brass.

Feels like: Trust, Stability, Optimism, Balance. Tagged retro, muted.

Use it as a design system

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

• Petrol Harbor color palette (#FEF4E4, #D7B895, #96965B, #32769F, #4B4741)
• Cypress Drift color palette (#FEF4E5, #E0ACC5, #BA8279, #397F5B, #5C3F3A)
• Bronze Veranda color palette (#FDF4E3, #CF95A3, #986F22, #415B7C, #703513)
• Cocoa Study color palette (#F9F4ED, #DBD0B5, #A39D75, #95756C, #604A00)
• Muted Chapel color palette (#E6FBEF, #FFBBC4, #C3AB77, #6C90B0, #52424C)
• Ancient Archive color palette (#FFF4E2, #F18A1E, #907D00, #006484, #4A2F00)
• Chestnut Corridor color palette (#FAF0E6, #C68D62, #755002, #532D00, #28201B)
• Muted Studio color palette (#F8F5EF, #CDE4E0, #7EBBD3, #27998D, #2C5347)

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