Tempered Petrol color palette — #F4E4ED · #8FBAD2 · #2070A9 · #004C46 · #061138

Slate and Deep Indigo set the tone — five colors that lean into trust and stability.

The five colors

• Blush (#F4E4ED): A whisper-light, dusty pink — the color of a candy shop window.
• Ash (#8FBAD2): A luminous, dusty blue — the color of deep harbor water.
• Slate (#2070A9): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#004C46): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Deep Indigo (#061138): A deep, shadowed, dusty violet — the color of a velvet chair.

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

• Cobalt Coast color palette (#FAEEF3, #A9CDE6, #557EB2, #005B5D, #191B41)
• Pale Orchard color palette (#EEDCE1, #70A2CB, #2F50AB, #00383F, #0C002B)
• Muted Field color palette (#F8EFF3, #D7D1E5, #7E9FC3, #377775, #2C3649)
• Denim Field color palette (#F7ECF4, #4B97A1, #00516B, #002D21, #00040E)
• Wandering Navy Boulevard color palette (#ECDCE2, #447FA6, #00318B, #001F22, #01000A)
• Emerald Thicket color palette (#DFE5D4, #3D9E3B, #006A44, #003B32, #001818)
• Hushed Balcony color palette (#CAEFF1, #7FD5E1, #77A1D1, #47722E, #001C1A)
• Chalky Mulberry color palette (#D6E7E1, #007E64, #A21774, #8C004B, #000E09)

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