Cocoa Basin color palette — #F7E2D1 · #7D3F00 · #4D3C00 · #002C3F · #220700

Built around Bronze, softened by Deep Olive — the whole palette hums with nature and growth.

The five colors

• Parchment (#F7E2D1): A whisper-light, dusty gold — the color of old brass.
• Bronze (#7D3F00): A full-bodied, balanced gold — the color of honey in a jar.
• Deep Olive (#4D3C00): A deep, shadowed, dusty green — the color of new leaves after rain.
• Midnight (#002C3F): A deep, shadowed, dusty blue — the color of open sky before noon.
• Ink (#220700): A deep, shadowed, dusty orange — the color of sun-warmed clay.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged jewel, vibrant, muted.

Use it as a design system

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

• Twilit Market color palette (#FAEAD3, #5B3D00, #332F00, #001733, #0E0200)
• Terracotta Pier color palette (#F8E3D8, #952E00, #732100, #00312C, #220213)
• Dusty Ridge color palette (#FFE7D3, #814100, #37423D, #1E1B00, #120600)
• Antique Terracotta Workshop color palette (#FFF2EA, #9E4C1E, #4B4D00, #003769, #331701)
• Timeworn Coral color palette (#FFE0F3, #D06E67, #864200, #413000, #1B2500)
• Aubergine Meadow color palette (#FDEFD7, #6B5200, #005134, #3D007B, #1F1600)
• Weathered Navy color palette (#EEDBBF, #AC567E, #6D4100, #151194, #401215)
• Softworn Terracotta Boulevard color palette (#F4EDEA, #D5CAC0, #A8A08C, #922B2B, #392A24)

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