Amber Harbor color palette — #FFF2ED · #F9A371 · #CC7C26 · #7F5900 · #3F2F00

A conversation between Mustard and Melon, giving this palette its sense of optimism and balance.

The five colors

• Ivory (#FFF2ED): bright and airy, almost weightless.
• Melon (#F9A371): A luminous, balanced gold — the color of honey in a jar.
• Mustard (#CC7C26): A luminous, balanced gold — the color of old brass.
• Coffee (#7F5900): A full-bodied, balanced gold — the color of old brass.
• Espresso (#3F2F00): A deep, shadowed, dusty gold — the color of honey in a jar.

Feels like: Optimism, Balance. Tagged warm.

Use it as a design system

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

• Soft Orchard color palette (#F7D5D8, #FBA390, #DC8900, #956D00, #3F3B00)
• Faded Coast color palette (#FFF3E6, #E1B85D, #A59000, #616200, #273500)
• Wandering Delta color palette (#FFF3E6, #E0C48C, #AC804D, #764D35, #2B2001)
• Hazy Ember Station color palette (#FFF1F3, #FFA8AC, #DB6856, #8A3803, #4C2502)
• Muted Amber color palette (#F7D8C9, #CF7B00, #845700, #3C2D00, #110F00)
• Periwinkle Courtyard color palette (#FFF3E5, #F2B05D, #5EAAFC, #A26800, #00284F)
• Hushed Hollow color palette (#F6E7D9, #AB8100, #605000, #272600, #010200)
• Taupe Alley color palette (#FFF3E4, #BAFCDD, #DBE1C8, #C48F6E, #36322C)

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