Petrol Pier color palette — #F7EFE2 · #97BCA2 · #0080A4 · #005A53 · #002237
Built around Cerulean, softened by Peacock — the whole palette hums with nature and growth.
The five colors
- Cream (#F7EFE2): bright and airy, almost weightless.
- Sage (#97BCA2): A luminous, dusty teal — the color of shallow lagoons.
- Cerulean (#0080A4): A full-bodied, balanced blue — the color of deep harbor water.
- Peacock (#005A53): A full-bodied, dusty teal — the color of sea glass.
- Midnight (#002237): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.
Feels like: Nature, Growth, Trust, Stability, 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
- Linen Cobalt color palette (#F6EEE1, #8EBDAE, #3B73C6, #005768, #121352)
- Cerulean Thicket color palette (#EEF8F0, #75DDF1, #0087AC, #00524C, #000E1B)
- Denim Ridge color palette (#F1E2DB, #67ABB8, #005D8A, #00402B, #0D194B)
- Antique Bloom color palette (#E5DFD5, #7A9C82, #006279, #003C34, #000B14)
- Patina Ridge color palette (#F5E6F1, #74D0E1, #349BD9, #00815B, #101B43)
- Azure Garden color palette (#F9F4EC, #B3E0D0, #6598D6, #00798D, #2C385D)
- Linen Cornflower Coast color palette (#FFF4E2, #9FD1FB, #3A88FF, #006F86, #222772)
- Tempered Lagoon Ridge color palette (#F8F5EF, #CFE2DD, #97BCA1, #4F967F, #345244)
Browse the whole catalog at Explore, or see today's palette.