Tempered Petrol color palette — #FFECF3 · #B87F4A · #3B89AC · #346FA5 · #2D1620

A conversation between Slate and Caramel, giving this palette its sense of trust and stability.

The five colors

• Blush (#FFECF3): A whisper-light, dusty rose — the color of a warm blush.
• Caramel (#B87F4A): A luminous, balanced gold — the color of old brass.
• Cerulean (#3B89AC): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Slate (#346FA5): A full-bodied, balanced blue — the color of deep harbor water.
• Onyx (#2D1620): A deep, shadowed, dusty rose — the color of strawberry cream.

Feels like: Trust, Stability, Optimism, Balance. Tagged muted.

Use it as a design system

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

• Pale Amber color palette (#E3F9E2, #BA8020, #4084C2, #486AA8, #0E240F)
• Chalky Coral color palette (#FDEBFF, #C76F7E, #009386, #007B7C, #29162C)
• Faded Ridge color palette (#FFF3E9, #DB915C, #0BA6DA, #3F8CCC, #3D3732)
• Ultramarine Thicket color palette (#F0E6D9, #976700, #0066B2, #3133CA, #170C00)
• Oat Market color palette (#FFEBF6, #E5EEC8, #B1D0A4, #8E6D8C, #263524)
• Worn Lapis color palette (#E6E9BA, #999C27, #5D4DBF, #83317B, #191A00)
• Bronze Pier color palette (#FDEDF5, #9BB398, #976950, #6D3C3A, #10291A)
• Dusty Violet Market color palette (#C6E7E0, #588C37, #8753AC, #7D3B89, #001915)

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