Pine Pier color palette — #F4F3E3 · #89AB86 · #00784F · #583B55 · #1C1E03

Built around Pine, softened by Sage — the whole palette hums with nature and growth.

The five colors

• Cream (#F4F3E3): A whisper-light, dusty green — the color of a quiet forest floor.
• Sage (#89AB86): A luminous, dusty green — the color of a quiet forest floor.
• Pine (#00784F): A full-bodied, balanced teal — the color of glacier melt.
• Charcoal (#583B55): A deep, shadowed, dusty pink — the color of a candy shop window.
• Onyx (#1C1E03): A deep, shadowed, dusty green — the color of new leaves after rain.

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

Use it as a design system

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

• Dusty Pier color palette (#F1F3E8, #75AE95, #007569, #154E5B, #162005)
• Softworn Lagoon color palette (#F0F0DC, #629D71, #00654C, #53283D, #001806)
• Worn Courtyard color palette (#F1F3E8, #8AC1A8, #00887A, #664C5B, #232A1A)
• Tempered Moss Meadow color palette (#EFE3CF, #9F9A00, #4C6600, #4E2A6B, #181700)
• Hushed Emerald Meadow color palette (#FEF4E4, #C8D7A8, #38A06A, #80536C, #2D280B)
• Pale Mulberry Studio color palette (#FFE1E1, #C471A3, #009265, #8A2769, #002315)
• Patina Cobalt color palette (#F7F1E8, #ABD2BC, #1786B7, #005B5B, #002720)
• Navy Cabin color palette (#E7E8CE, #45895D, #00503F, #1C215C, #060900)

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