Daffodil

Meet Daffodil (#FFFF31), a yellow that commands attention. This electric, high-saturation hue sits at the brightest edge of the spectrum, practically vibrating with intensity. Its pure, unapologetic brightness makes it a powerful choice for any designer's palette, demanding to be seen and remembered.

Daffodil
#FFFF31
Copy
Copied
Access our full UI & UX library today.
Join for free

What color is Daffodil?

Daffodil is a brilliant, warm yellow that sits at the most saturated end of the spectrum. It's a pure, luminous hue with a high value, giving it an almost electric quality.

While overwhelmingly yellow, Daffodil carries subtle green undertones, reminiscent of the flower's stem. This hint of coolness adds a layer of complexity, preventing it from becoming a simple primary yellow.

What is the meaning of the color Daffodil in product design?

Named for the flower that heralds spring, Daffodil embodies hope, rebirth, and new beginnings. The color #FFFF31 radiates joy and optimism, evoking the warmth of sunshine and feelings of pure happiness.

Psychologically, this vibrant yellow is stimulating and energetic, capable of sparking creativity and grabbing attention without being aggressive. It carries a long-standing association with positivity and fresh starts across many cultures.

How can I effectively use Daffodil in my UI design?

Daffodil (#FFFF31) works best as an accent color to draw attention to key interface elements like buttons, notifications, or icons. For maximum impact and readability, pair it with deep, cool tones such as charcoal gray or navy blue. This high contrast makes text legible and creates a visually striking effect. Consider applying the 60-30-10 rule, with Daffodil serving as the vibrant 10% that guides the user's eye.

While not a dominant color in corporate branding, Daffodil's energetic quality is used effectively by companies like Snapchat, Best Buy, Zocdoc, and Lugg. Its relative rarity offers a chance to build a distinctive visual identity that stands out from the crowd.

Use the tools below to see Daffodil in action. You can explore curated palettes, test color contrast for accessibility, and preview how #FFFF31 looks within the UI components of well-known apps.

How can I use the Daffodil color codes in my projects?

When working with the Daffodil color, #FFFF31 is the primary hex code for digital projects. Given its high saturation, it's a potent color where a small amount can make a significant impact.

While #FFFF31 is standard for the web, you will need different codes for other applications. Color models like RGB (Red, Green, Blue) are additive and built for digital screens, whereas CMYK (Cyan, Magenta, Yellow, Key/Black) is a subtractive model required for physical printing. Each format—including HSL, LAB, and others—represents the same Daffodil color using a different set of values for a specific purpose.

We have converted #FFFF31 to a range of popular formats below. Find the code you need and copy it directly into your project.

Daffodil Code Conversions

HEX
#FFFF31
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

Daffodil Color Harmonies

Analogous

Analogous color schemes use colors next to Daffodil on the color wheel, creating a harmonious and serene visual experience for any design.

#123456
#123456
#123456

Complementary

Complementary colors sit opposite each other on the color wheel. Paired with Daffodil, its complement creates a striking, high-contrast visual effect.

#123456
#123456

Split Complementary

A split complementary scheme for Daffodil pairs it with the two colors adjacent to its direct complement, offering a vibrant yet balanced palette.

#123456
#123456
#123456

Triadic

A triadic palette is formed by three colors equidistant on the color wheel. Starting with Daffodil, this approach yields a balanced yet striking visual effect.

#123456
#123456
#123456

Tetradic

A tetradic color scheme for Daffodil uses two pairs of complementary colors, forming a rich, four-color palette with built-in contrast and harmony.

#123456
#123456
#123456
#123456

Square

A square color scheme uses four colors spaced evenly on the color wheel. This arrangement produces a vibrant palette with strong, balanced contrast.

#123456
#123456
#123456
#123456

Daffodil Color Variations

Shades

Adding black to Daffodil creates shades, giving the color more depth and gravity.

#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 Daffodil, created by adding white for a softer appearance.

#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 mixing Daffodil with gray, resulting in a softer, less saturated appearance.

#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 Daffodil that share its base color, affecting its intensity or temperature.

#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 Daffodil?

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

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