Tempered Pier color palette — #F9F5EB · #A1891E · #217E67 · #6D4044 · #3B3530

Moss and Teal set the tone — five colors that lean into nature and growth.

The five colors

• Ivory (#F9F5EB): bright and airy, almost weightless.
• Moss (#A1891E): A luminous, balanced green — the color of new leaves after rain.
• Teal (#217E67): A full-bodied, balanced teal — the color of shallow lagoons.
• Cocoa (#6D4044): A full-bodied, dusty red — the color of embers at dusk.
• Espresso (#3B3530): a grounded near-black with real depth.

Feels like: Nature, Growth, Sophistication. Tagged jewel, vibrant, 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 Amber color palette (#FCF3EC, #BE7432, #5A7747, #6A405B, #541D00)
• Tempered Moss color palette (#F6F6E7, #83A464, #3D7E6F, #335E49, #5E3900)
• Hushed Olive color palette (#F7F6E7, #6A8C42, #00797F, #285173, #33302A)
• Aged Studio color palette (#F6F1E8, #A3803C, #35768D, #533D6A, #29160F)
• Washed Bronze color palette (#F8F5ED, #D7DCD2, #9EB1B1, #987F38, #54524D)
• Muted Cerulean color palette (#EFF8F1, #C3A161, #4497B9, #726191, #3B2E3A)
• Weathered Ridge color palette (#FFF4E1, #7F6100, #006646, #6F0027, #361C03)
• Weathered Balcony color palette (#F4F3E0, #628D00, #3D4000, #2A291F, #141611)

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