Tempered Petrol color palette — #F2EEE6 · #94BCA7 · #006FA3 · #004F52 · #002D5C

A conversation between Peacock and Navy, giving this palette its sense of trust and stability.

The five colors

• Cream (#F2EEE6): bright and airy, almost weightless.
• Sage (#94BCA7): A luminous, dusty teal — the color of glacier melt.
• Peacock (#006FA3): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#004F52): A deep, shadowed, dusty teal — the color of sea glass.
• Navy (#002D5C): A deep, shadowed, balanced blue — the color of a favorite pair of jeans.

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 Cobalt color palette (#F9F4ED, #A4D0BF, #4B7CAD, #005E6A, #283960)
• Dusty Garden color palette (#EFE7E2, #95BEA7, #006EBA, #004D3D, #0F0E39)
• Soft Ultramarine color palette (#F4EBDE, #78A3CA, #1E51AC, #003C4B, #15154D)
• Hushed Sky Corridor color palette (#E4F3E7, #90E0FF, #5BAEE3, #009095, #112E51)
• Timeworn Abyss color palette (#E4DFD5, #5B9BA4, #005267, #00302B, #001624)
• Hushed Petrol Garden color palette (#F8F5EF, #C9E7E7, #799EBE, #1E7C86, #5F4B5E)
• Plum Drift color palette (#FFE1DE, #A4456F, #5D6500, #005476, #380C21)
• Sunlit Mulberry color palette (#F3D6D5, #B35D8B, #007D62, #830059, #003125)

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