Tempered Petrol color palette — #F9ECE3 · #97BBAA · #3969A7 · #005146 · #2A225E

Slate and Deep Indigo set the tone — five colors that lean into trust and stability.

The five colors

• Cream (#F9ECE3): bright and airy, almost weightless.
• Sage (#97BBAA): A luminous, dusty teal — the color of shallow lagoons.
• Slate (#3969A7): A full-bodied, balanced blue — the color of a favorite pair of jeans.
• Forest (#005146): A deep, shadowed, dusty teal — the color of glacier melt.
• Deep Indigo (#2A225E): A deep, shadowed, balanced violet — the color of a velvet chair.

Feels like: Trust, Stability, Creativity, 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

• Washed Cobalt Balcony color palette (#FBF4ED, #A3D0C1, #5D75B7, #00605E, #3E3357)
• Softworn Bloom color palette (#E1EDE3, #7EBDD9, #0071AE, #004A50, #021433)
• Antique Chapel color palette (#EADBD7, #8CA789, #006176, #054207, #00213C)
• Washed Forest color palette (#FFF2EE, #99DCDB, #008DAF, #006C23, #004077)
• Muted Denim Alley color palette (#FFE8F6, #DAAEDC, #E28A6D, #005B99, #3B294B)
• Worn Onyx color palette (#F1E3DC, #6299A6, #004E79, #003122, #070148)
• Periwinkle Coast color palette (#FAE9F2, #9BDEFB, #63A6FD, #009380, #2A2850)
• Washed Alley color palette (#E9DFD4, #5D85A6, #262A8F, #002223, #0F0022)

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