Tempered Petrol color palette — #F3F4FF · #F0C6ED · #E69EB5 · #5D5FA8 · #3C3958

Slate takes the lead with Ballet Pink close behind in a set that reads as creativity and sophistication at first glance.

The five colors

• Ivory (#F3F4FF): bright and airy, almost weightless.
• Thistle (#F0C6ED): A whisper-light, dusty pink — the color of neon signs at night.
• Ballet Pink (#E69EB5): A luminous, balanced rose — the color of pressed rose petals.
• Slate (#5D5FA8): A full-bodied, balanced violet — the color of wild irises.
• Navy (#3C3958): A deep, shadowed, dusty violet — the color of wild irises.

Feels like: Creativity, Sophistication. Tagged pastel, light, 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

• Muted Pewter color palette (#F5F3FF, #E5D5E0, #EEB3B5, #7D69A7, #534662)
• Softworn Petrol Garden color palette (#EFF6FF, #E5D4EF, #C49BD7, #00769B, #2F3C53)
• Dusty Thicket color palette (#ECF2FF, #F4C4E9, #FB937D, #39799A, #25253A)
• Patina Cerulean Ridge color palette (#FFF0F8, #FFCEED, #FEAE9C, #4891C0, #4F373F)
• Frosted Terrace color palette (#DCDCF8, #DAA8C7, #C46277, #4C3892, #331231)
• Byzantium Atelier color palette (#FFECF5, #FFBAC1, #E88057, #9538A7, #602336)
• Aubergine Atelier color palette (#EDE8F8, #D882A2, #C8513D, #5A1580, #32001F)
• Linen Amber color palette (#FFEEFA, #F1B590, #B58E20, #933956, #4A210D)

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