Tempered Cocoa color palette — #E9F5EF · #8CC0B3 · #5A805E · #784635 · #0A2E27

Coffee and Fern set the tone — five colors that lean into nature and growth.

The five colors

• Cream (#E9F5EF): a clean, paper-quiet neutral.
• Mint Leaf (#8CC0B3): A luminous, dusty teal — the color of glacier melt.
• Fern (#5A805E): A full-bodied, dusty green — the color of a quiet forest floor.
• Coffee (#784635): A full-bodied, dusty orange — the color of sun-warmed clay.
• Deep Forest (#0A2E27): A deep, shadowed, dusty teal — the color of sea glass.

Feels like: Nature, Growth, Sophistication, Grounding. Tagged botanical, earthy, 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

• Wandering Lagoon Basin color palette (#E7F5F3, #A8CBCC, #588F84, #536851, #203536)
• Antique Pine Corridor color palette (#E9F5F0, #8DAA80, #2D7549, #454B1D, #00221D)
• Worn Cypress color palette (#F9F5EC, #9EB98F, #38836B, #6F5056, #464500)
• Soft Olive color palette (#CCFEF3, #A7C793, #57853F, #255000, #0C1A00)
• Timeworn Olive color palette (#F4E4C2, #B1A862, #808613, #425600, #18300C)
• Hushed Bronze color palette (#F8F5EA, #C9C79E, #6D9D72, #9D603B, #494400)
• Muted Olive color palette (#E6F6F0, #9CAC6A, #9380C5, #5C6E00, #2B1F44)
• Teal Cabin color palette (#EDF8F2, #B8E7F4, #72AB9C, #8C6987, #13413C)

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