Canary

#FFFF99

What color is Canary?

Canary is a bright, pale yellow with a soft glow, hex #FFFF99, close to the color of a ripe lemon. It is lighter than sunflower yellow and has a faintly cool, almost white quality in its lightest tones.

What is the meaning of the color Canary?

Named after the canary bird, native to the Canary Islands, the color entered English use as a descriptor for the bird’s distinctive yellow plumage by the late 17th century. The islands themselves take their name from the Latin Canariae Insulae, meaning Isle of Dogs, noted by Pliny the Elder around 77 AD. The bright yellow of captive canaries became a recognizable reference point as the birds spread across Europe through the 1600s as popular cage birds traded among the aristocracy. The shade was adopted in American safety standards during the 20th century, with canary yellow used for high-visibility workwear and equipment by organizations including ANSI.

RGB
255, 255, 153
HSL
60°, 100%, 80%
CMYK
0, 0, 40, 0
HSV
60°, 40%, 100%
Canary color

What colors go with Canary?

Colors that pair well with Canary include:
Navy Blue: sharp, grounding contrast
Lavender: soft, cool complement
Chartreuse: bold tonal harmony
White: clean, airy brightness
Charcoal: strong modern anchor

Similar Colors

Conversions & Codes

Format Value CSS
HEX #FFFF99 color: #FFFF99;
RGB 255, 255, 153 color: rgb(255, 255, 153);
RGB Percentage 100%, 100%, 60% color: rgb(100%, 100%, 60%);
CMYK 0%, 0%, 40%, 0% Not supported in CSS
HSL 60°, 100%, 80% color: hsl(60, 100%, 80%);
HSV 60°, 40%, 100% Not supported in CSS
CIE-LAB 64, 0, 34 color: lab(64% 0 34);
Decimal 16777113 Not supported in CSS

Color Variations

Shades

#FFFF99
#FFFF70
#FFFF47
#FFFF1F
#F5F500
#CCCC00
#A3A300
#7A7A00

Tints

#FFFFE0
#FFFFD6
#FFFFCC
#FFFFC2
#FFFFB8
#FFFFAD
#FFFFA3
#FFFF99

Tones

#FFFF99
#FAFA9E
#F5F5A3
#F0F0A8
#EBEBAD
#E6E6B3
#E0E0B8
#DBDBBD

Hues

#FFFF99
#B3FF99
#99FFCC
#99E6FF
#9999FF
#E699FF
#FF99CC
#FFB399

Color Harmonies

Analogous

#FFCC99
Click to copy
#FFFF99
Click to copy
#CCFF99
Click to copy

Complementary

#FFFF99
Click to copy
#9999FF
Click to copy

Split Complementary

#FFFF99
Click to copy
#99CCFF
Click to copy
#CC99FF
Click to copy

Triadic

#FFFF99
Click to copy
#99FFFF
Click to copy
#FF99FF
Click to copy

Tetradic

#FFFF99
Click to copy
#99FFCC
Click to copy
#9999FF
Click to copy
#FF99CC
Click to copy

Square

#FFFF99
Click to copy
#99FFCC
Click to copy
#9999FF
Click to copy
#FF99CC
Click to copy

CSS & Dev Snippets

CSS
.canary {
  color: #FFFF99;
}
SCSS
$canary: #FFFF99;
RGB
rgb(255, 255, 153)

Accessibility & Contrast

White background

1.05:1
1.05
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

20.02:1
20.02
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags