Tempered Petrol color palette — #F8EBE6 · #97BC9F · #007296 · #00523F · #002F56

Teal and Navy set the tone — five colors that lean into nature and growth.

The five colors

• Cream (#F8EBE6): a clean, paper-quiet neutral.
• Sage (#97BC9F): A luminous, dusty teal — the color of shallow lagoons.
• Teal (#007296): A full-bodied, balanced blue — the color of deep harbor water.
• Forest (#00523F): A deep, shadowed, dusty teal — the color of glacier melt.
• Navy (#002F56): A deep, shadowed, balanced blue — the color of open sky before noon.

Feels like: Nature, Growth, 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

• Softworn Cobalt color palette (#FDF3ED, #AACFB9, #2480B7, #006157, #283A5C)
• Patina Sapphire color palette (#F4EDE5, #92BBB0, #485FBD, #004E5A, #2F2452)
• Petrol Veranda color palette (#DCEDEA, #7CC0CA, #00788C, #004B4A, #001922)
• Hushed Canyon color palette (#EEE4DE, #72A7C0, #00589F, #003E3D, #121450)
• Aged Delta color palette (#F1E6E1, #7B9978, #005361, #003219, #001623)
• Softworn Studio color palette (#F7EAF4, #9AE1EB, #2EB3E4, #009474, #0B2F51)
• Patina Onyx color palette (#E9DED7, #498AA2, #003F69, #002220, #02002F)
• Soft Lapis color palette (#E9DCC8, #9D7900, #5A5CC0, #5C4500, #201C5F)

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