Tempered Petrol color palette — #FCF2F7 · #DCC188 · #6A6AA7 · #55374A · #2B1C25

Slate and Sand set the tone — five colors that lean into optimism and creativity.

The five colors

• Ivory (#FCF2F7): a clean, paper-quiet neutral.
• Sand (#DCC188): A whisper-light, balanced gold — the color of honey in a jar.
• Slate (#6A6AA7): A full-bodied, balanced violet — the color of wild irises.
• Charcoal (#55374A): A deep, shadowed, dusty pink — the color of a candy shop window.
• Onyx (#2B1C25): A deep, shadowed, dusty pink — the color of neon signs at night.

Feels like: Optimism, Creativity, Sophistication. Tagged luxury, dark, 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 Courtyard color palette (#EAF9F3, #DAC18C, #0C7BAA, #1A475F, #172520)
• Cobalt Harbor color palette (#F2F5FF, #F6D8C9, #746EA5, #373257, #0C0E1B)
• Tempered Parlor color palette (#F1F5FF, #D3DCA1, #8890C7, #546284, #1D212D)
• Worn Stone color palette (#FEF0FC, #A3B970, #394F84, #3D243A, #23181B)
• Worn Mulberry Balcony color palette (#FBEAE8, #D3AF60, #974360, #562034, #22110F)
• Tempered Chapel color palette (#FBF3F4, #E2D8D4, #CEBEB2, #A281AD, #4F4547)
• Worn Rose color palette (#FCF2F6, #C9B9F5, #DE6266, #896EC2, #321E17)
• Grape Thicket color palette (#F6DDE5, #D6A200, #7726B5, #3D135F, #160624)

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