Canary

HEX: #FFFF99 | Modern Palette

On White
1.05:1
FAIL
On Black
20.02:1
PASS

Color Specifications

HEX
#FFFF99
RGB
255, 255, 153
HSL
60°, 100% ,80%
CMYK
0, 0, 40, 0

About Canary

Canary (#FFFF99) is a color with RGB(255, 255, 153) and HSL(60°, 100%, 80%). It is commonly associated with Playful moods. In design, it fits Neon, Warm styles and is suitable for Text, Button, Background. Its complementary color is #9999FF, which creates strong contrast. Its triadic palette includes #99FFFF and #FF99FF. The name comes from insula Canaria (Latin).

  • HEX: #FFFF99
  • RGB: 255, 255, 153
  • HSL: 60°, 100%, 80%
  • Mood: Playful
  • Style: Neon, Warm
  • Use case: Text, Button, Background
  • Complementary color: #9999FF
  • Triadic colors: #99FFFF, #FF99FF
  • The name comes from insula Canaria (Latin).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #FFFF99 from deepest shade to lightest tint.

Color Characteristics

Mood
Playful
Style
Neon Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #FFFF99
Protanopia #FFFF99
Tritanopia #FFF5F5
Achromatopsia #F9F9F9

Frequently Asked Questions

Canary (#FFFF99) is a color with RGB(255, 255, 153) and HSL(60°, 100%, 80%).

#FFFF99 pairs strongly with #9999FF as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#FFFF99 is suitable for Text, Button, Background and works well with Neon, Warm styles.

#FFFF99 is commonly associated with Playful.

The name Canary is linked to insula Canaria from Latin, meaning island of dogs.

Name, History & Etymology

Origin Word insula Canaria
Meaning island of dogs
Language Latin
First Recorded Use 14th Century

History

The Canary Islands were known to ancient civilizations, including the Romans, who named them 'Canaria' due to the large dogs (canis in Latin) found there. When the small, yellow finches native to these islands became popular as cage birds in Europe, they were named 'canary birds' or simply 'canaries' after their place of origin. The color 'canary yellow' then derived its name from the bird's characteristic plumage.

First Recorded Use

The term 'Canary Islands' was used by ancient Romans, referring to the large dogs found there. The bird 'canary' was named after the islands from which it originated.

Cultural Associations

Canaries have been popular pet birds for centuries, known for their singing ability. They were historically used in coal mines as an early warning system for toxic gases (hence the phrase 'canary in a coal mine'). The color 'canary yellow' is often associated with brightness, cheerfulness, and spring. In some cultures, the canary symbolizes freedom or a delicate beauty.

Similar Named Colors
Pastel Yellow #FDFD96 ΔE 0.44
Mindaro #E3F988 ΔE 5.38
Flavescent #F7E98E ΔE 5.53
Light Khaki #F0E68C ΔE 5.59

Code Snippets

/* Background */
.element {
    background-color: #FFFF99;
}

/* Text */
.element {
    color: #FFFF99;
}

/* Border */
.element {
    border: 1px solid #FFFF99;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #FFFF99,
        #9999FF
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #FFFF99,
        #9999FF
    );
}

// SCSS variable
$canary: #FFFF99;

// With RGB channels (useful for rgba() usage)
$canary-r: 255;
$canary-g: 255;
$canary-b: 153;

// Usage
.element {
    background-color: $canary;
    color: rgba($canary-r, $canary-g, $canary-b, 0.8);
}