Tempered Petrol color palette — #F6E5DD · #63C3D8 · #0773A2 · #004C41 · #001436

Slate takes the lead with Cyan close behind in a set that reads as trust and stability at first glance.

The five colors

• Rose Water (#F6E5DD): A whisper-light, dusty orange — the color of autumn markets.
• Cyan (#63C3D8): A luminous, balanced blue — the color of a favorite pair of jeans.
• Slate (#0773A2): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#004C41): A deep, shadowed, dusty teal — the color of glacier melt.
• Midnight (#001436): A deep, shadowed, dusty blue — the color of deep harbor water.

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

• Petrol Alley color palette (#F7EAF3, #8EB8CD, #2B6E9D, #00523B, #1F2958)
• Hushed Cobalt color palette (#FCEFE6, #9CD0E7, #4D80AF, #005C58, #2E172A)
• Muted Ultramarine color palette (#EFE3D9, #52A6D4, #0054B0, #00393B, #070427)
• Muted Cerulean color palette (#E8FAF7, #C5E4FF, #2CA0C2, #00696E, #002230)
• Hushed Ridge color palette (#EFE2DB, #009DA1, #005264, #002D1C, #00050B)
• Ash Lantern color palette (#F8F0EB, #C2EBE8, #74A2C5, #3C776F, #412F3F)
• Mallow Pier color palette (#EEF1FF, #DDAFF4, #D88A9F, #29638D, #2E0F1E)
• Lapis Alley color palette (#DDDFF9, #623FF2, #6E5D00, #295423, #190112)

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