Petrol Harbor color palette — #F1F5FC · #DDD9E3 · #C8BBC9 · #5C74A2 · #424851

Built around Slate, softened by Stone — the whole palette hums with creativity and sophistication.

The five colors

• Ivory (#F1F5FC): bright and airy, almost weightless.
• Silver (#DDD9E3): bright and airy, almost weightless.
• Stone (#C8BBC9): A luminous, dusty pink — the color of a candy shop window.
• Slate (#5C74A2): A full-bodied, dusty violet — the color of a velvet chair.
• Charcoal (#424851): a grounded near-black with real depth.

Feels like: Creativity, 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

• Wandering Cobalt color palette (#F6F0F4, #DED4D5, #CAB7B7, #6172A9, #322930)
• Ancient Stone Parlor color palette (#EAF2FF, #B1B1D3, #93849C, #4A6C69, #39515A)
• Muted Pewter color palette (#EDF8F0, #AAB688, #597E5A, #515777, #2D4940)
• Aged Atelier color palette (#DFE3F7, #7660B3, #342E43, #1B1E2D, #0D0C13)
• Garnet Alley color palette (#F2EDF5, #C1B4C0, #A38394, #6E264C, #231C29)
• Grape Hollow color palette (#F1F5FF, #D1CFE8, #AF9EC2, #5640B8, #2B3247)
• Timeworn Navy color palette (#DADEE6, #A7A8B7, #837999, #252881, #0C1324)
• Peony Corridor color palette (#F2F5FF, #CDDEFF, #A5ABFF, #B9649C, #393A5B)

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