Figma color wheel
Want to find the perfect complementary or analogous colors to match Canary Yellow?
Canary yellow is a vibrant, cheerful color. It sits in the yellow section of the color wheel, close to lemon yellow. This bright, sunny hue evokes joy and energy. Related shades include Citrine Yellow and Lemon Yellow. It works well in design spaces needing warmth and positivity.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Golden Zest
Solar Breeze
Sunny Whimsy
Canary Yellow is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #FFEF00
- RGB value: 100.0% red, 93.7% green, 0.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 yellow, consider:
- Bright Yellow (#ffed29): This color channels the sunny vibrance and upbeat energy that define Canary Yellow, making them twins in brightness.
- Light Yellow (#ffffc5): With its soft and gentle glow, Light Yellow offers a lighter alternative to Canary Yellow while maintaining that same cheerful warmth.
- Saffron (#f1c338): Saffron introduces a touch more depth with its golden undertones, yet it remains lively and radiant like Canary Yellow.
- Pastel Yellow (#ffee8c): This color takes on a softer hue, diluting Canary Yellow’s intensity, but its sunny nature continues to shine through.
To complement Canary Yellow, consider pairing it with:
- Royal Blue (#305cde): This bold blue creates a striking contrast with canary yellow's warmth, resulting in a vibrant, eye-catching palette.
- Dark Green (#06402b): This deep, rich green offers a sophisticated balance that enhances the brightness of canary yellow while maintaining harmonious contrast.
- Vermilion (#e73121): This warm, vivid red-orange adds energy and dynamism, making canary yellow pop with a cheerful, lively touch.
- Lavender (#d3d3ff): This soft purple shade provides a gentle contrast that cools canary yellow's sunny warmth, adding a serene and balanced vibe.
- Slate Gray (#6d8196): This muted gray provides a neutral backdrop that allows canary yellow's brightness to stand out, creating a modern, chic look.
While Canary Yellow is a vibrant and cheerful color reminiscent of sunny days, it may clash with the following colors:
- Olive Green (#636b2f): This color's muted tone can contrast sharply with the bright and lively nature of canary yellow, creating a visually jarring effect.
- Dark Purple (#341539): The deep richness of dark purple can compete for attention against canary yellow, leading to a visually heavy and conflicting palette.
- Burgundy (#660033): The dark and intense shade of burgundy can overpower canary yellow, making it appear less vibrant and lively by comparison.
- Navy Blue (#000080): The stark contrast between navy blue's depth and canary yellow's brightness can result in a harsh and unsettling visual pairing.
- Charcoal (#4a4a4a): This dark neutral can dull the lively nature of canary yellow, resulting in a combination that lacks harmony and balance.
Contrast checker
Contrast 1.19
- Large Text
#FFEF00
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 17.6
- Large Text
#FFEF00
- 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 #FFEF00, known as Canary Yellow, has RGB values of R:255, G:239, B:0 and CMYK values of C:0, M:6, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #FFEF00 | #FFEF00 |
| RGB DECIMAL | 255, 239, 0 | RGB(255,239,0) |
| RGB PERCENTAGE | 100.0, 93.7, 0.0 | RGB(100.0%,93.7%,0.0%) |
| CMYK | 0, 6, 100, 0 | |
| HSL | HSL(56.2, 100.0%, 50.0%) | HSL(56.2, 100.0%, 50.0%) |
| HSV (OR HSB) | 56.2°, 100.0, 100.0 | |
| WEB SAFE | #2552550 | #2552550 |
| BINARY | 11111111, 11101111, 00000000 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.937, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.937, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFFFEF00) |
