Petrol Harbor color palette — #F6EFF5 · #E0D4D4 · #CCB7B5 · #63759B · #302A2F

A conversation between Slate and Stone, giving this palette its sense of sophistication.

The five colors

• Ivory (#F6EFF5): a clean, paper-quiet neutral.
• Silver (#E0D4D4): bright and airy, almost weightless.
• Stone (#CCB7B5): A luminous, dusty orange — the color of autumn markets.
• Slate (#63759B): A full-bodied, dusty violet — the color of wild irises.
• Onyx (#302A2F): a grounded near-black with real depth.

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

Use it as a design system

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

• Softworn Cobalt color palette (#F1F5FB, #DCD9E0, #C9BAC7, #5275A9, #424850)
• Washed Villa color palette (#F8EFEF, #E0D4CA, #C7B2AA, #865072, #291D1D)
• Dusty Chestnut Loft color palette (#FFE4F6, #D2B4BD, #AC8080, #735906, #383831)
• Weathered Garden color palette (#F5F2E7, #B7B593, #59815A, #3D5C54, #2A2812)
• Hushed Nightshade color palette (#FCEDF5, #E9CAD4, #C99FA5, #5848A9, #25141E)
• Aged Indigo color palette (#F6E5ED, #7964B9, #44272F, #201018, #0A0409)
• Hushed Workshop color palette (#EADDE6, #AD99A2, #957079, #282977, #0B0108)
• Tempered Garnet Boulevard color palette (#E9E0DF, #C4AEA7, #A68575, #6D2648, #170504)

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