Figma color wheel
Want to find the perfect complementary or analogous colors to match Citrine?
Citrine is a sunny and energizing hue, merging the brightness of yellow with a hint of orange. Positioned between yellow and orange on the color wheel, it radiates warmth. Related shades include lemon and golden yellow. Use citrine in designs to convey optimism and creativity.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Golden Harvest
Lemon Lapis
Electro Prism
Citrine is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #E4D00A
- RGB value: 89.4% red, 81.6% green, 3.9% 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 citrine, consider:
- Pastel Yellow (#ffee8c): This color shares a delicate vibrancy with Citrine, reflecting a soft, sunny hue that brightens spaces yet remains understated.
- Lemon (#FFF700): Emulating the zesty brightness of Citrine, Lemon conjures a fresh, citrusy vibe that energizes with its vivid yellow tone.
- Mustard Yellow (#ffce1b): Mustard Yellow offers a warm, earthy palette similar to Citrine, with a deeper golden shade that exudes warmth and richness.
- Saffron (#f1c338): This color captures the warm tones and golden richness of Citrine, echoing a luxurious and exotic feel reminiscent of the gemstone's allure.
To complement citrine, consider pairing it with:
- Royal Blue (#305CDE): This rich blue brings out the sunny hue of citrine, creating a striking and bold contrast that evokes both elegance and vitality.
- Forest Green (#2E6F40): Forest green enhances citrine's warm tones, offering a natural and earthy palette that evokes serenity and balance.
- Mauve (#E0AFFF): A soft purple tone like mauve balances the golden shade of citrine, adding a touch of sophistication and a modern twist.
- Charcoal (#4A4A4A): This deep gray provides a neutral base, making citrine pop and creating a sleek, contemporary look.
While citrine is an energizing color, it may clash with:
- Neon Pink (#FF13F0): This bright and electric hue competes with citrine's sunny hue, creating an overwhelming visual impact.
- Emerald Green (#50C878): The contrast between this vibrant green and citrine's yellow quartz tone can feel sharp and unharmonious.
- Scarlet (#ED2100): The powerful, heated intensity of scarlet battles citrine's warm tones, resulting in a conflict of high energy.
- Bright Yellow (#FFED29): With such similar levels of brightness, this color can make citrine appear less distinct, causing a lack of clarity in the overall palette.
- Royal Blue (#305CDE): The deep richness of royal blue can overshadow citrine's golden shade, leading to an imbalance in visual harmony.
Contrast checker
Contrast 1.58
- Large Text
#E4D00A
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 13.33
- Large Text
#E4D00A
- 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 #E4D00A, known as Citrine, has RGB values of R:228, G:208, B:10 and CMYK values of C:0, M:9, Y:96, K:11.
| VALUE | CSS | |
|---|---|---|
| HEX | #E4D00A | #E4D00A |
| RGB DECIMAL | 228, 208, 10 | RGB(228,208,10) |
| RGB PERCENTAGE | 89.4, 81.6, 3.9 | RGB(89.4%,81.6%,3.9%) |
| CMYK | 0, 9, 96, 11 | |
| HSL | HSL(54.5, 91.6%, 46.7%) | HSL(54.5, 91.6%, 46.7%) |
| HSV (OR HSB) | 54.5°, 95.6, 89.4 | |
| WEB SAFE | #2042040 | #2042040 |
| BINARY | 11100100, 11010000, 00001010 | |
| iOS - SwiftUI | Color(red: 0.894, green: 0.816, blue: 0.039) | |
| iOS - UIKit | UIColor(red: 0.894, green: 0.816, blue: 0.039, alpha: 1) | |
| Android - Compose | Color(0xFFE4D00A) |
