Figma color wheel
Want to find the perfect complementary or analogous colors to match amber?
Skip to main content
Everything you need to know about amber to inspire your next design.
Amber is a warm and inviting color that combines the golden glow of yellow with the richness of orange. It exudes a sunny, cheerful vibe that captures the essence of its namesake, the fossilized tree resin. It sits between yellow and orange on the color wheel, making it perfect for adding a touch of warmth and luminosity to designs and enhancing visuals with its radiant and cozy appeal.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Honeycomb
Sunny Day
Freshly Squeezed
Amber is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
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.
Amber's rich, golden tones bring warmth and vibrancy to UI design. Here's how to leverage its potential effectively:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same radiant and warm spectrum as amber, consider:
To complement amber's glowing tones, consider pairing it with:
Other colors worth considering include navy blue for a classic, dignified look, cream for a soft, harmonious blend, and burgundy for a bold, dramatic contrast.
While amber is versatile, it may clash with:
With its natural beauty and sun-like glow, amber represents warmth, comfort, and nostalgia. Its yellow aspects bring brightness and optimism, and its orange hues inspire creativity. Across cultures, amber's value varies: in ancient Greece, it was seen as Apollo's divine gift, symbolizing eternal life; in Chinese culture, it stands for courage and strength. In Native American tradition, it is a protective talisman.
In color psychology, amber's joyful hue promotes energy, stimulating the senses and sparking enthusiasm and excitement.
In UI/UX design, amber makes user interfaces more appealing. It highlights important features like CTAs and notifications, improving user engagement. Amber can create a warm, welcoming atmosphere, using its psychological effects to enhance the user experience. This can make the brand seem friendly and lively.
The name amber originates from the material known as amber—a fossilized tree resin admired for centuries for its natural beauty and warm glow. English first documented the use of "amber" as a color name in 1500.
Historically, amber was associated with magic, spirituality, and even healing. Ancient civilizations crafted amber into jewelry, amulets, and decorative objects, which were often symbols of wealth and status.
Contrast 1.65
#FFBF00
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 12.7
#FFBF00
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FFBF00, known as amber, has RGB values of R:255, G:191, B:0 and CMYK values of C:0, M:0.25, Y:1, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FFBF00 | #FFBF00 |
| RGB DECIMAL | 255, 191, 0 | rgb(255,191,0) |
| RGB PERCENTAGE | 100, 74.9, 0 | rgb(100%,74.9%,0%) |
| CMYK | 0, 25, 100, 0 | |
| HSL | 44.9°, 100, 50 | hsl(44.9,100%,50%) |
| HSV (OR HSB) | 44.9°, 100, 100 | |
| WEB SAFE | FFCC00 | #FFCC00 |
| CIE-LAB | 81.03, 10.381, 83.029 | |
| XYZ | 59.872, 58.525, 8.143 | |
| xyY | 0.473, 0.463, 58.525 | |
| CIE-LCH | 81.03, 83.676, 82.873 | |
| CIE-LUV | 81.03, 53.789, 83.317 | |
| HUNTER-LAB | 76.502, 5.821, 47.24 | |
| BINARY | 11111111, 10111111, 00000000 | |
| iOS - SwiftUI | Color(red: 255/255, green: 191/255, blue: 0/255) | |
| iOS - UIKit | UIColor(red: 255/255.0, green: 191/255.0, blue: 0/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFFFBF00) |
Want to find the perfect complementary or analogous colors to match amber?
Learn more about the color navy blue.
Learn more about forest green.