Petrol Workshop color palette — #F1F7F2 · #D9DDEE · #7C9BC3 · #377988 · #495364

A conversation between Teal and Blue Fog, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F1F7F2): a clean, paper-quiet neutral.
• Silver (#D9DDEE): A whisper-light, dusty violet — the color of twilight just after sunset.
• Blue Fog (#7C9BC3): A luminous, dusty blue — the color of deep harbor water.
• Teal (#377988): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal Brown (#495364): A full-bodied, dusty violet — the color of a velvet chair.

Feels like: Trust, Stability, Sophistication. Tagged coastal, cool, light, muted.

Use it as a design system

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

• Muted Delta color palette (#F8EFF2, #D9D0E3, #8A9BC7, #3B7774, #323546)
• Ancient Petrol Coast color palette (#E8F1EA, #82BCC9, #007295, #00504B, #00314F)
• Softworn Courtyard color palette (#F4F6EF, #CCE3E6, #9FD3C6, #75ABC2, #5E4B5E)
• Powder Chapel color palette (#FAF4EE, #C3F1F5, #9FB1D9, #758F72, #624B56)
• Lagoon Market color palette (#E1EDE3, #4D9EA0, #005360, #003125, #001720)
• Hushed Cerulean color palette (#F0F8F1, #86DFE6, #008EA8, #006858, #004661)
• Olive Lantern color palette (#E8FAF4, #A4B97C, #AC87C7, #657D2E, #4B4A63)
• Cobalt Alley color palette (#E1FCF5, #85A36A, #4D8DD0, #9C646B, #324742)

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