Tempered Ridge color palette — #FFF1F4 · #FFD2F7 · #E98CA6 · #AE6B64 · #534D47

Rose and Mocha set the tone — five colors that lean into warmth and comfort.

The five colors

• Ivory (#FFF1F4): bright and airy, almost weightless.
• Thistle (#FFD2F7): A whisper-light, dusty pink — the color of peonies in June.
• Rose (#E98CA6): A luminous, balanced red — the color of embers at dusk.
• Mocha (#AE6B64): A full-bodied, balanced orange — the color of toasted spice.
• Charcoal Brown (#534D47): quiet, heavy and certain.

Feels like: Warmth, Comfort, Sophistication. Tagged light, muted, warm.

Use it as a design system

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

• Apricot Harbor color palette (#FFF1F1, #EFD4CA, #F8967F, #A87950, #4D4942)
• Worn Driftwood Workshop color palette (#F6F3FF, #D7A0C4, #B56E81, #8A4F4C, #64485A)
• Seafoam Alley color palette (#FFF2EE, #F2D4C5, #63E5CC, #CA8485, #3C4C33)
• Scarlet Lantern color palette (#FFE4F4, #FF8C9F, #D43900, #683700, #261A00)
• Coral Harbor color palette (#FFF2ED, #E3D8D2, #F5988D, #93534F, #342C29)
• Aged Basalt Harbor color palette (#FFE8E8, #D1D2E0, #A89DA2, #5B423B, #2D2522)
• Pale Ember color palette (#FFF1F5, #FFA095, #E55300, #855200, #3B3300)
• Pale Ember Summit color palette (#FFE5E8, #F36245, #9B4B00, #442F00, #0F0E00)

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