Petrol Pier color palette — #F0E7E1 · #95BEAA · #316CB1 · #004C41 · #130B3A
Slate and Deep Indigo set the tone — five colors that lean into trust and stability.
The five colors
- Parchment (#F0E7E1): a clean, paper-quiet neutral.
- Sage (#95BEAA): A luminous, dusty teal — the color of shallow lagoons.
- Slate (#316CB1): A full-bodied, balanced blue — the color of open sky before noon.
- Forest (#004C41): A deep, shadowed, dusty teal — the color of glacier melt.
- Deep Indigo (#130B3A): A deep, shadowed, balanced violet — the color of twilight just after sunset.
Feels like: Trust, Stability, Creativity, Calm, Sophistication. Tagged coastal, cool, light, muted.
Use it as a design system
One click turns Petrol Pier 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
- Ancient Corridor color palette (#FAF0E7, #A1D4C2, #607AB7, #005C58, #23193A)
- Petrol Bloom color palette (#F4EEE3, #88BACF, #006EA8, #004F54, #0F2D56)
- Nightshade Corridor color palette (#E7DFD5, #74A1C8, #414CA9, #00393B, #120025)
- Forest Thicket color palette (#FCEFEB, #9FDDDC, #0F90B3, #006723, #00254A)
- Hushed Azure color palette (#ECF9EE, #CDE1FF, #399ADA, #00696F, #041D40)
- Tempered Cerulean Atelier color palette (#FAEAE2, #2D9AA9, #004F73, #002D1C, #00001E)
- Weathered Navy color palette (#E7DCD1, #4B7EA5, #232B8A, #001F1F, #020007)
- Plum Coast color palette (#FDDDD6, #B92A5D, #006F56, #005256, #1D0007)
Browse the whole catalog at Explore, or see today's palette.