Tempered Pier color palette — #F6F6E9 · #98A079 · #2C7159 · #37487A · #35362F

Navy and Pine set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F6F6E9): a clean, paper-quiet neutral.
• Taupe (#98A079): A luminous, dusty green — the color of fresh herbs.
• Pine (#2C7159): A full-bodied, dusty teal — the color of sea glass.
• Navy (#37487A): A full-bodied, balanced violet — the color of twilight just after sunset.
• Espresso (#35362F): quiet, heavy and certain.

Feels like: Nature, Growth, Creativity, Sophistication, Grounding. Tagged botanical, earthy, muted.

Use it as a design system

One click turns Tempered 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 Pine color palette (#F7F1E7, #93A976, #107751, #623649, #1F1D06)
• Softworn Basalt Alley color palette (#FDF4E7, #BDAE8A, #6F794D, #5A537E, #533F00)
• Mulberry Delta color palette (#F8F6E1, #7BB37E, #007D58, #7A335E, #1D4521)
• Tempered Grove color palette (#F8EACF, #92992E, #3F6800, #592B6F, #2E3100)
• Cobalt Lantern color palette (#F8F4EE, #ADCEBD, #2B7FB5, #005F64, #203B5F)
• Dusty Navy color palette (#E7E9D9, #51876B, #005144, #27255F, #002112)
• Tempered Hollow color palette (#E2FCF5, #A7D8AF, #5EB393, #7084A7, #133D3A)
• Aged Archive color palette (#FFE8E7, #B97596, #008F65, #9B0065, #00402B)

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