Petrol Terrace color palette — #F0F6FB · #D9D8E2 · #AFB2C4 · #2F6A8F · #323C44

A conversation between Peacock and Ash, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F0F6FB): a clean, paper-quiet neutral.
• Silver (#D9D8E2): a clean, paper-quiet neutral.
• Ash (#AFB2C4): A luminous, dusty violet — the color of wild irises.
• Peacock (#2F6A8F): A full-bodied, balanced blue — the color of open sky before noon.
• Charcoal (#323C44): quiet, heavy and certain.

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

Use it as a design system

One click turns Petrol Terrace 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 Bloom color palette (#F1F6FB, #D8D8E1, #BEBCCC, #3186C7, #313C46)
• Wandering Petrol color palette (#ECF4F1, #E2D3D8, #C2B1BE, #2C699B, #172320)
• Timeworn Atelier color palette (#F5F4FC, #E5D4E0, #C6B6C6, #815791, #3F3E4C)
• Washed Veranda color palette (#DCF1FF, #92A1BD, #736C8E, #3A5A53, #254B30)
• Lapis Lantern color palette (#F2F5FE, #D1D0E2, #ADA0BF, #5340BC, #2A324A)
• Patina Alley color palette (#D6E0EA, #B1B9CB, #8B8BA3, #00467C, #14202D)
• Fern Pier color palette (#FFF1F5, #7DA68D, #5A6B2C, #3B4B68, #1A3E2A)
• Weathered Boulevard color palette (#EFEDF6, #D1C8D6, #AA9BA8, #783877, #2F2C37)

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