Petrol Basin color palette — #ECF4F1 · #DCD1CF · #C6B5B7 · #417C9E · #222F2A

Built around Slate, softened by Stone — the whole palette hums with trust and stability.

The five colors

• Ivory (#ECF4F1): bright and airy, almost weightless.
• Oat (#DCD1CF): bright and airy, almost weightless.
• Stone (#C6B5B7): soft and architectural.
• Slate (#417C9E): A full-bodied, balanced blue — the color of deep harbor water.
• Deep Forest (#222F2A): quiet, heavy and certain.

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

Use it as a design system

One click turns Petrol Basin 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 Delta color palette (#F0F6FA, #DBDAE3, #C6BCCB, #397D9A, #3C4A53)
• Washed Station color palette (#F9EFF3, #E4D2CE, #D5B6B9, #6C5BAE, #2F2028)
• Hushed Coast color palette (#F1F3E7, #8CC0AB, #48817A, #3B5E4A, #222B18)
• Softworn Chestnut color palette (#F8E2F9, #CCADBF, #94787E, #7D4F11, #38362F)
• Ash Parlor color palette (#EFF7F3, #DED4D2, #A5A095, #6EA7C1, #38423D)
• Antique Navy color palette (#D6E5E0, #AC99A8, #8D7381, #003860, #000604)
• Worn Iris color palette (#FCECFC, #B1E6FF, #99BFFF, #8C7AC1, #192445)
• Patina Aubergine color palette (#F2E5EA, #D9C6C9, #B49D9E, #61428A, #1E1117)

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