Tempered Harbor color palette — #F9F5E7 · #D6D9A8 · #C2BFFD · #ABAF56 · #4A486E
Sage and Lavender set the tone — five colors that lean into nature and growth.
The five colors
- Ivory (#F9F5E7): a clean, paper-quiet neutral.
- Wheat (#D6D9A8): A whisper-light, dusty green — the color of new leaves after rain.
- Lavender (#C2BFFD): A whisper-light, balanced violet — the color of twilight just after sunset.
- Sage (#ABAF56): A luminous, balanced green — the color of new leaves after rain.
- Charcoal Brown (#4A486E): A full-bodied, dusty violet — the color of twilight just after sunset.
Feels like: Nature, Growth, Creativity, Sophistication, Softness, Clarity. Tagged light, muted.
Use it as a design system
One click turns Tempered Harbor 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
- Moss Grove color palette (#FBF5E6, #CFC68E, #BBA5DC, #9E8D19, #544569)
- Muted Jade Station color palette (#F2F7EA, #B0E3C5, #E8B3DE, #5EBF8D, #664146)
- Blush Basin color palette (#FAF6DF, #C2CF92, #86C6F0, #E294AE, #44433B)
- Patina Corridor color palette (#FDF3EB, #F5CCA8, #93CEFF, #E6923A, #2B574B)
- Dusty Fern Summit color palette (#F9F6E4, #D0E1D1, #C0BFCA, #C7B47D, #524F00)
- Tempered Moss color palette (#F7F7DC, #A4D780, #EAA1FF, #5DA200, #541F63)
- Tempered Lantern color palette (#E4F7EE, #B5B974, #A290CD, #737641, #2B2E4B)
- Washed Moss color palette (#F8F7DE, #BAE9CD, #B3C589, #7E9853, #2F3C12)
Browse the whole catalog at Explore, or see today's palette.