Tempered Petrol color palette — #F2F5FB · #ACC0EC · #A76587 · #4F6AAD · #312B36

Slate and Mocha set the tone — five colors that lean into creativity and sophistication.

The five colors

• Ivory (#F2F5FB): bright and airy, almost weightless.
• Sky (#ACC0EC): A luminous, dusty violet — the color of a velvet chair.
• Mocha (#A76587): A full-bodied, balanced rose — the color of pressed rose petals.
• Slate (#4F6AAD): A full-bodied, balanced violet — the color of wild irises.
• Onyx (#312B36): A deep, shadowed, dusty violet — the color of a velvet chair.

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

• Washed Pewter Veranda color palette (#F5F4FB, #CFB5DD, #AF665E, #825B95, #352A33)
• Aged Violet Quarry color palette (#F0F6FB, #8AC9ED, #876ABF, #1076A1, #2C2D37)
• Petrol Hollow color palette (#ECF3F9, #91CAF8, #AF6F67, #3E77A2, #1C121A)
• Aged Coral color palette (#EEF8F4, #A5D8FF, #D18286, #5B93BC, #382A26)
• Sunlit Station color palette (#F1F5FF, #BBACE3, #9C68A6, #7A426E, #652F47)
• Pewter Grove color palette (#ECF9EE, #AA9ED7, #99618E, #605B29, #464657)
• Tempered Canyon color palette (#F3F5FB, #DDD8DF, #BAA7A4, #7F7CAB, #505259)
• Antique Bronze Courtyard color palette (#F0F5FF, #697BBB, #A25424, #46581A, #24353D)

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