Pine Harbor color palette — #F9F2D7 · #90B56F · #287E40 · #1F4E7D · #162603

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

The five colors

• Cream (#F9F2D7): A whisper-light, dusty green — the color of new leaves after rain.
• Sage (#90B56F): A luminous, balanced green — the color of a quiet forest floor.
• Olive (#287E40): A full-bodied, balanced green — the color of fresh herbs.
• Peacock (#1F4E7D): A full-bodied, balanced blue — the color of open sky before noon.
• Onyx (#162603): A deep, shadowed, dusty green — the color of fresh herbs.

Feels like: Nature, Growth, Trust, Stability, Balance, Grounding. Tagged botanical, earthy, 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

• Cypress Cabin color palette (#F0F5E0, #73B89F, #007C74, #005568, #172604)
• Worn Emerald Alley color palette (#F3F1DD, #6A9D64, #196443, #203763, #011801)
• Tempered Pewter color palette (#FAF1E3, #C1B28A, #6E7B53, #684B59, #2E2711)
• Soft Pine Drift color palette (#FFF1F5, #AAA75D, #2C7D20, #743669, #3E3D11)
• Hazy Emerald Balcony color palette (#E3FCF1, #A5C787, #3C9D55, #376CA2, #2C4214)
• Antique Emerald Corridor color palette (#FFF3E5, #DBDF94, #61A463, #8A5680, #302E28)
• Wandering Lagoon color palette (#E7EAD7, #42886B, #004F46, #26234C, #000B05)
• Dusty Cerulean Alley color palette (#FBF0E0, #8EDFEB, #0091B4, #006359, #00283E)

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