Tempered Petrol color palette — #F3E4EF · #7CC0C9 · #007698 · #004D3A · #00172D

Built around Teal, softened by Forest — the whole palette hums with trust and stability.

The five colors

• Blush (#F3E4EF): A whisper-light, dusty pink — the color of a candy shop window.
• Ash (#7CC0C9): A luminous, dusty blue — the color of deep harbor water.
• Teal (#007698): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#004D3A): A deep, shadowed, dusty teal — the color of glacier melt.
• Midnight (#00172D): A deep, shadowed, 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

• Petrol Boulevard color palette (#F4E4E9, #8EB8E0, #5166AC, #004A54, #180938)
• Washed Cerulean Garden color palette (#F9EEF5, #ABCDDF, #3E83AE, #005D51, #0D203E)
• Denim Study color palette (#F4E3EC, #65A6C3, #005A9D, #003938, #04022F)
• Aged Meadow color palette (#F5F7E7, #B1F3FB, #00A3BC, #006A67, #00232D)
• Cypress Hollow color palette (#F6EFF4, #D4D2E7, #7BA1BE, #35796A, #28374A)
• Navy Delta color palette (#E8DBE2, #32839D, #003F65, #001F1D, #00000D)
• Blush Bloom color palette (#E7F0FF, #D1B8FA, #DB8AB5, #0C688C, #1B1134)
• Ancient Sapphire color palette (#D5E3FF, #525EC6, #755A00, #554D00, #05032B)

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