Petrol Garden color palette — #ECF4F0 · #8FCDEB · #8E77A8 · #357A99 · #211016

Slate and Slate Blue set the tone — five colors that lean into trust and stability.

The five colors

• Cream (#ECF4F0): a clean, paper-quiet neutral.
• Sky (#8FCDEB): A luminous, dusty blue — the color of deep harbor water.
• Slate Blue (#8E77A8): A luminous, dusty violet — the color of a velvet chair.
• Slate (#357A99): A full-bodied, balanced blue — the color of deep harbor water.
• Ink (#211016): A deep, shadowed, dusty rose — the color of pressed rose petals.

Feels like: Trust, Stability, Creativity, Sophistication. Tagged duotone, muted.

Use it as a design system

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

• Patina Petrol Archive color palette (#F7EFF4, #B9C0EB, #AE6D7E, #656CA7, #20110F)
• Softworn Courtyard color palette (#EFF6F9, #9CC8D9, #9F6A88, #007C87, #312A38)
• Cerulean Dune color palette (#EEF4EC, #90D2C6, #5289AF, #2D8175, #0A1915)
• Softworn Pewter color palette (#FCF0DF, #8FADDA, #7E6EA1, #6C4A21, #372533)
• Onyx Canyon color palette (#CEFEEE, #AEC3EF, #7F83B9, #614C7F, #3F1547)
• Cerulean Parlor color palette (#EFF6FB, #A5DAF4, #9B91D0, #0099CA, #2A2D3A)
• Dusty Cerulean color palette (#E9F5F1, #4E91B6, #9C5A63, #5D501B, #182111)
• Turquoise Bloom color palette (#F0F7F2, #D0D7EB, #D399C1, #3AABBA, #291A1B)

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