Softworn Petrol color palette — #EFF7F9 · #D7DAE2 · #BEBECB · #24828B · #3B4B51

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

The five colors

• Ivory (#EFF7F9): bright and airy, almost weightless.
• Silver (#D7DAE2): bright and airy, almost weightless.
• Stone (#BEBECB): soft and architectural.
• Teal (#24828B): A full-bodied, balanced blue — the color of open sky before noon.
• Charcoal (#3B4B51): A full-bodied, dusty blue — the color of a favorite pair of jeans.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

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

• Ancient Petrol Delta color palette (#EDF4EF, #CDDCDB, #A6C5C7, #2C8291, #272E29)
• Hushed Station color palette (#EEF8F2, #92B9AF, #4B8161, #15656C, #2B4942)
• Worn Denim Hollow color palette (#ECF7FE, #C4D4E7, #98A5CB, #00647F, #183747)
• Timeworn Abyss Corridor color palette (#D7E1E6, #9EABB7, #6E7FA1, #003F4A, #001721)
• Ancient Chestnut Study color palette (#DFFBFF, #97B3BC, #6C86A2, #825D3D, #55562D)
• Washed Sapphire color palette (#F1F6FB, #DDD7E6, #BBB8D9, #1264D3, #354151)
• Hushed Cocoa color palette (#EBFAE9, #47A9AB, #476B9B, #6D4300, #224151)
• Hushed Summit color palette (#DFE1E9, #B9B7C6, #9786A4, #482D8C, #1B1E2E)

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