Tempered Petrol color palette — #E6F2E8 · #7CB8E6 · #3368B0 · #004D5D · #202956
A conversation between Royal Blue and Sky, giving this palette its sense of trust and stability.
The five colors
- Cream (#E6F2E8): a clean, paper-quiet neutral.
- Sky (#7CB8E6): A luminous, balanced blue — the color of open sky before noon.
- Royal Blue (#3368B0): A full-bodied, balanced blue — the color of deep harbor water.
- Deep Teal (#004D5D): A deep, shadowed, dusty blue — the color of deep harbor water.
- Navy (#202956): A deep, shadowed, balanced violet — the color of a velvet chair.
Feels like: Trust, Stability, Creativity, 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
- Hushed Petrol color palette (#F3E5EA, #96B8D5, #4C69A5, #004A51, #150A3B)
- Softworn Petrol Coast color palette (#E5F3E8, #71C1C0, #007683, #00523D, #003343)
- Wandering Coast color palette (#ECF1E3, #AFD9F9, #5FA9F2, #008BB4, #122D55)
- Worn Cobalt color palette (#F5EDE5, #99CBF1, #6585C4, #006B73, #2A2459)
- Chalky Cerulean color palette (#ECF9EE, #7FDFF0, #008CB2, #00675F, #004468)
- Washed Cerulean Grove color palette (#D8E5DA, #459BBB, #004E78, #002F32, #001330)
- Hushed Ash color palette (#F0F7F1, #DBDDED, #8499C3, #527487, #4A5265)
- Coral Garden color palette (#EDEBFF, #FFB4EE, #D67383, #625492, #392F4D)
Browse the whole catalog at Explore, or see today's palette.