Petrol Harbor color palette — #FAF4EC · #C0E6D9 · #708CB3 · #266C7D · #5A3C53

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

The five colors

• Ivory (#FAF4EC): bright and airy, almost weightless.
• Celadon Mist (#C0E6D9): A whisper-light, dusty teal — the color of shallow lagoons.
• Slate Blue (#708CB3): A luminous, dusty blue — the color of open sky before noon.
• Peacock (#266C7D): A full-bodied, dusty blue — the color of open sky before noon.
• Cocoa (#5A3C53): A deep, shadowed, dusty pink — the color of a candy shop window.

Feels like: Trust, Stability, Calm, Sophistication. Tagged coastal, cool, light, 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

• Cypress Garden color palette (#FAF4EC, #CAE4D3, #5A93AD, #14706B, #285046)
• Iris Station color palette (#F6F1EC, #C8E3DA, #768BC6, #006D6B, #302448)
• Worn Cobalt color palette (#FEF4E3, #A3D6F6, #3682D0, #006473, #2A3C6F)
• Lagoon Thicket color palette (#FAF3F6, #D7DDFB, #94A3D2, #008C8D, #424465)
• Aged Abyss Studio color palette (#EAE0D0, #4C89A2, #004063, #002224, #00081C)
• Softworn Denim Archive color palette (#F7EDDD, #5AADBB, #00617B, #003E39, #002236)
• Tempered Moss Studio color palette (#F7F7DC, #699942, #447DBE, #94525A, #383831)
• Gentle Olive Hollow color palette (#F8F7DE, #91AA6B, #9D77B8, #54710B, #4C395A)

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