Tempered Petrol color palette — #E4F2F1 · #8AB7DB · #376BA0 · #004C65 · #142D54

Built around Slate, softened by Navy — the whole palette hums with trust and stability.

The five colors

• Cream (#E4F2F1): a clean, paper-quiet neutral.
• Sky (#8AB7DB): A luminous, dusty blue — the color of open sky before noon.
• Slate (#376BA0): A full-bodied, balanced blue — the color of open sky before noon.
• Navy (#004C65): A deep, shadowed, dusty blue — the color of open sky before noon.
• Navy (#142D54): A deep, shadowed, dusty blue — the color of open sky before noon.

Feels like: Trust, Stability, Calm, Sophistication. Tagged coastal, cool, light, muted.

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

• Tempered Sapphire color palette (#F2E5EA, #9CB7CF, #3F66BC, #004A51, #150C37)
• Cypress Coast color palette (#E2F3EF, #7DBFBD, #00777D, #005146, #00353C)
• Antique Cornflower color palette (#F4EDE6, #A0CAEC, #5A82DC, #006A75, #2B2653)
• Periwinkle Station color palette (#EDF0E5, #AAD9FF, #51A9FF, #008AB5, #182E4E)
• Ancient Cerulean Grove color palette (#EBF9F6, #8EDDEA, #008EA9, #006667, #00475C)
• Softworn Cerulean color palette (#D3E3E1, #4C9AB9, #005071, #002F37, #001526)
• Softworn Petrol Grove color palette (#EDF8F7, #D9DBEB, #849BB9, #50738D, #455369)
• Byzantium Delta color palette (#F2D5E0, #B76800, #98409E, #6C3B00, #3F1342)

Browse the whole catalog at Explore, or see today's palette.