Petrol Villa color palette — #F8ECE3 · #8DBEA8 · #286AAB · #00504E · #222A52
Slate and Midnight set the tone — five colors that lean into trust and stability.
The five colors
- Cream (#F8ECE3): a clean, paper-quiet neutral.
- Mint Leaf (#8DBEA8): A luminous, dusty teal — the color of sea glass.
- Slate (#286AAB): A full-bodied, balanced blue — the color of a favorite pair of jeans.
- Forest (#00504E): A deep, shadowed, dusty teal — the color of shallow lagoons.
- Midnight (#222A52): A deep, shadowed, dusty 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 Petrol Villa 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
- Hushed Cobalt Parlor color palette (#FDF3EA, #A2D1C1, #5377B8, #005F65, #36355F)
- Wandering Parlor color palette (#E1EBEA, #91B9D4, #0B73A4, #004957, #00172B)
- Worn Lantern color palette (#F3E7E0, #89A887, #006272, #004122, #002334)
- Weathered Market color palette (#EDDDD5, #4F9CAD, #005071, #003128, #001232)
- Quiet Denim color palette (#FFE2EE, #DDADDE, #D48189, #295799, #3D2849)
- Wandering Alley color palette (#F9EAF1, #B0D9F5, #54A8FF, #00918F, #222A51)
- Aged Cerulean Lantern color palette (#FBF3F0, #CDE3D0, #4A95AF, #346F58, #1E5246)
- Tempered Cypress color palette (#FAF4EE, #CAE7E8, #809BC1, #327B7F, #624A5A)
Browse the whole catalog at Explore, or see today's palette.