Citrus Splash
#ffc400
More orange-leaning, softer highlight for warm UI
About Citrus Splash
Citrus Splash sits between Bumblebee's electric punch and Aurora's soft landing, it's got the saturation to actually feel present, but it's noticeably cooler and less aggressive than either. This is the yellow that reads as friendly without trying too hard, the one that doesn't make you squint or second-guess the pairing.
You'll use it on restaurant homepages, wellness app interfaces, and product detail pages where energy matters but warmth shouldn't dominate. Unlike Bumblebee, which demands depth to settle, this one plays well with mid-tone backgrounds and soft grays without needing a safety buffer. It's got enough backbone to hold white type cleanly and enough restraint to sit next to pastels without flattening them. Aurora's lighter, Angry Pasta's warmer, Citrus Splash lands in the practical middle.
The trick: it's less forgiving on warm neutrals than the deeper yellows, so test it against cream or warm taupe before committing. Pair it with navy, sage, or natural wood and it settles in exactly where you need it.
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.