Petrol Loft color palette — #E8F0F3 · #CDDAE0 · #99BDD3 · #008189 · #243034

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

The five colors

• Cream (#E8F0F3): a clean, paper-quiet neutral.
• Silver (#CDDAE0): bright and airy, almost weightless.
• Ash (#99BDD3): A luminous, dusty blue — the color of a favorite pair of jeans.
• Teal (#008189): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Deep Forest (#243034): a grounded near-black with real depth.

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

Use it as a design system

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

• Dusty Petrol Ridge color palette (#E0E9EF, #B5C7D5, #88A8C8, #006B87, #152128)
• Softworn Teal color palette (#E9F1E9, #C5D7D5, #A0C0C3, #00A6AB, #253126)
• Washed Cobalt color palette (#EFF6FF, #D1DFF6, #ADBDE5, #3A76CB, #253447)
• Wandering Cabin color palette (#F0F6FB, #D9DAE5, #BFC0D1, #6297B5, #404950)
• Hushed Cobalt Study color palette (#CFE7F9, #94AED0, #7780B7, #7A4A6A, #45304E)
• Dusty Aubergine color palette (#BDE8E6, #00A2C5, #006FA9, #63267E, #02273B)
• Muted Petrol Market color palette (#D5EFFF, #007DA2, #003655, #001927, #00050A)
• Washed Workshop color palette (#E8F7FF, #00D9E1, #00C1E9, #0093DE, #002D3D)

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