Softworn Petrol color palette — #F3EEE5 · #97BBA6 · #00719C · #00504F · #002F55

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

The five colors

• Cream (#F3EEE5): bright and airy, almost weightless.
• Sage (#97BBA6): A luminous, dusty teal — the color of sea glass.
• Peacock (#00719C): A full-bodied, balanced blue — the color of open sky before noon.
• Forest (#00504F): A deep, shadowed, dusty teal — the color of shallow lagoons.
• Navy (#002F55): A deep, shadowed, balanced blue — the color of open sky before noon.

Feels like: Trust, Stability, Calm, Sophistication. Tagged coastal, cool, light, muted.

Use it as a design system

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

• Wandering Petrol Bloom color palette (#F5EDE1, #90B6D9, #4366A9, #004D60, #232560)
• Aged Cobalt Grove color palette (#F9F4ED, #ACCEBF, #3A7EB3, #005E67, #213A63)
• Timeworn Cobalt Hollow color palette (#F0E7E2, #93BFA6, #006FB6, #004D3C, #0E0E3A)
• Aged Courtyard color palette (#EAE3D9, #489EA6, #005364, #003129, #001622)
• Powdered Sky Veranda color palette (#E8F1EA, #98E0F5, #32B1EC, #0A908F, #12304B)
• Hazy Chapel color palette (#E6DEC7, #8D8100, #5B5AC2, #524A00, #211D5C)
• Cypress Veranda color palette (#F9F4EE, #CDE4CC, #2F9AA7, #007456, #2B513E)
• Muted Cypress color palette (#F8F5EF, #C8E7E6, #719FC0, #007E83, #614962)

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