Weathered Harbor color palette — #FBF3F4 · #E2D9D3 · #CDBDAC · #86678D · #514446

A conversation between Slate and Stone, giving this palette its sense of sophistication.

The five colors

• Ivory (#FBF3F4): bright and airy, almost weightless.
• Bone (#E2D9D3): bright and airy, almost weightless.
• Stone (#CDBDAC): A luminous, dusty gold — the color of old brass.
• Slate (#86678D): A full-bodied, dusty pink — the color of neon signs at night.
• Cocoa (#514446): a grounded near-black with real depth.

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

Use it as a design system

One click turns Weathered 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

• Pewter Alley color palette (#F2F0F8, #E1D4DD, #C8B8C1, #796E94, #2D2A33)
• Hushed Terracotta color palette (#FAF4F0, #DBDACF, #BFB297, #964B34, #433831)
• Worn Atelier color palette (#FDF4E8, #BBAF8A, #5E7F43, #6F4E60, #514000)
• Hushed Pier color palette (#FFEDF4, #D4B2B0, #AC6F48, #536C5A, #2D5658)
• Ancient Loft color palette (#FFF1F1, #EACBC2, #CA9A88, #912B72, #412D2D)
• Worn Garden color palette (#F4EDE9, #C3B7A7, #9A8D68, #6F2F00, #2A1C11)
• Timeworn Boulevard color palette (#F6DEDC, #A4507A, #561E00, #2C1918, #130A08)
• Tempered Aubergine color palette (#F3E8E9, #BCA29E, #A1726A, #600059, #210D10)

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