Canary Yellow

#FFEF00

What color is Canary Yellow?

Canary yellow is a bright, pure yellow with a clean, sunlit tone, hex #FFEF00, with no strong lean toward green or orange. It shares the vivid, even color of a fresh dandelion flower.

What is the meaning of the color Canary Yellow?

Named after the Canary Islands birds brought to Europe as cage birds from the late 15th century onward, the color became linked to their distinctive bright plumage. By the 19th century, canary yellow was in common use as a descriptive color term in English fabric and dye trades. Safety planners in the 20th century drew on its high visibility, and the U.S. National School Bus Chrome standard adopted a close variant, now called National School Bus Glossy Yellow, in 1939 to maximize road visibility.

RGB
255, 239, 0
HSL
56°, 100%, 50%
CMYK
0, 6, 100, 0
HSV
56°, 100%, 100%
Canary yellow color

What colors go with Canary Yellow?

Colors that pair well with Canary yellow include:
Navy blue: strong, grounding contrast
White: clean, airy balance
Charcoal gray: calm, modern depth
Coral: warm, energetic pairing
Forest green: fresh, natural complement

Similar Colors

Conversions & Codes

Format Value CSS
HEX #FFEF00 color: #FFEF00;
RGB 255, 239, 0 color: rgb(255, 239, 0);
RGB Percentage 100%, 94%, 0% color: rgb(100%, 94%, 0%);
CMYK 0%, 6%, 100%, 0% Not supported in CSS
HSL 56°, 100%, 50% color: hsl(56, 100%, 50%);
HSV 56°, 100%, 100% Not supported in CSS
CIE-LAB 40, 3, 80 color: lab(40% 3 80);
Decimal 16772864 Not supported in CSS

Color Variations

Shades

#FFEE00
#E6D600
#CCBE00
#B3A700
#998F00
#807700
#665F00
#4D4700

Tints

#FFFAB3
#FFF899
#FFF780
#FFF566
#FFF34D
#FFF133
#FFF01A
#FFEE00

Tones

#FFEE00
#F2E30D
#E6D81A
#D9CD26
#CCC233
#BFB740
#B3AC4D
#A6A159

Hues

#FFEE00
#51FF00
#00FF6F
#00D0FF
#0011FF
#AE00FF
#FF0091
#FF2F00

Color Harmonies

Analogous

#FF6F00
Click to copy
#FFEF00
Click to copy
#91FF00
Click to copy

Complementary

#FFEF00
Click to copy
#0011FF
Click to copy
99%

Split Complementary

#FFEF00
Click to copy
#0091FF
Click to copy
#6F00FF
Click to copy

Triadic

#FFEF00
Click to copy
#00FFEE
Click to copy
#EE00FF
Click to copy

Tetradic

#FFEF00
Click to copy
#00FF6F
Click to copy
#0011FF
Click to copy
99%
#FF0091
Click to copy

Square

#FFEF00
Click to copy
#00FF6F
Click to copy
#0011FF
Click to copy
99%
#FF0091
Click to copy

CSS & Dev Snippets

CSS
.canary-yellow {
  color: #FFEF00;
}
SCSS
$canary-yellow: #FFEF00;
RGB
rgb(255, 239, 0)

Accessibility & Contrast

White background

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

Black background

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

Popular Tags