Tempered Cocoa color palette — #FEF4E3 · #78B4B1 · #477F9A · #7D4657 · #394E3D

Coffee takes the lead with Slate close behind in a set that reads as trust and stability at first glance.

The five colors

• Cream (#FEF4E3): A whisper-light, dusty gold — the color of old brass.
• Mint Leaf (#78B4B1): A luminous, dusty teal — the color of sea glass.
• Slate (#477F9A): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Coffee (#7D4657): A full-bodied, dusty red — the color of embers at dusk.
• Deep Olive (#394E3D): A full-bodied, dusty teal — the color of glacier melt.

Feels like: Trust, Stability, Sophistication. Tagged retro, muted.

Use it as a design system

One click turns Tempered 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

• Antique Cobalt color palette (#FCEFE7, #7FBA9E, #3680AE, #704636, #243023)
• Ancient Fern color palette (#FEF4E3, #8FB38C, #32877C, #684C78, #3E4F05)
• Cocoa Pier color palette (#EEF8EF, #66A4A6, #70689A, #863634, #4D4200)
• Petrol Quarry color palette (#F8F5EF, #CDE3E5, #7D9BC6, #257A8F, #63495C)
• Worn Azure Alley color palette (#FFF0F9, #92CDB2, #559AC9, #8F6252, #334C53)
• Hushed Seafoam color palette (#E8FBEB, #66E8E2, #73B8DB, #9A81A4, #364B53)
• Wandering Balcony color palette (#FFF4E2, #7899C9, #6F5E97, #6F4200, #4C3447)
• Washed Corridor color palette (#FFF4E2, #009DB4, #0060B2, #860017, #003B4F)

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