Tempered Pine color palette — #F3F7E9 · #639A70 · #387247 · #4C4576 · #36322C

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

The five colors

• Ivory (#F3F7E9): a clean, paper-quiet neutral.
• Fern (#639A70): A luminous, balanced teal — the color of glacier melt.
• Pine (#387247): A full-bodied, balanced teal — the color of sea glass.
• Navy (#4C4576): A full-bodied, balanced violet — the color of wild irises.
• Espresso (#36322C): quiet, heavy and certain.

Feels like: Nature, Growth, Creativity, Sophistication. Tagged jewel, vibrant, muted.

Use it as a design system

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

• Cocoa Loft color palette (#F5F6EC, #568E61, #45734E, #1E5974, #5C2300)
• Hushed Amber color palette (#FFF3E9, #BA7E56, #51733E, #4A4D7A, #3C3631)
• Antique Grove color palette (#FFF3E9, #C2BB89, #6E8F5F, #10674C, #004E59)
• Cerulean Thicket color palette (#ECF9F2, #318EAF, #236D8E, #624271, #36342E)
• Washed Parlor color palette (#F2F3E5, #608B43, #364032, #29291E, #151610)
• Frosted Harbor color palette (#E6FDE5, #008180, #006060, #472382, #302100)
• Softworn Studio color palette (#ECF4EE, #A0915F, #3A7595, #5E3776, #271621)
• Washed Fern color palette (#FFF2EB, #B5A778, #508372, #754C56, #514900)

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