Tempered Petrol color palette — #F8ECE1 · #8DBEDC · #3F63B2 · #003E3A · #030010

A conversation between Cobalt and Sky, giving this palette its sense of trust and stability.

The five colors

• Cream (#F8ECE1): a clean, paper-quiet neutral.
• Sky (#8DBEDC): A luminous, dusty blue — the color of open sky before noon.
• Cobalt (#3F63B2): A full-bodied, balanced violet — the color of twilight just after sunset.
• Forest (#003E3A): A deep, shadowed, dusty teal — the color of sea glass.
• Ink (#030010): A deep, shadowed, dusty violet — the color of wild irises.

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

• Softworn Corridor color palette (#F9EAE6, #75C7C5, #00738D, #00420E, #000309)
• Worn Field color palette (#EDE3D3, #4193C0, #004A86, #002B31, #00001E)
• Quiet Grape Lagoon color palette (#DDEAD3, #679E1F, #5C33C8, #294500, #010008)
• Gentle Cobalt Quarry color palette (#D6E3D8, #8FB5D3, #2F86D9, #006B79, #030A3F)
• Tempered Nightshade color palette (#F3E3E9, #5C97B9, #002CC5, #00302D, #170439)
• Periwinkle Grove color palette (#FCF4EC, #C4E4F7, #8DA3E5, #007F7D, #432232)
• Patina Iris Pier color palette (#FEF3E7, #DDE2F5, #798FFF, #007274, #310756)
• Tempered Bronze Summit color palette (#F7DDC3, #A77E00, #485300, #0F2600, #000201)

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