Tempered Petrol color palette — #FFF1F4 · #B38BC0 · #389293 · #2E6F98 · #3D2A34

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

The five colors

• Ivory (#FFF1F4): bright and airy, almost weightless.
• Mauve (#B38BC0): A luminous, balanced pink — the color of a candy shop window.
• Cerulean (#389293): A luminous, balanced teal — the color of sea glass.
• Slate (#2E6F98): A full-bodied, balanced blue — the color of deep harbor water.
• Espresso (#3D2A34): A deep, shadowed, dusty rose — the color of strawberry cream.

Feels like: Trust, Stability, Creativity, Sophistication. Tagged jewel, vibrant, 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

• Petrol Loft color palette (#FEF2F1, #D79EB7, #4B9AA3, #4269A3, #4D385C)
• Cypress Coast color palette (#FBF2F8, #9EA6D6, #559168, #007E80, #223831)
• Wandering Alley color palette (#FFF2EE, #CF8288, #447AB7, #614B94, #382021)
• Ancient Delta color palette (#FFF1F3, #CA58BF, #008293, #0058A2, #281A44)
• Wandering Alley color palette (#FEF2EF, #B57174, #547129, #285577, #402E2B)
• Mallow Market color palette (#FBF1FE, #FCA5BE, #A48452, #65658D, #24212E)
• Hazy Raspberry color palette (#F9DFE0, #B5489C, #006C82, #003B89, #170525)
• Ancient Cocoa Meadow color palette (#FDF4E7, #E1B395, #AE8C5A, #4B7C52, #683C00)

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