Tempered Petrol color palette — #F1F6FB · #A1C5E5 · #956AA3 · #1B73AA · #2E2C39

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

The five colors

• Ivory (#F1F6FB): bright and airy, almost weightless.
• Sky (#A1C5E5): A luminous, dusty blue — the color of open sky before noon.
• Slate (#956AA3): A full-bodied, balanced pink — the color of neon signs at night.
• Slate (#1B73AA): A full-bodied, balanced blue — the color of deep harbor water.
• Onyx (#2E2C39): A deep, shadowed, dusty violet — the color of twilight just after sunset.

Feels like: Trust, Stability, 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

• Weathered Cobalt Basin color palette (#EFF7F9, #98C9D7, #627BB7, #007D7C, #252E3D)
• Ancient Indigo Balcony color palette (#F3F5FC, #B4BEE5, #AD637A, #6D60A9, #332A37)
• Driftwood Canyon color palette (#ECF3F7, #96CEDD, #AB689E, #197E94, #18131F)
• Tempered Pewter Summit color palette (#E9FAEC, #97A6D2, #856A9A, #705421, #3F475E)
• Gentle Harbor color palette (#EEF6FF, #B4BDEB, #8477B3, #744588, #732843)
• Hushed Blush color palette (#F0F7F2, #99DEEC, #D77B93, #309CAE, #382A28)
• Ancient Cobalt color palette (#F2F5FB, #DAD8DF, #B7A8A8, #6681B6, #4D535C)
• Aged Wisteria Ridge color palette (#F1F5FF, #D8D9E6, #BFC0FF, #C77ABF, #454861)

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