Petrol Harbor color palette — #E9F8FF · #87B8CD · #BF82AC · #008192 · #643F59

Teal and Dusty Rose set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#E9F8FF): a clean, paper-quiet neutral.
• Ash (#87B8CD): A luminous, dusty blue — the color of open sky before noon.
• Dusty Rose (#BF82AC): A luminous, balanced pink — the color of a candy shop window.
• Teal (#008192): A full-bodied, balanced blue — the color of deep harbor water.
• Cocoa (#643F59): A full-bodied, dusty pink — the color of peonies in June.

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

Use it as a design system

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

• Petrol Orchard color palette (#E9F8FF, #78BCCB, #C4886F, #008194, #6A4130)
• Timeworn Quarry color palette (#E8FAF7, #84BCB5, #BC85A3, #3D853D, #663F55)
• Timeworn Blush Archive color palette (#ECF5EA, #6DC5BB, #D18194, #00837A, #472721)
• Softworn Lantern color palette (#EBF8FA, #8CD4CB, #E796A8, #2AA095, #57465C)
• Rust Grove color palette (#EAF8FF, #61A3B5, #AF7494, #A75657, #2D4653)
• Antique Summit color palette (#FCF2F8, #AABFA9, #987389, #814B54, #3B4D43)
• Ultramarine Grove color palette (#EFF6FF, #879FD2, #BF7538, #335BC9, #613611)
• Tempered Denim color palette (#F0F6FC, #D8B3CF, #396282, #183C56, #252730)

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