Petrol Study color palette — #FFF1F6 · #E4AF80 · #A7844F · #007281 · #312234

Teal and Sand set the tone — five colors that lean into trust and stability.

The five colors

• Ivory (#FFF1F6): bright and airy, almost weightless.
• Sand (#E4AF80): A luminous, balanced gold — the color of honey in a jar.
• Caramel (#A7844F): A luminous, balanced gold — the color of old brass.
• Teal (#007281): A full-bodied, balanced blue — the color of deep harbor water.
• Onyx (#312234): A deep, shadowed, dusty pink — the color of neon signs at night.

Feels like: Trust, Stability, Optimism, Sophistication. Tagged jewel, vibrant, muted.

Use it as a design system

One click turns Petrol Study 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 Amber color palette (#F9F3FB, #EBA6B8, #C88061, #00766D, #282133)
• Petrol Canyon color palette (#EEF8EE, #C8A97C, #809D63, #4262A4, #301C24)
• Ancient Petrol color palette (#F9F2FC, #F0BACC, #AF9759, #456BA3, #542838)
• Apricot Pier color palette (#FFF0F7, #E09D71, #465A4F, #36252E, #120E12)
• Amber Parlor color palette (#E4FDEA, #C29600, #8B6F00, #005D86, #230500)
• Jade Balcony color palette (#FFF2EE, #F3A9AA, #71B88B, #4698B6, #423035)
• Hushed Grove color palette (#F9EEF8, #D4707D, #397556, #235467, #191724)
• Hushed Courtyard color palette (#F9F3F8, #E1D8D7, #A8B2BC, #DA9B99, #514B50)

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