Tempered Pine color palette — #F5F2E5 · #8EAA7D · #317447 · #214774 · #1E1E00
Built around Pine, softened by Navy — the whole palette hums with nature and growth.
The five colors
- Cream (#F5F2E5): bright and airy, almost weightless.
- Sage (#8EAA7D): A luminous, dusty green — the color of new leaves after rain.
- Pine (#317447): A full-bodied, balanced teal — the color of sea glass.
- Navy (#214774): A deep, shadowed, balanced blue — the color of open sky before noon.
- Onyx (#1E1E00): A deep, shadowed, dusty green — the color of a quiet forest floor.
Feels like: Nature, Growth, Trust, Stability, Sophistication, Grounding. Tagged botanical, earthy, 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
- Lagoon Bloom color palette (#F2F3E8, #AEB89A, #358571, #4A517C, #242B12)
- Pine Study color palette (#F6F2E1, #94B378, #1E7F3C, #702D6B, #152602)
- Aubergine Coast color palette (#EEE3D2, #9C9A31, #4A6600, #4A2280, #181700)
- Softworn Loft color palette (#E1DFCF, #729A6E, #076541, #592047, #011801)
- Wandering Cerulean color palette (#F6F1E9, #B6CFBD, #3886A3, #005C55, #002339)
- Wandering Lagoon color palette (#FDF3E8, #D1D4A3, #6A976B, #7F5271, #302704)
- Navy Garden color palette (#E8E7D6, #588659, #005136, #081F69, #000B01)
- Olive Courtyard color palette (#FAE0E0, #A8608E, #7C7000, #00657E, #26051C)
Browse the whole catalog at Explore, or see today's palette.