Softworn Petrol Pier color palette — #F4F6EF · #C7E5EA · #829BBF · #4A748D · #604B5D

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

The five colors

• Ivory (#F4F6EF): bright and airy, almost weightless.
• Silver (#C7E5EA): A whisper-light, dusty blue — the color of open sky before noon.
• Blue Fog (#829BBF): A luminous, dusty blue — the color of open sky before noon.
• Slate (#4A748D): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal Brown (#604B5D): A full-bodied, dusty pink — the color of a candy shop window.

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

Use it as a design system

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

• Hushed Cypress color palette (#ECF9EC, #6EC0C1, #9991C1, #008385, #644153)
• Wandering Petrol color palette (#F4F6EF, #C7E5E5, #7AA495, #3E7887, #345149)
• Powder Thicket color palette (#EFF7F7, #DADBE8, #A3C9FF, #75AAC9, #465368)
• Iris Thicket color palette (#E8FBEC, #4DA7B1, #7586C1, #5F8156, #37473A)
• Cerulean Coast color palette (#F3F7EA, #AACFBF, #497EA4, #005D71, #173D60)
• Hushed Cerulean color palette (#EBECDF, #4E9DA6, #005361, #00302E, #00171F)
• Tempered Delta color palette (#EBF1DE, #7AA4C5, #02589E, #003B50, #031D47)
• Tempered Bronze color palette (#FEF3EB, #CAB39E, #AA7243, #864D24, #653D00)

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