Pine Harbor color palette — #ECF0E2 · #008341 · #006A91 · #643C00 · #000301

A conversation between Fern and Peacock, giving this palette its sense of nature and growth.

The five colors

• Cream (#ECF0E2): bright and airy, almost weightless.
• Fern (#008341): A full-bodied, balanced teal — the color of shallow lagoons.
• Peacock (#006A91): A full-bodied, balanced blue — the color of deep harbor water.
• Bronze (#643C00): A deep, shadowed, balanced gold — the color of old brass.
• Black (#000301): A deep, shadowed, dusty teal — the color of shallow lagoons.

Feels like: Nature, Growth, Trust, Stability, Optimism, Balance. Tagged muted.

Use it as a design system

One click turns Pine 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

• Quiet Cabin color palette (#EAE4C6, #6C7400, #007070, #821703, #020200)
• Lapis Corridor color palette (#D9F0DC, #007C82, #534BC5, #404D00, #000202)
• Dusty Emerald color palette (#E8EFDF, #00A470, #007278, #006946, #000203)
• Dusty Villa color palette (#D7EEEB, #009698, #006C77, #00404D, #000406)
• Olive Pier color palette (#E5E8CB, #288200, #006C85, #00438E, #000200)
• Timeworn Aubergine Garden color palette (#EFF2CE, #008C87, #006574, #371D8D, #000405)
• Patina Thicket color palette (#DFE4DB, #91A69E, #748E87, #00745F, #050C01)
• Aubergine Station color palette (#DEE7C7, #006433, #532889, #360066, #000301)

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