Tempered Cocoa color palette — #D3F3F8 · #006355 · #5F3000 · #302900 · #001603
Cocoa and Pine set the tone — five colors that lean into nature and growth.
The five colors
- Frost (#D3F3F8): A whisper-light, dusty blue — the color of a favorite pair of jeans.
- Pine (#006355): A full-bodied, balanced teal — the color of sea glass.
- Cocoa (#5F3000): A deep, shadowed, balanced gold — the color of honey in a jar.
- Espresso (#302900): A deep, shadowed, dusty green — the color of new leaves after rain.
- Ink (#001603): A deep, shadowed, dusty green — the color of new leaves after rain.
Feels like: Nature, Growth, Optimism, Sophistication. Tagged jewel, vibrant, 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
- Washed Garnet Balcony color palette (#D1EBE8, #007036, #760B00, #402400, #00160F)
- Tempered Denim Summit color palette (#D6EEFD, #005F79, #484200, #00320A, #001414)
- Moonless Abyss color palette (#CAEDFE, #004753, #2B2200, #051400, #000302)
- Tempered Mulberry color palette (#F8E9F6, #497ACF, #913495, #513B00, #001516)
- Nocturne Thicket color palette (#EBD7E8, #423939, #57000C, #221C00, #020B00)
- Muted Cabin color palette (#E8F8FF, #008696, #775900, #364D0F, #093034)
- Linen Aubergine color palette (#D8E5FA, #364FA9, #600070, #3A2700, #000606)
- Softworn Cobalt Boulevard color palette (#F0F6FE, #6789C6, #507448, #085C54, #213440)
Browse the whole catalog at Explore, or see today's palette.