Petrol Field color palette — #F4F6EF · #BCDDD3 · #6E98CB · #00769E · #263A5D

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

The five colors

• Ivory (#F4F6EF): bright and airy, almost weightless.
• Silver (#BCDDD3): A whisper-light, dusty teal — the color of glacier melt.
• Blue Fog (#6E98CB): A luminous, balanced blue — the color of a favorite pair of jeans.
• Slate (#00769E): A full-bodied, balanced blue — the color of deep harbor water.
• Navy (#263A5D): A deep, shadowed, dusty violet — the color of a velvet chair.

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

• Feathered Workshop color palette (#F4F7E9, #96D5F3, #0096D7, #006F83, #00355A)
• Turquoise Lagoon color palette (#F5F6EF, #C6DBC7, #38A6B2, #007D71, #00424E)
• Petrol Alley color palette (#EEF0E5, #66ADC2, #007191, #00494F, #001623)
• Weathered Cobalt Studio color palette (#FCF4EB, #A5CFC3, #5A75B9, #005E69, #39345B)
• Patina Powder color palette (#FEF1F5, #C6E4FF, #95B0F1, #4999A5, #323955)
• Cobalt Workshop color palette (#FFD9E6, #A683CB, #C96675, #007FBB, #332244)
• Hushed Cypress Lantern color palette (#E3E3D4, #7E9C7B, #006569, #003C33, #000C0E)
• Violet Delta color palette (#FFF1F3, #FFD1D5, #EFB1CA, #9B6EBB, #55363C)

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