Petrol Coast color palette — #F4F6EF · #C8E4E5 · #77A496 · #38788C · #5C4C5F

A conversation between Slate and Eucalyptus, giving this palette its sense of trust and stability.

The five colors

• Ivory (#F4F6EF): bright and airy, almost weightless.
• Silver (#C8E4E5): A whisper-light, dusty teal — the color of sea glass.
• Eucalyptus (#77A496): A luminous, dusty teal — the color of sea glass.
• Slate (#38788C): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal Brown (#5C4C5F): 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 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

• Worn Canyon color palette (#F4F6EF, #C5E7E6, #76A592, #557860, #305248)
• Timeworn Cerulean Alley color palette (#F3F7ED, #C4E5DA, #608EBE, #226B87, #593C58)
• Weathered Lagoon color palette (#FAF3F6, #D9DEED, #93B3E0, #449597, #46526E)
• Petrol Veranda color palette (#EEF0E5, #76BFCA, #00748A, #00504F, #003343)
• Softworn Moss color palette (#F8F7DD, #85A363, #309B9B, #996B3F, #43433C)
• Hushed Lagoon Field color palette (#E5E6D8, #519E9B, #005458, #003129, #00181C)
• Worn Market color palette (#F6F7E8, #9CDBDD, #00909D, #00675E, #004855)
• Navy Coast color palette (#E3E7DC, #6284A4, #003A79, #00202F, #00022B)

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