Petrol Pier color palette — #D2E9E7 · #2C9A8F · #0074A6 · #2A3200 · #000405
Built around Slate, softened by Fern — the whole palette hums with nature and growth.
The five colors
- Frost (#D2E9E7): A whisper-light, dusty teal — the color of shallow lagoons.
- Fern (#2C9A8F): A luminous, balanced teal — the color of sea glass.
- Slate (#0074A6): A full-bodied, balanced blue — the color of a favorite pair of jeans.
- Deep Forest (#2A3200): A deep, shadowed, dusty green — the color of a quiet forest floor.
- Ink (#000405): quiet, heavy and certain.
Feels like: Nature, Growth, Trust, Stability, Sophistication. Tagged pastel, 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
- Tempered Field color palette (#C3EBDE, #59A170, #007579, #3B2900, #000200)
- Weathered Teal Lagoon color palette (#D2F9E8, #27A998, #008283, #00401C, #000E10)
- Muted Sapphire Station color palette (#D7E8EB, #20A0C0, #4761CD, #003C17, #000202)
- Linen Teal color palette (#D6E5D8, #00BAB6, #008DBA, #4C5300, #061600)
- Lagoon Station color palette (#E4EDDB, #66CBB9, #00A4A8, #005B35, #000200)
- Inked Aubergine Corridor color palette (#D6E5E9, #006663, #3F005C, #002423, #010009)
- Hazy Violet color palette (#D1ECFA, #599EE3, #8252CD, #00483F, #000912)
- Pine Veranda color palette (#DBF8FF, #A5E9FF, #9AAFEA, #3A7D4D, #0F2A32)
Browse the whole catalog at Explore, or see today's palette.