Tempered Harbor color palette — #FBF2F4 · #E2D9D3 · #C6BEB3 · #85678E · #524346

Slate takes the lead with Cocoa close behind in a set that reads as sophistication at first glance.

The five colors

• Ivory (#FBF2F4): a clean, paper-quiet neutral.
• Bone (#E2D9D3): bright and airy, almost weightless.
• Stone (#C6BEB3): soft and architectural.
• Slate (#85678E): A full-bodied, dusty pink — the color of peonies in June.
• Cocoa (#524346): A deep, shadowed, dusty red — the color of a theater curtain.

Feels like: Sophistication. Tagged scandi, muted, light.

Use it as a design system

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

• Ancient Driftwood color palette (#FCF3F2, #DFDAD3, #A2AFA7, #9D7775, #595050)
• Pewter Garden color palette (#F2F1F7, #DED4DB, #C7B8BE, #8E6490, #2C2B33)
• Pine Coast color palette (#FBF4EC, #B4B284, #597F52, #704D61, #514000)
• Wandering Drift color palette (#E9E0DB, #C2B7A7, #928F79, #712D00, #2B1B10)
• Tempered Market color palette (#FFF1F2, #E1CEC8, #BFA086, #942179, #422C2D)
• Ancient Alley color palette (#F9DDDB, #AC487C, #522300, #2A1A19, #130A08)
• Lilac Thicket color palette (#F3F8E1, #9B8BD1, #93545F, #005A59, #543139)
• Tempered Blush color palette (#FFF1F1, #D9DFFF, #EE8AC0, #B57731, #5C333D)

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