Cocoa Harbor color palette — #F3EDE5 · #D7CFBC · #AEA77D · #674600 · #050200

A conversation between Bronze and Sage, giving this palette its sense of nature and growth.

The five colors

• Cream (#F3EDE5): a clean, paper-quiet neutral.
• Oat (#D7CFBC): A whisper-light, dusty gold — the color of honey in a jar.
• Sage (#AEA77D): A luminous, dusty green — the color of new leaves after rain.
• Bronze (#674600): A full-bodied, balanced gold — the color of old brass.
• Ink (#050200): quiet, heavy and certain.

Feels like: Nature, Growth, Optimism, Sophistication. Tagged scandi, muted, light.

Use it as a design system

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

• Tempered Basalt Field color palette (#E6E3D9, #BCBCA6, #8E9676, #3D3F00, #020100)
• Basalt Harbor color palette (#DEE8E0, #9FADA4, #6C8679, #493300, #031908)
• Tempered Forest color palette (#F4F6F0, #CDDED6, #ABC2AB, #017242, #0A0F01)
• Bronze Grove color palette (#F6EBDF, #ACB69B, #859F87, #9A6417, #1C1105)
• Weathered Emerald Basin color palette (#E3E3CC, #46A463, #005C45, #422200, #000200)
• Inked Fern Chapel color palette (#E8E1C9, #4B5459, #535000, #101916, #020700)
• Navy Market color palette (#F5EBCA, #869754, #0D7048, #1B2764, #14021F)
• Patina Thicket color palette (#FFEBCD, #947000, #364B00, #001A3E, #010100)

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