Naples Yellow
Meet Naples Yellow (#F4BA42), a color with a rich, earthy warmth. Its sun-drenched character gives it a distinctive, pigment-like quality that stands apart from purer yellows, offering a sophisticated yet vibrant option for any creative palette. It feels both classic and fresh.
What color is Naples Yellow?
Naples Yellow is a soft, earthy yellow with a distinctively muted and creamy appearance, sitting somewhere between pale ochre and sun-bleached sand.
It’s a warm color with subtle orange-brown undertones, giving it a sophisticated character that feels both natural and timeless.
What is the meaning of Naples Yellow in design?
Rooted in art history, Naples Yellow carries a sense of timeless sophistication and warmth. It's a color associated with sunlight, intellect, and the classical paintings of the Old Masters.
Psychologically, it evokes feelings of gentle optimism, creativity, and comfort. For designers, this earthy hue offers a mature alternative to brighter yellows, suggesting quality and quiet confidence.
How can I effectively use Naples Yellow in my UI design?
Naples Yellow works beautifully as an accent color, creating a warm focal point when set against deep navies, forest greens, or charcoal grays. Consider the 60-30-10 principle, where this vibrant shade can serve as the 10% accent for key interactive elements like buttons, icons, or notification badges to direct user attention without dominating the screen.
While not as widespread as primary colors, shades similar to Naples Yellow (#F4BA42) are used effectively by brands like Booking.com, Google Maps, Airtable, and McDonald's. They apply its inviting quality to everything from map pins to promotional highlights, demonstrating its ability to stand out and create a friendly impression.
To see how Naples Yellow performs, use the tools below. You can explore curated palettes, test color contrast for accessibility, and preview #F4BA42 in real UI components from top brands.
Using Naples Yellow color codes
Naples Yellow, with its hex code #F4BA42, brings a warm and inviting quality to any project. It's a versatile shade that can act as a gentle primary color or a sophisticated accent, depending on the surrounding palette.
To apply #F4BA42 in your work, you'll need the right color code for your medium. The HEX code is standard for web design, but you might need its RGB (Red, Green, Blue) values for digital displays or its CMYK (Cyan, Magenta, Yellow, Black) equivalent for print materials. Each system represents the color for a specific purpose, from screen-based light to physical ink.
We've converted #F4BA42 into a range of popular formats for you. Find and copy the codes you need for your project in the sections below.
Analogous
An analogous palette pairs Naples Yellow with its neighbors on the color wheel, creating a unified and calming scheme perfect for serene designs.
Complementary
Complementary colors sit directly opposite each other on the color wheel, creating a vivid, high-contrast pairing when used with Naples Yellow.
Split Complementary
For a more nuanced take on high contrast, a split complementary scheme pairs Naples Yellow with the two colors adjacent to its direct complement.
Triadic
For a high-contrast look, a triadic palette combines Naples Yellow with two other colors that are equally spaced on the color wheel.
Tetradic
A tetradic scheme for Naples Yellow uses two pairs of complementary colors, creating a rich, four-color palette that offers balanced contrast.
Square
A square color scheme uses four colors equidistant on the color wheel. With Naples Yellow as the base, this creates a vibrant, high-contrast palette.
Text Color
Background Color
Your Catchy Large Text Goes Here
Shades
Shades of Naples Yellow are created by adding black, giving the color more depth and weight.
Tints
Tints of Naples Yellow are created by adding white, resulting in softer, lighter variations.
Tones
Tones of Naples Yellow are created by adding gray, which mutes the color’s saturation.
Hues
Hues are variations of Naples Yellow, differing in intensity and temperature to create distinct moods.
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.
