Canary is a bright, joyful yellow that radiates cheerfulness. It sits between yellow and pale lime on the color wheel. This sunny hue closely resembles lemon and buttercup. Use canary to add a splash of happiness and energy to playful design projects.
Canary is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #FFFF99
- RGB value: 100.0% red, 100.0% green, 60.0% blue
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines
For variations within the same spectrum as Canary, consider:
- Bright Yellow (#ffed29): Bright Yellow shares a lively, radiant presence with Canary, capturing the same sunlit vibrancy.
- Yellow (#ffde21): Yellow offers a cheerful warmth similar to Canary, with its vivid and inviting hue.
- Mustard Yellow (#ffce1b): Mustard Yellow presents a slightly deeper tone, yet retains the sunny warmth akin to Canary.
- Saffron (#f1c338): Saffron carries an earthy brightness that echoes Canary's vibrant and cheerful energy.
To complement Canary, consider pairing it with:
- Slate Blue (#557c99): Slate blue offers a calming contrast, toning down Canary’s brightness while maintaining sophistication.
- Forest Green (#2e6f40): Forest green introduces a deep, natural contrast, providing an organic balance to Canary’s vivid hue.
- Charcoal (#4a4a4a): Charcoal provides a solid, neutral base that enhances Canary without competing, resulting in a modern and sleek palette.
While Canary is vibrant and cheerful, it may clash with:
- Cinnamon (#d47e30): Its spicy earthiness can muddy Canary's bright and clear tone, creating a dissonant and overly warm palette.
- Dark Yellow (#ba8e23): This color can blend awkwardly with Canary, resulting in a lack of visual contrast and definition.
- Mustard Yellow (#ffce1b): It competes for attention, both colors fighting for dominance due to their bold warm hues.
- Olive Green (#636b2f): The muted and darker tone can dull Canary's brightness, leading to a less harmonious interaction.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Sunlit Harvest
Pastel Splash
Sunny Mint
Contrast checker
Contrast 1.05
- Large Text
#FFFF99
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 20.02
- Large Text
#FFFF99
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFFF99, known as Canary, has RGB values of R:255, G:255, B:153 and CMYK values of C:0, M:0, Y:40, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #FFFF99 | #FFFF99 |
| RGB DECIMAL | 255, 255, 153 | RGB(255,255,153) |
| RGB PERCENTAGE | 100.0, 100.0, 60.0 | RGB(100.0%,100.0%,60.0%) |
| CMYK | 0, 0, 40, 0 | |
| HSL | HSL(60.0, 100.0%, 80.0%) | HSL(60.0, 100.0%, 80.0%) |
| HSV (OR HSB) | 60.0°, 40.0, 100.0 | |
| WEB SAFE | #255255153 | #255255153 |
| BINARY | 11111111, 11111111, 10011001 | |
| iOS - SwiftUI | Color(red: 1.000, green: 1.000, blue: 0.600) | |
| iOS - UIKit | UIColor(red: 1.000, green: 1.000, blue: 0.600, alpha: 1) | |
| Android - Compose | Color(0xFFFFFF99) |
