Tempered Petrol color palette — #FFF2EC · #70C7D5 · #0078A1 · #005846 · #003363
A conversation between Cerulean and Navy, giving this palette its sense of trust and stability.
The five colors
- Ivory (#FFF2EC): a clean, paper-quiet neutral.
- Aqua (#70C7D5): A luminous, balanced blue — the color of open sky before noon.
- Cerulean (#0078A1): A full-bodied, balanced blue — the color of a favorite pair of jeans.
- Pine (#005846): A full-bodied, dusty teal — the color of shallow lagoons.
- Navy (#003363): A deep, shadowed, balanced blue — the color of a favorite pair of jeans.
Feels like: Trust, Stability, Calm, Balance. Tagged coastal, cool, light.
Use it as a design system
One click turns Tempered Petrol 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
- Powdered Sapphire color palette (#FFF3E8, #90BEDC, #2969CC, #00555A, #2B276A)
- Patina Petrol color palette (#E3F7F3, #67CCDD, #007F97, #005152, #001E28)
- Timeworn Cerulean Bloom color palette (#F5F7EA, #7BDCEC, #009CBA, #007273, #00394A)
- Weathered Hollow color palette (#F1E4DE, #65AABC, #005E88, #003F36, #001B4B)
- Muted Sky Alley color palette (#FFF0FB, #79EEFF, #00BAF4, #009B7C, #003361)
- Washed Coast color palette (#C3FFE6, #00B889, #006850, #003A2A, #002317)
- Hushed Market color palette (#FAF4F0, #CBE7E5, #749EC0, #177F75, #604B5D)
- Hushed Canyon color palette (#EDFCD4, #80DFDD, #16AFF4, #667100, #004737)
Browse the whole catalog at Explore, or see today's palette.