Cocoa Pier color palette — #D1E3E7 · #006A63 · #5A4700 · #00312E · #040200

A conversation between Deep Olive and Pine, giving this palette its sense of nature and growth.

The five colors

• Silver (#D1E3E7): bright and airy, almost weightless.
• Pine (#006A63): A full-bodied, balanced teal — the color of shallow lagoons.
• Deep Olive (#5A4700): A full-bodied, balanced green — the color of fresh herbs.
• Deep Forest (#00312E): A deep, shadowed, dusty teal — the color of sea glass.
• Ink (#040200): a grounded near-black with real depth.

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

Use it as a design system

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

• Obsidian Thicket color palette (#CFECFD, #00556A, #334200, #00232D, #010100)
• Misty Navy color palette (#D7EBEB, #006D48, #00439C, #00331F, #00020D)
• Twilit Nightshade Basin color palette (#C5EFF1, #005458, #1009B9, #1A3700, #000202)
• Smoked Ridge color palette (#C2EEF4, #007F8C, #003D43, #001215, #000102)
• Gentle Garnet color palette (#DEEDDB, #006E67, #910021, #003531, #260004)
• Wandering Terrace color palette (#C4F1F3, #53B3C9, #0A7CA8, #004844, #000608)
• Weathered Quarry color palette (#C9E8EF, #00918B, #BF0044, #004643, #040000)
• Feathered Navy color palette (#E1EEFF, #3366C4, #00684C, #002A86, #000B05)

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