Jasmine is a soft, buttery yellow that exudes warmth and positivity. It sits between yellow and beige on the color wheel, resembling the gentle hue of jasmine flowers. Related shades include ivory and cream. Perfect for adding a sunny touch to designs!
Jasmine is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #F8DE7E
- RGB value: 97.3% red, 87.1% green, 49.4% 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 jasmine, consider:
- Cream (#fdfbd4): Cream presents a gentle, soft white, reflecting the delicate, calming aspects of Jasmine, often seen in its floral form.
- Pastel Yellow (#ffee8c): This shade offers a light and airy vibe, closely echoing the gentle, sunny undertones reminiscent of Jasmine flowers blooming in the sun.
- Light Yellow (#ffffc5): Known for its airy and peaceful quality, Light Yellow mirrors the subtle cheerfulness of Jasmine, offering a similar warmth without overwhelming brightness.
- Ivory (#ffffe3): This shade captures a soft, elegant whiteness, similar to the classic Jasmine flower color. It upholds a sense of purity and simplicity akin to Jasmine's true essence.
To complement jasmine, consider pairing it with:
- Mauve Pink (#E0B0FF): This soft, purplish pink offers a gentle contrast that highlights the calming and elegant qualities of jasmine.
- Light Green (#88E788): The fresh and vibrant hue of light green brings out jasmine’s delicate nature, creating a harmonious, nature-inspired palette.
- Coral (#FF8559): With coral's warm and inviting energy, it provides a lively contrast that complements jasmine's subtle charm.
- Soft Gold (#EFBF04): This metallic shade adds a touch of luxury and sophistication, giving depth and richness that enhance jasmine’s understated elegance.
While Jasmine is typically associated with a soft, gentle hue, it may clash with:
- Neon Green (#2CFF05): This bright, intense color conflicts with Jasmine by creating a visually jarring contrast that overwhelms its subtle elegance.
- Blood Red (#780606): The dark intensity of blood red can overpower Jasmine’s delicacy, leading to an unbalanced and awkward composition.
- Neon Orange (#FF5C00): The vivid and energetic quality of neon orange competes with Jasmine, which creates a sense of visual discord.
- Cerise (#DE3163): This vibrant pink may clash with Jasmine by creating a tension between its warmth and Jasmine’s cooler, more relaxed tone.
- Indigo (#560591): As a deeply saturated and rich hue, indigo can overshadow Jasmine's gentle and lighthearted essence.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Sunset Sorbet
Radiant Daybreak
Celestial Pop
Contrast checker
Contrast 1.33
- Large Text
#F8DE7E
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 15.74
- Large Text
#F8DE7E
- 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 #F8DE7E, known as Jasmine, has RGB values of R:248, G:222, B:126 and CMYK values of C:0, M:10, Y:49, K:3.
| VALUE | CSS | |
|---|---|---|
| HEX | #F8DE7E | #F8DE7E |
| RGB DECIMAL | 248, 222, 126 | RGB(248,222,126) |
| RGB PERCENTAGE | 97.3, 87.1, 49.4 | RGB(97.3%,87.1%,49.4%) |
| CMYK | 0, 10, 49, 3 | |
| HSL | HSL(47.2, 89.7%, 73.3%) | HSL(47.2, 89.7%, 73.3%) |
| HSV (OR HSB) | 47.2°, 49.2, 97.3 | |
| WEB SAFE | #255204102 | #255204102 |
| BINARY | 11111000, 11011110, 01111110 | |
| iOS - SwiftUI | Color(red: 0.973, green: 0.871, blue: 0.494) | |
| iOS - UIKit | UIColor(red: 0.973, green: 0.871, blue: 0.494, alpha: 1) | |
| Android - Compose | Color(0xFFF8DE7E) |
