Petrol Loft color palette — #E5F3E7 · #8EB8D1 · #216F9D · #004F53 · #052D5A
Built around Slate, softened by Navy — the whole palette hums with trust and stability.
The five colors
- Cream (#E5F3E7): A whisper-light, dusty green — the color of new leaves after rain.
- Ash (#8EB8D1): A luminous, dusty blue — the color of deep harbor water.
- Slate (#216F9D): A full-bodied, balanced blue — the color of open sky before noon.
- Forest (#004F53): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
- Navy (#052D5A): A deep, shadowed, balanced 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 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
- Weathered Cobalt color palette (#EEF9F0, #AAC9E2, #437BB6, #005E6B, #2A395D)
- Tempered Cobalt color palette (#F0E5EC, #8FBAD4, #276BB9, #004C41, #130A3D)
- Muted Boulevard color palette (#C9F8FF, #92D1D3, #63ACD6, #356F42, #0D3E47)
- Azure Meadow color palette (#F2EEE6, #B2DFC8, #28AFFA, #009096, #122E51)
- Muted Abyss Archive color palette (#DEE9E0, #529CA8, #005268, #00302B, #001625)
- Petrol Meadow color palette (#F1F7F2, #D7DEEF, #7F9DB9, #337A83, #455467)
- Dusty Navy color palette (#E1EEE3, #5386AC, #00397D, #002129, #04002D)
- Tempered Drift color palette (#DAE9D5, #37A74A, #006A49, #004B3D, #003632)
Browse the whole catalog at Explore, or see today's palette.