Petrol Canyon color palette — #F9F3F9 · #E5D7D8 · #D0BAB5 · #5C759C · #4C454C

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

The five colors

• Ivory (#F9F3F9): bright and airy, almost weightless.
• Silver (#E5D7D8): bright and airy, almost weightless.
• Stone (#D0BAB5): A luminous, dusty orange — the color of toasted spice.
• Slate (#5C759C): A full-bodied, dusty blue — the color of open sky before noon.
• Charcoal (#4C454C): quiet, heavy and certain.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

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 Pewter Bloom color palette (#FEF2F2, #E4D6CB, #C6AEA2, #7B5573, #423738)
• Nightshade Chapel color palette (#FCF2F8, #EAC8D3, #C098B4, #4E4DA4, #3E2D38)
• Ancient Fern Harbor color palette (#FEE8FF, #CD9FB3, #A37575, #5C6822, #36523E)
• Aged Periwinkle Alley color palette (#F2F5FB, #DBD8E0, #C0AFB8, #8DABE5, #424851)
• Aged Alley color palette (#EDE3EB, #BAA2AB, #987479, #22316E, #1E0D1B)
• Garnet Thicket color palette (#F2E2E2, #CFB1A8, #A18878, #711F51, #2A1A1A)
• Softworn Studio color palette (#FBF4E8, #ACB682, #548052, #6D4F5F, #4E4200)
• Worn Indigo Pier color palette (#F7DCE9, #725BC6, #442A2E, #291A22, #120B0D)

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