Tempered Villa color palette — #F0F7F2 · #ABC9E3 · #567AA8 · #005D6E · #2C3860

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

The five colors

• Ivory (#F0F7F2): bright and airy, almost weightless.
• Sky (#ABC9E3): A whisper-light, dusty blue — the color of open sky before noon.
• Slate (#567AA8): A full-bodied, balanced blue — the color of open sky before noon.
• Peacock (#005D6E): A full-bodied, dusty blue — the color of deep harbor water.
• Navy (#2C3860): A deep, shadowed, dusty violet — the color of wild irises.

Feels like: Trust, Stability, Creativity, Calm, Sophistication. Tagged coastal, cool, light, muted.

Use it as a design system

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

• Weathered Petrol color palette (#E9FAED, #6BC5E6, #0076AC, #005558, #003265)
• Dusty Cobalt color palette (#FAEEF3, #ADCBE5, #5F77C1, #005B5A, #25163F)
• Cerulean Pier color palette (#EAFAED, #95DDDE, #008FA3, #006953, #00475D)
• Petrol Lagoon color palette (#F0F7F2, #D8DDEE, #7D9CBE, #307A86, #43536D)
• Weathered Orchard color palette (#F8F5EF, #C2EBDC, #7BB4FE, #009CB6, #2D385C)
• Cerulean Alley color palette (#DDEDE0, #479DAE, #00516B, #00302D, #001527)
• Weathered Workshop color palette (#CFE6D1, #2DB58B, #007A69, #005853, #0F3B51)
• Navy Courtyard color palette (#E2ECE4, #6284A2, #0B3681, #00212A, #05002C)

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