Cocoa Terrace color palette — #FBF4EA · #C8DFCC · #B5AF8E · #987F79 · #584300

Deep Olive takes the lead with Sage close behind in a set that reads as optimism and sophistication at first glance.

The five colors

• Ivory (#FBF4EA): a clean, paper-quiet neutral.
• Celadon Mist (#C8DFCC): A whisper-light, dusty teal — the color of sea glass.
• Sage (#B5AF8E): A luminous, dusty green — the color of a quiet forest floor.
• Driftwood (#987F79): A luminous, dusty orange — the color of toasted spice.
• Deep Olive (#584300): A deep, shadowed, balanced gold — the color of old brass.

Feels like: Optimism, Sophistication, Grounding. Tagged botanical, earthy, muted, light.

Use it as a design system

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

• Worn Station color palette (#F4F7EB, #C2E8D1, #8CA783, #986D2F, #2B4000)
• Tempered Meadow color palette (#EFF8F0, #A7CBB6, #7D875A, #6F6072, #425149)
• Hushed Lantern color palette (#FDF5E0, #D4E8C6, #AFCAE0, #CAB297, #5C4E00)
• Aged Powder Meadow color palette (#F9F4EE, #C4DEE4, #A3C5EE, #669E94, #39544A)
• Taupe Archive color palette (#FCF4E7, #F8E4AC, #B5CBFF, #B09850, #573C52)
• Worn Boulevard color palette (#EEDFC6, #969238, #405600, #382900, #010100)
• Hushed Grove color palette (#FBF6DF, #A8C693, #378A51, #73432F, #1A1900)
• Ancient Orchard color palette (#FEF4DF, #DCCD83, #7DC8DD, #C68DB5, #3B3831)

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