Tempered Pine color palette — #FBF3F0 · #CCE7DF · #6AA3B3 · #2F8059 · #2D5347

A conversation between Teal and Blue Fog, giving this palette its sense of nature and growth.

The five colors

• Ivory (#FBF3F0): bright and airy, almost weightless.
• Silver (#CCE7DF): A whisper-light, dusty teal — the color of shallow lagoons.
• Blue Fog (#6AA3B3): A luminous, dusty blue — the color of open sky before noon.
• Teal (#2F8059): A full-bodied, balanced teal — the color of sea glass.
• Charcoal Brown (#2D5347): A full-bodied, dusty teal — the color of shallow lagoons.

Feels like: Nature, Growth, Trust, Stability, Sophistication. Tagged coastal, cool, light, 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

• Tempered Ridge color palette (#EBF4F2, #CBDDF0, #4BADB5, #39786D, #243A43)
• Patina Cypress color palette (#FAF4F0, #CDE4E3, #739EC2, #1D7F76, #63495F)
• Softworn Aqua Harbor color palette (#F5F6EF, #C9E8DE, #71C0C7, #579388, #44584A)
• Pine Study color palette (#FFF1F3, #B685B0, #729659, #37885C, #533B3E)
• Hushed Lagoon Workshop color palette (#EADBD4, #3E8E97, #004358, #002319, #000A18)
• Washed Cobalt Meadow color palette (#FDF3ED, #A1D9E8, #0089C4, #00685A, #1A3E77)
• Petrol Harbor color palette (#F5EDE7, #8EBEA7, #2C6BA6, #00504E, #1D275D)
• Antique Harbor color palette (#F9F5E9, #BBB99F, #868356, #7C550F, #454D00)

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