Tempered Pine color palette — #EBF5EA · #A1A56A · #36743D · #42445E · #022218

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

The five colors

• Cream (#EBF5EA): a clean, paper-quiet neutral.
• Sage (#A1A56A): A luminous, dusty green — the color of new leaves after rain.
• Olive (#36743D): A full-bodied, balanced green — the color of new leaves after rain.
• Charcoal (#42445E): A deep, shadowed, dusty violet — the color of wild irises.
• Onyx (#022218): A deep, shadowed, dusty teal — the color of sea glass.

Feels like: Nature, Growth, 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

• Muted Bloom color palette (#E4F7F0, #62B486, #007471, #4C405A, #002221)
• Pine Orchard color palette (#E5F8E6, #A6AF5C, #2C7E41, #61471C, #202300)
• Fern Villa color palette (#E8FBED, #A29D6A, #63682A, #623E50, #203C2F)
• Timeworn Moss color palette (#D3EBD9, #7C9A40, #006640, #46360A, #001711)
• Dusty Lagoon color palette (#FDF4E7, #B6B980, #678D58, #7D585A, #37352F)
• Soft Bloom color palette (#F0F7BF, #B0AD1C, #627200, #343500, #0C0C00)
• Hazy Amber Thicket color palette (#FFE4D6, #C38200, #7F6700, #424700, #0E2A0C)
• Hushed Indigo Boulevard color palette (#DFF0E4, #937900, #7C55B8, #644C8D, #001A0B)

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