Tempered Pine Harbor color palette — #F4F6ED · #D2DCD6 · #A9B8A8 · #347346 · #393C31

Built around Pine, softened by Ash — the whole palette hums with nature and growth.

The five colors

• Ivory (#F4F6ED): bright and airy, almost weightless.
• Silver (#D2DCD6): bright and airy, almost weightless.
• Ash (#A9B8A8): A luminous, dusty green — the color of fresh herbs.
• Pine (#347346): A full-bodied, balanced teal — the color of shallow lagoons.
• Charcoal (#393C31): a grounded near-black with real depth.

Feels like: Nature, Growth, Sophistication. Tagged scandi, muted, light.

Use it as a design system

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

• Emerald Boulevard color palette (#EEF8F6, #D2DBE2, #B5BFD1, #579057, #303E3C)
• Cypress Lagoon color palette (#F6F7E5, #79A886, #17735C, #3D522E, #313B00)
• Softworn Petrol color palette (#EDF8F3, #C7DFE3, #C8B6C4, #007598, #34443D)
• Ancient Cocoa Garden color palette (#BDEFD8, #94B296, #577B6A, #70475D, #5E3435)
• Washed Abyss Pier color palette (#E9F2E6, #A0ADA2, #6C8679, #00413B, #0B1708)
• Worn Lagoon color palette (#EBFBE1, #96D286, #00B58C, #008396, #1F391C)
• Wandering Alley color palette (#E8F1ED, #D4C8D3, #B099A7, #005B86, #1C332C)
• Moonless Cypress Alley color palette (#E3EFDD, #007364, #142C1A, #0B1705, #020603)

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