Tempered Petrol color palette — #F4F6F0 · #C9E3E6 · #789CC5 · #347795 · #614960

A conversation between Slate and Blue Fog, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F4F6F0): a clean, paper-quiet neutral.
• Silver (#C9E3E6): A whisper-light, dusty blue — the color of open sky before noon.
• Blue Fog (#789CC5): A luminous, dusty blue — the color of a favorite pair of jeans.
• Slate (#347795): A full-bodied, balanced blue — the color of deep harbor water.
• Charcoal Brown (#614960): A full-bodied, dusty pink — the color of neon signs at night.

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

• Dusty Garden color palette (#F5F6EF, #C7E6E2, #69A3B7, #007E84, #315245)
• Washed Cobalt color palette (#FFF1F5, #A58AC3, #B8737B, #2F7EAE, #523B43)
• Tempered Archive color palette (#E2E6D8, #74A5C6, #005B94, #003B4C, #001F43)
• Dusty Ash color palette (#FFF1F4, #E3D7D2, #E5B89B, #9983B5, #5D484B)
• Hushed Petrol color palette (#F5F7E4, #77C6D5, #007A94, #005557, #00394C)
• Lagoon Balcony color palette (#EBECDD, #549DA0, #00545D, #00302C, #00171D)
• Hushed Hollow color palette (#FFF0F8, #BDB5E7, #8B74B2, #734F91, #68424D)
• Violet Garden color palette (#FEF1F5, #BBA4D6, #42A9B7, #865BB1, #13575F)

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