Petrol Coast color palette — #ECF4EF · #CCDCDD · #CCBCBE · #437F8C · #282E2A

Built around Slate, softened by Stone — the whole palette hums with trust and stability.

The five colors

• Cream (#ECF4EF): bright and airy, almost weightless.
• Silver (#CCDCDD): bright and airy, almost weightless.
• Stone (#CCBCBE): a calm mid-gray that lets other colors speak.
• Slate (#437F8C): A full-bodied, dusty blue — the color of deep harbor water.
• Onyx (#282E2A): a grounded near-black with real depth.

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

Use it as a design system

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

• Tempered Petrol color palette (#F7EFF6, #E7D1D0, #DAB3BA, #5369A0, #2D202B)
• Petrol Station color palette (#EEF7FA, #D9DBE5, #C2BDCB, #3E7F8A, #3D4A4F)
• Muted Lagoon color palette (#F5F2E5, #96C093, #39856C, #3F5D4B, #272915)
• Ancient Turquoise color palette (#EEF7FB, #D7DBE6, #B3AEB8, #69A8BE, #394044)
• Timeworn Corridor color palette (#CEF4DB, #A1C0EE, #9A7885, #745806, #3D3A33)
• Antique Cobalt Orchard color palette (#D1ECE3, #007BBF, #402838, #061A15, #040705)
• Ancient Abyss Coast color palette (#E3F2EA, #AC98AE, #8D7283, #003D4E, #000603)
• Hushed Denim color palette (#F0E5EC, #DAC5CB, #B49D9E, #4A4C8F, #1E111A)

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