Pine Harbor color palette — #F8F1E6 · #9BA76F · #14783F · #00505D · #211C03

Pine and Sage set the tone — five colors that lean into nature and growth.

The five colors

• Cream (#F8F1E6): a clean, paper-quiet neutral.
• Sage (#9BA76F): A luminous, dusty green — the color of fresh herbs.
• Pine (#14783F): A full-bodied, balanced teal — the color of sea glass.
• Peacock (#00505D): A deep, shadowed, dusty blue — the color of open sky before noon.
• Onyx (#211C03): A deep, shadowed, dusty green — the color of fresh herbs.

Feels like: Nature, Growth, Trust, Stability, Sophistication, 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 Courtyard color palette (#F5F2E5, #76AF88, #00746E, #454A22, #191F06)
• Olive Hollow color palette (#FAF0E8, #B09F63, #4E7206, #5E3A46, #261A01)
• Aged Moss color palette (#EDE5D4, #759B5B, #00654B, #53293D, #141300)
• Wandering Emerald Pier color palette (#E9FAF2, #BADCA3, #4E9E64, #356F67, #0F2E28)
• Tempered Olive color palette (#F5E9D2, #61853D, #005139, #002F3E, #090800)
• Worn Cerulean Parlor color palette (#FBEFEB, #AFD2B4, #0087B3, #005F33, #2D172D)
• Olive Archive color palette (#DBEEE8, #4998D3, #858000, #005A8D, #1F1D00)
• Driftwood Quarry color palette (#F9F0E8, #D1C29F, #6F8E58, #77575E, #34312A)

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