Butternut
#ffa177
Soft, creamy butternut orange for calm UI accents
About Butternut
Butternut is brighter than everything around it, it's got the lift of a true orange without the coral slip that Apricot Haze takes. Where those neighbors are muted or carefully tempered, this one just reads as a cleaner, more saturated orange. It's the shade that doesn't need permission to be warm.
You'll use it in product interfaces and marketing where directness matters: food and beverage apps, travel booking flows, e-commerce product pages, fitness platforms that want energy without aggression. It sits higher in value than Calabrese, so it actually pops against white and holds its own in dense layouts. Unlike Chewing Gum's dustiness or Apricot Haze's coral lean, Butternut commits fully to orange, no hedging, no restraint, just a color that knows what it is.
The trade-off: it's warm enough that cool grays will push back, hard. This isn't the shade for financial dashboards or healthcare onboarding. Pair it with warm whites, creams, and rich neutrals and it sings. Cool company will feel like a mistake.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.