Petrol Canyon color palette — #F7ECE3 · #8FBCB0 · #4E64A7 · #004E59 · #2F2454

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

The five colors

• Cream (#F7ECE3): bright and airy, almost weightless.
• Ash (#8FBCB0): A luminous, dusty teal — the color of shallow lagoons.
• Slate (#4E64A7): A full-bodied, balanced violet — the color of wild irises.
• Deep Teal (#004E59): A deep, shadowed, dusty blue — the color of open sky before noon.
• Deep Indigo (#2F2454): A deep, shadowed, balanced violet — the color of wild irises.

Feels like: Trust, Stability, Creativity, Calm, Sophistication. Tagged coastal, cool, light, muted.

Use it as a design system

One click turns Petrol Canyon 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

• Worn Petrol color palette (#F5ECE8, #82BDC3, #007393, #00523C, #003053)
• Washed Sapphire color palette (#FFF3E7, #89BFE6, #2764DD, #00555B, #2F1F74)
• Dusty Chapel color palette (#E0ECEB, #8FB8DE, #256BBB, #004763, #051334)
• Sunlit Harbor color palette (#ECF0E5, #9ACAF5, #4187DC, #00668C, #182C55)
• Worn Ridge color palette (#DDFDF4, #C3BDE8, #C48EBB, #006372, #2A2E52)
• Quiet Cobalt Ridge color palette (#FFF2EC, #97DBEA, #0089C0, #006858, #163F76)
• Feathered Navy Archive color palette (#C7E7EB, #009BBC, #005F96, #002F9F, #25266B)
• Pale Coast color palette (#F8E8DD, #6098B2, #004A88, #00302F, #0A0345)

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