Tempered Petrol color palette — #EFF7F7 · #D8DBEC · #7F9CBE · #2D7799 · #44546A

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

The five colors

• Ivory (#EFF7F7): bright and airy, almost weightless.
• Silver (#D8DBEC): A whisper-light, dusty violet — the color of wild irises.
• Blue Fog (#7F9CBE): A luminous, dusty blue — the color of open sky before noon.
• Slate (#2D7799): A full-bodied, balanced blue — the color of deep harbor water.
• Peacock (#44546A): A full-bodied, dusty blue — the color of deep harbor water.

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

• Patina Petrol color palette (#F7EFF2, #DAD0E2, #879BCC, #1F7885, #2F354B)
• Weathered Market color palette (#F9F4EF, #CCE7EA, #99B0E6, #54919B, #614B57)
• Weathered Harbor color palette (#EEF8F5, #C4E2EA, #2B9BA1, #007362, #254E5D)
• Ancient Cabin color palette (#E2EFEE, #84A2BD, #00599A, #003B4E, #001D48)
• Worn Balcony color palette (#E8FAF7, #86C3D1, #007A97, #005559, #00384D)
• Hushed Cerulean Ridge color palette (#E0F2EE, #569CA3, #005360, #00302E, #00171E)
• Dusty Workshop color palette (#ECF9EE, #B9E0EC, #9BC0D3, #A5855E, #425649)
• Tempered Dune color palette (#EEF8EE, #CCA97D, #5AAB91, #9A6604, #23565A)

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