Tempered Petrol Pier color palette — #EFF6FF · #DBD7EC · #B0BBDC · #4D6A9D · #354150

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

The five colors

• Ivory (#EFF6FF): bright and airy, almost weightless.
• Silver (#DBD7EC): A whisper-light, dusty violet — the color of a velvet chair.
• Sky (#B0BBDC): A luminous, dusty violet — the color of twilight just after sunset.
• Slate (#4D6A9D): A full-bodied, balanced violet — the color of wild irises.
• Charcoal (#354150): A deep, shadowed, dusty blue — the color of a favorite pair of jeans.

Feels like: Trust, Stability, Sophistication. Tagged scandi, muted, light.

Use it as a design system

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

• Muted Petrol color palette (#EDF2F9, #D8D4E7, #BABED1, #3B6CAC, #192635)
• Worn Denim color palette (#EAEFF7, #C4CCE2, #999FBC, #455182, #262E3D)
• Tempered Alley color palette (#FBF2FB, #E8D4D6, #DBB6B4, #4D87D4, #493A49)
• Washed Ridge color palette (#F6F3FB, #E3D7DE, #B8ACA7, #877B9A, #545158)
• Dusty Aubergine Hollow color palette (#EFEFF9, #ABA5BE, #837A93, #4E1E60, #13121F)
• Wandering Violet color palette (#F1F5FF, #9FC8FF, #A2AAFF, #9C67E1, #2F2D56)
• Worn Atelier color palette (#ECE7FF, #BF8ED8, #946E91, #814F41, #673B1C)
• Ancient Indigo Pier color palette (#FFEFFF, #707AFF, #703DB8, #7A1B36, #322F5A)

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