Canary
#fdff63
Lemon-bright yellow-gray accent, cooler and sharper than Butter
About Canary
Canary is the one that actually *demands* to be seen. Where Butter glows and Bollywood Gold shows restraint, this one strips away the apology entirely, it's pure, high-saturation yellow that reads as a deliberate statement the moment it lands on screen. The lightness is there, but it doesn't feel soft. It feels purposeful.
You'll hit it fastest in warning states, alerts, and highlight layers where the goal is to pull attention without going red. Product interfaces that need a color you can't miss but still feels part of the system. Marketing sites pushing for energy over warmth. Call-to-action buttons that need to compete. Even accessibility overlays and focus states where a neutral yellow actually does the work better than a muted one. It holds its own against dark text because there's nowhere to hide, the saturation does the heavy lifting.
The catch: pair it with cool grays and you've got immediate contrast that can feel jarring, almost neon. That's not always wrong. Keep it with warm families and the yellow softens slightly, becomes more of a system player. Use it sparingly and it lands. Use it everywhere and you've built a interface that exhausts.
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.