Petrol Harbor color palette — #FBEAE1 · #83C4C6 · #00738C · #00402A · #000307

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

The five colors

• Cream (#FBEAE1): A whisper-light, dusty orange — the color of toasted spice.
• Mint Leaf (#83C4C6): A luminous, dusty teal — the color of shallow lagoons.
• Teal (#00738C): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#00402A): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Ink (#000307): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.

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

• Hushed Cobalt Study color palette (#FCF3EE, #97D8E8, #0083BB, #005347, #000B26)
• Pale Delta color palette (#F8ECE1, #92BDDC, #225DD2, #003D42, #020012)
• Softworn Cerulean color palette (#D6E6E3, #5CC2C7, #0094A3, #006E65, #00171D)
• Lagoon Summit color palette (#E1E2D4, #009DA2, #00535C, #002C28, #000507)
• Soft Lantern color palette (#EEEDDF, #746800, #005E8F, #4700AD, #010100)
• Wandering Azure Veranda color palette (#FFF2EC, #D5DEF9, #00A8DF, #00755E, #00244A)
• Worn Pier color palette (#FCEBD5, #A37500, #2857DE, #4F3700, #00000C)
• Worn Amber color palette (#EBE7CF, #AB9000, #5C4B00, #201900, #020100)

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