Tempered Petrol color palette — #E9F1E7 · #94B5D5 · #5461AA · #004F52 · #36224E

A conversation between Slate and Deep Indigo, giving this palette its sense of creativity and calm.

The five colors

• Cream (#E9F1E7): bright and airy, almost weightless.
• Ash (#94B5D5): A luminous, dusty blue — the color of open sky before noon.
• Slate (#5461AA): A full-bodied, balanced violet — the color of wild irises.
• Forest (#004F52): A deep, shadowed, dusty teal — the color of sea glass.
• Deep Indigo (#36224E): A deep, shadowed, dusty violet — the color of twilight just after sunset.

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

• Soft Atelier color palette (#F8E9F5, #7ABEC6, #00719B, #005330, #122B5B)
• Softworn Cobalt color palette (#EDE8E1, #8EBFB2, #4268B5, #00485C, #100A40)
• Worn Cobalt color palette (#E9F1EB, #A7C8E9, #6085CD, #006882, #24255D)
• Softworn Terrace color palette (#ECF5FF, #BBB6F7, #CC779D, #00686A, #263657)
• Washed Market color palette (#FEF1F9, #8EDCEF, #0086CD, #00694D, #2F3B6F)
• Quiet Summit color palette (#CEE9E9, #00A0C7, #00679C, #2A318C, #311958)
• Washed Cypress color palette (#F9F3F9, #D2E2F2, #6DA2B6, #547958, #435467)
• Cobalt Corridor color palette (#CFE8FF, #006FB7, #725C00, #3F4E12, #00213C)

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