Petrol Terrace color palette — #D5ECD3 · #86AE91 · #3E7B94 · #674858 · #55312C

Slate and Sage set the tone — five colors that lean into nature and growth.

The five colors

• Honeydew (#D5ECD3): A whisper-light, dusty green — the color of a quiet forest floor.
• Sage (#86AE91): A luminous, dusty teal — the color of sea glass.
• Slate (#3E7B94): A full-bodied, dusty blue — the color of a favorite pair of jeans.
• Charcoal Brown (#674858): A full-bodied, dusty rose — the color of a warm blush.
• Cocoa (#55312C): A deep, shadowed, dusty orange — the color of autumn markets.

Feels like: Nature, Growth, Trust, Stability, Sophistication. Tagged vintage, retro, muted.

Use it as a design system

One click turns Petrol Terrace 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

• Lagoon Basin color palette (#E3E9BF, #9BA584, #46897C, #315670, #4B3A4A)
• Wandering Bloom color palette (#F1F1D5, #65B9AA, #4B7A8F, #713613, #42240F)
• Denim Terrace color palette (#CFE5D8, #81B4D2, #866987, #65476C, #52393A)
• Petrol Chapel color palette (#CEEFE2, #BA9BBC, #5F6CA6, #6F4648, #5C2F00)
• Cerulean Terrace color palette (#D8FAE3, #A4C1B4, #6D8EAF, #715B7D, #634C4E)
• Cobalt Orchard color palette (#C5E4F4, #5EA5DD, #486FBF, #633862, #5A1F25)
• Patina Pine color palette (#F5F6EA, #77A97F, #00764A, #3A5332, #35362F)
• Muted Cocoa Workshop color palette (#E3E2AF, #9DD3BA, #7BAAC4, #A67867, #673B2B)

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