Canary
Luminous canary yellow with radiant energy
Canary is a luminous, high-energy yellow that feels warm and bright. Because of its intensity, the hex code #fdff63 works best as a targeted accent color rather than a primary background. It pairs well with charcoal or deep navy to provide visual balance. This shade offers excellent contrast against black text, ensuring strong readability for important UI design details.
About Canary
Lemon peel held up to a window
What does canary mean?
Canary yellow often brings to mind sunshine, spring flowers, caution signs, and the small songbirds it was named after. Its high lightness makes it glow without shouting, and its near-full saturation keeps the warmth bright rather than buttery.
Where you see canary
- stickynotes
- tennis balls
- lemon slices
- rubber ducks
- highlighter ink
- school pencils
What it works for
Use it for highlights, callout buttons, and accents where you need energy without moving to orange or green.
What colors go with canary?
Charcoal #36454fNear-black gray grounds the glow and makes the yellow read as deliberate, not loud.Teal #008080Teal sits across the wheel, so the pair feels balanced instead of matchy.Plum #8e4585Deep purple against bright yellow creates strong contrast with a soft, fruity edge.Olive #808000Two yellows at different depths share a warmth while staying clearly distinct.Denim #2243b6Faded blue softens the yellow's intensity and keeps the combo casual.Cream #fffdd0Cream gives the yellow room to shine as the brightest element on the page.
Questions about Canary
What is the hex code for Canary?
Canary is #fdff63. In RGB that is rgb(253, 255, 99), in HSL hsl(61, 100%, 69%) and in CMYK 1%, 0%, 61%, 0%.
How should Canary #fdff63 be used in UI design?
Canary #fdff63 functions best as an accent color for calls to action, focus states, or highlights rather than a primary background. Its high intensity can quickly overwhelm the eye, so pairing it with a neutral charcoal or deep navy provides the necessary balance for readability.
Is Canary readable on white or black?
Canary has a 1.06:1 contrast ratio on white and 19.66:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it is too faint for text and on black it works for body text. Try other pairs in the contrast checker.