Tempered Petrol color palette — #F0F4E3 · #77C8E6 · #007CA8 · #00505B · #001C2F

A conversation between Cerulean and Sky, giving this palette its sense of trust and stability.

The five colors

• Cream (#F0F4E3): A whisper-light, dusty green — the color of a quiet forest floor.
• Sky (#77C8E6): A luminous, balanced blue — the color of open sky before noon.
• Cerulean (#007CA8): A full-bodied, balanced blue — the color of deep harbor water.
• Peacock (#00505B): A deep, shadowed, dusty blue — the color of deep harbor water.
• Midnight (#001C2F): A deep, shadowed, dusty 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

• Ancient Cobalt Market color palette (#FDF1F8, #72C4E2, #0073B6, #005650, #1C2E64)
• Patina Pier color palette (#F2F3E8, #9CDDDE, #0094A0, #006359, #002B32)
• Denim Market color palette (#E8EBDE, #71A4BE, #005E8B, #003843, #000B1A)
• Navy Courtyard color palette (#DFE2D9, #587C9C, #003B74, #001D2B, #000109)
• Petrol Lantern color palette (#F1F3EC, #C6E0E1, #77A899, #007792, #432D46)
• Azure Parlor color palette (#FFF2EB, #D6E5FA, #22A0FA, #00736D, #0F1B5B)
• Ancient Orchard color palette (#F0E9FF, #8B3CE1, #B90051, #00597D, #16002D)
• Pale Nightshade color palette (#FEE9F6, #7A72EC, #00837B, #4900CA, #001B18)

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