Hazelnut

Meet Hazelnut (#AE9F80), a warm, earthy neutral with a quiet sophistication. Its muted, golden-brown undertones give it a unique character that feels both organic and refined, making it a versatile choice for creating grounded yet elegant user interfaces.

Hazelnut
#AE9F80
Copy
Copied
Access our full UI & UX library today.
Join for free

What color is Hazelnut?

Hazelnut is a warm, earthy brown with a soft, muted quality.

It sits comfortably between a light tan and a deeper brown, evoking the natural color of its namesake nut.

Visually, Hazelnut is a complex neutral. It carries distinct yellow and orange undertones, which give it a welcoming warmth. Depending on the light and surrounding colors, it can reveal subtle hints of gray or even a touch of green, adding to its organic character. This complexity prevents it from feeling flat, offering a sophisticated foundation that is both grounded and gentle on the eyes.

What is the meaning of the color Hazelnut?

The color Hazelnut evokes feelings of warmth, comfort, and authenticity, rooted in its connection to the natural world.

It symbolizes stability, reliability, and a sense of grounding, making it a color that feels both honest and enduring.

How can I use the color Hazelnut in my UI design?

In UI and web design, Hazelnut (#AE9F80) works beautifully as a sophisticated neutral. For high contrast, pair it with deep navies or rich forest greens to create a grounded, organic feel. For a more minimalist palette, combine it with creamy off-whites and dark charcoals. Consider using Hazelnut as a background color to make brighter accent colors stand out, or as a primary color for buttons and interactive elements in an elegant, muted interface.

While not a common primary color for major brands, which often favor bolder hues, tones similar to Hazelnut can be found in the secondary palettes of apps like Telegram. Its rarity in branding presents an opportunity for a product to build a unique identity centered on warmth, stability, and quiet confidence.

Use the tools below to explore curated palettes, test color contrast for accessibility, and preview Hazelnut in real UI components from top brands.

Using Hazelnut color codes

Using the Hazelnut color code begins with its hexadecimal value, #AE9F80, which is standard for web design. To apply this color consistently across different projects, you will often need to convert this code into other formats.

Each color model serves a specific purpose. For instance, RGB (Red, Green, Blue) values are fundamental for digital displays, while CMYK (Cyan, Magenta, Yellow, Key/Black) is the standard for print materials. Other models like HSL (Hue, Saturation, Lightness) offer a more intuitive way to make adjustments.

To help you get started, we've converted the Hazelnut hex code #AE9F80 into a variety of popular color models. You can find and copy the exact values you need for your project below.

Hazelnut Code Conversions

HEX
#AE9F80
Copy
Copied
LAB
34.74, -20.85, 14.42
Copy
Copied
RGB
53, 90, 58
Copy
Copied
XYZ
5.89, 8.37, 5.31
Copy
Copied
HSL
128°, 26%, 28%
Copy
Copied
LCH
34.74, 25.35, 145.33°
Copy
Copied
HSB
128°, 41%, 35%
Copy
Copied
LUV
34.74, -7.15, 19.17
Copy
Copied
CMYK
41%, 0%, 36%, 65%
Copy
Copied
HWB
128°, 21%, 65%
Copy
Copied

Hazelnut Color Harmonies

Analogous

An analogous scheme pairs Hazelnut with its neighbors on the color wheel. The result is a unified and serene palette, creating a sense of harmony.

#123456
#123456
#123456

Complementary

Complementary colors are opposites on the color wheel. Paired with Hazelnut, these shades create a dynamic visual contrast that makes both colors pop.

#123456
#123456

Split Complementary

For Hazelnut, a split complementary palette takes the two colors next to its opposite, creating a vibrant yet sophisticated and balanced visual effect.

#123456
#123456
#123456

Triadic

Triadic color schemes use three colors evenly spaced on the color wheel. With Hazelnut as the base, this creates a vibrant, high-contrast palette.

#123456
#123456
#123456

Tetradic

A tetradic scheme for Hazelnut pairs it with its complement, plus another complementary pair, forming a rich, four-color rectangle on the wheel.

#123456
#123456
#123456
#123456

Square

A square color scheme uses four colors equidistant on the color wheel. With Hazelnut as the base, this combination offers vibrant, high-contrast palettes.

#123456
#123456
#123456
#123456

Hazelnut Color Variations

Shades

Shades of Hazelnut are created by adding black, resulting in darker tones with more depth.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tints

Tints are lighter variations of Hazelnut, created by adding white for a softer effect.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Tones

Tones are created by adding gray to Hazelnut, resulting in a softer, less saturated version.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

Hues

Hues are variations of Hazelnut that alter its intensity or temperature, creating different visual moods.

#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied
#123456
Copy
Copied

What Interfaces Use Colors Like Hazelnut?

No items found.
Keep the inspiration going with Mobbin
Join for free
No items found.

All Brands That Use Colors Like Hazelnut

Never run out of inspiration again.

Use Mobbin for free as long as you like or get full access with any of our paid plans.

Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Nike
Brand Logo Image
Pinterest
Logo Image
Coinbase
Wise Logo Image
Wise
Headspace Logo Image
Headspace
Airbnb Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Coinbase
Brand Logo Image
Wise
Brand Logo Image
Headspace
Brand Logo Image
Airbnb
Brand Logo Image
Uber
Brand Logo Image
Nike
Brand Logo Image
Pinterest
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Mailchimp
Brand Logo Image
Twitch
Brand Logo Image
Chatgpt
Brand Logo Image
Klarna
Brand Logo Image
Loom
Brand Logo Image
Creme
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion
Brand Logo Image
Dropbox
Brand Logo Image
Spotify
Brand Logo Image
Apple TV
Brand Logo Image
Shop
Brand Logo Image
Cosmos
Brand Logo Image
Retro
Brand Logo Image
Notion