Tempered Driftwood color palette — #FAF3F7 · #E7D8D6 · #A7796D · #5A3A51 · #22171F

A conversation between Mocha and Cocoa, giving this palette its sense of sophistication.

The five colors

• Ivory (#FAF3F7): bright and airy, almost weightless.
• Bone (#E7D8D6): a clean, paper-quiet neutral.
• Mocha (#A7796D): A luminous, dusty orange — the color of toasted spice.
• Cocoa (#5A3A51): A deep, shadowed, dusty pink — the color of a candy shop window.
• Ink (#22171F): A deep, shadowed, dusty pink — the color of peonies in June.

Feels like: Sophistication. Tagged luxury, dark, muted.

Use it as a design system

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

• Driftwood Ridge color palette (#F0F7F0, #B8E1E9, #9F8051, #58421D, #161E16)
• Taupe Summit color palette (#F9F3F8, #BEEAD3, #CA8B88, #7F627C, #312830)
• Garnet Lagoon color palette (#FCEEEA, #CEC589, #825352, #571A02, #1B110E)
• Tempered Summit color palette (#DFF5E3, #C49B41, #4E3800, #151C21, #0C0600)
• Washed Bronze Quarry color palette (#FFF1F7, #FFCF90, #A25200, #4A2200, #110309)
• Cerulean Pier color palette (#F5F4FF, #D9B4E5, #65BFC5, #478AB0, #312F42)
• Charred Grove color palette (#F9E1EE, #A96A00, #0F1F19, #320F00, #030000)
• Washed Veranda color palette (#FAF3F5, #CFD9DB, #D1A577, #979FA6, #534B4D)

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