Petrol Coast color palette — #DFF5F3 · #8AADB8 · #5B799B · #664655 · #312400

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

The five colors

• Cream (#DFF5F3): A whisper-light, dusty teal — the color of sea glass.
• Blue Fog (#8AADB8): A luminous, dusty blue — the color of open sky before noon.
• Slate (#5B799B): A full-bodied, dusty blue — the color of deep harbor water.
• Charcoal Brown (#664655): A full-bodied, dusty rose — the color of pressed rose petals.
• Espresso (#312400): A deep, shadowed, dusty gold — the color of honey in a jar.

Feels like: Trust, Stability, Sophistication. Tagged vintage, retro, 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

• Timeworn Petrol color palette (#CFE6E4, #6EACAB, #4C7896, #5E3C51, #3B1C2C)
• Timeworn Ash color palette (#B6EAF7, #88AFCA, #69728B, #395038, #142C14)
• Tempered Pewter color palette (#D1F6FA, #99B6C3, #7889A9, #734D5A, #1E4338)
• Ancient Thicket color palette (#D5E2F7, #9786AD, #6C597A, #124742, #012403)
• Linen Pewter Basin color palette (#DEF5F4, #649DC8, #6E599F, #4E3E00, #00300C)
• Ancient Archive color palette (#DCFFEC, #B0DDFC, #AF97AE, #81565F, #533031)
• Weathered Petrol color palette (#D3E4DF, #2C81A1, #485179, #442E04, #170D00)
• Antique Cobalt color palette (#FBEDF3, #ADCCE4, #5C7DAF, #005B5F, #1C1C3D)

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