Petrol Field color palette — #F9F4ED · #B6DFCC · #659BC8 · #007B84 · #223A60

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

The five colors

• Ivory (#F9F4ED): a clean, paper-quiet neutral.
• Celadon Mist (#B6DFCC): A whisper-light, dusty teal — the color of glacier melt.
• Blue Fog (#659BC8): A luminous, balanced blue — the color of deep harbor water.
• Teal (#007B84): A full-bodied, balanced blue — the color of open sky before noon.
• Navy (#223A60): 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 Field 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

• Muted Veranda color palette (#F3EEE5, #B0CEB1, #0097AC, #006E57, #003344)
• Muted Lagoon color palette (#F8F5EF, #C5E5DA, #4AB6C3, #01906A, #144F60)
• Ancient Petrol color palette (#F6EDDE, #73ADB2, #007288, #004B3F, #001622)
• Chalky Atelier color palette (#E6DFD5, #609ABC, #005A9D, #003A42, #000030)
• Washed Orchard color palette (#FBF2F6, #B5E9FF, #7DB5FA, #4F9C8B, #36365B)
• Cobalt Basin color palette (#FDF3EB, #9ACDE5, #3A78CA, #006155, #373659)
• Lagoon Courtyard color palette (#F8F5EF, #C9E8E7, #8CBDAC, #2B979B, #5E4B5F)
• Muted Cobalt Workshop color palette (#ECE7DF, #86B8DB, #3175C6, #005766, #10194A)

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