Tempered Pier color palette — #FCF1F9 · #97A8E2 · #BC8AA7 · #93771D · #4A3645

A conversation between Walnut and Mauve, giving this palette its sense of nature and growth.

The five colors

• Ivory (#FCF1F9): bright and airy, almost weightless.
• Mauve (#97A8E2): A luminous, balanced violet — the color of a velvet chair.
• Dusty Rose (#BC8AA7): A luminous, dusty pink — the color of a candy shop window.
• Walnut (#93771D): A full-bodied, balanced green — the color of a quiet forest floor.
• Charcoal (#4A3645): A deep, shadowed, dusty pink — the color of peonies in June.

Feels like: Nature, Growth, Optimism, Creativity, Sophistication. Tagged muted.

Use it as a design system

One click turns Tempered Pier 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 Bronze color palette (#EDF8F1, #72B7C6, #BD87B0, #907736, #304236)
• Olive Basin color palette (#FFF1F8, #A5A5D6, #C98979, #57894C, #493742)
• Washed Olive Orchard color palette (#FCF2F7, #A196CB, #9C709C, #656D20, #3E2A36)
• Aged Boulevard color palette (#EDF6FF, #5A96C7, #B06958, #69602C, #323F4B)
• Washed Cypress Veranda color palette (#F0F9E7, #9DCAB1, #958AB8, #2C8063, #324E47)
• Powder Workshop color palette (#E8FAF4, #8ACAFF, #E6A490, #A7996A, #2E423C)
• Frosted Rose color palette (#FFF0F8, #8E7FFF, #DF4A57, #587100, #29254C)
• Airy Bloom color palette (#DCFFEB, #BECFF9, #9F91CE, #96538D, #752B3D)

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