Tempered Petrol color palette — #FAF2FA · #F0D3D2 · #CFB4B7 · #366AB1 · #473B47

Built around Slate, softened by Bone — the whole palette hums with trust and stability.

The five colors

• Ivory (#FAF2FA): a clean, paper-quiet neutral.
• Bone (#F0D3D2): A whisper-light, dusty orange — the color of toasted spice.
• Rosewood Mist (#CFB4B7): A luminous, dusty red — the color of a theater curtain.
• Slate (#366AB1): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Charcoal (#473B47): A deep, shadowed, dusty pink — the color of peonies in June.

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

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

• Aged Basin color palette (#EFF8F1, #C8DFE2, #D0B2C4, #007884, #37433A)
• Muted Denim color palette (#F3ECF2, #DDC5CD, #B49999, #395191, #342A32)
• Driftwood Workshop color palette (#FCF2F3, #E1D9D2, #A7AFA8, #A17478, #5A4F50)
• Hushed Periwinkle Parlor color palette (#F0F6FD, #DCD7E3, #C5A7A4, #6EA3FF, #37404E)
• Aged Moss Coast color palette (#FFF3E4, #A3AB42, #377A42, #604566, #3C3B34)
• Shadow Amethyst Market color palette (#F1DAE5, #711DF9, #431839, #24111C, #0E0408)
• Gentle Delta color palette (#FFF0FC, #456CFF, #735400, #434300, #143211)
• Antique Lilac Quarry color palette (#D9ECFF, #AD97E6, #A77180, #5E6012, #334C2F)

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