Jasmine

HEX: #F8DE7E | Modern Palette

On White
1.33:1
FAIL
On Black
15.74:1
PASS

Color Specifications

HEX
#F8DE7E
RGB
248, 222, 126
HSL
47°, 89% ,73%
CMYK
0, 10, 49, 3

About Jasmine

Jasmine (#F8DE7E) is a color with RGB(248, 222, 126) and HSL(47.2°, 89.7%, 73.3%). It is commonly associated with Bold, Playful moods. In design, it fits Neon, Warm styles and is suitable for Text, Button, Accent. Its complementary color is #7E98F8, which creates strong contrast. Its triadic palette includes #7EF8DE and #DE7EF8. The name comes from Yasamin (یاسمن) (Persian).

  • HEX: #F8DE7E
  • RGB: 248, 222, 126
  • HSL: 47.2°, 89.7%, 73.3%
  • Mood: Bold, Playful
  • Style: Neon, Warm
  • Use case: Text, Button, Accent
  • Complementary color: #7E98F8
  • Triadic colors: #7EF8DE, #DE7EF8
  • The name comes from Yasamin (یاسمن) (Persian).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.

Color Harmonies

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

Shades & Tints

A seamless scale of #F8DE7E from deepest shade to lightest tint.

Color Characteristics

Mood
Bold Playful
Style
Neon Warm
Use case
Text Button Accent

Accessibility Simulation

Deuteranopia #E6E67D
Protanopia #E1E17E
Tritanopia #FFD5D5
Achromatopsia #DFDFDF

Frequently Asked Questions

Jasmine (#F8DE7E) is a color with RGB(248, 222, 126) and HSL(47.2°, 89.7%, 73.3%).

#F8DE7E pairs strongly with #7E98F8 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#F8DE7E is suitable for Text, Button, Accent and works well with Neon, Warm styles.

#F8DE7E is commonly associated with Bold, Playful.

The name Jasmine is linked to Yasamin (یاسمن) from Persian, meaning Gift from God.

Name, History & Etymology

Origin Word Yasamin (یاسمن)
Meaning Gift from God
Language Persian
First Recorded Use Ancient

History

The name Jasmine is derived from the Persian word 'Yasamin,' which refers to the jasmine flower. This fragrant flower is native to tropical and warm temperate regions of Eurasia, Australasia, and Oceania. It has been cultivated for its beauty and scent for millennia, particularly in Persia, India, and China. The name traveled to Europe, notably France, where it became 'Jasmine' and gained popularity as a given name, especially in English-speaking countries from the 19th century onwards. Its association with the beautiful and fragrant flower has contributed to its enduring appeal.

First Recorded Use

Uncertain, but the flower has been cultivated for thousands of years, and the name likely emerged with its cultural significance.

Cultural Associations

The jasmine flower holds significant cultural importance in many parts of the world. In India, it is often used in religious ceremonies, garlands, and for hair adornment. It is a symbol of love, beauty, and purity. In some cultures, jasmine tea is a popular beverage, known for its delicate flavor and aroma. The name gained further international recognition and popularity, particularly in Western cultures, after the release of Disney's 'Aladdin' (1992), featuring Princess Jasmine.

Similar Named Colors

Buff #F0DC82 ΔE 1.91
Flax #EEDC82 ΔE 2.42
Yellow (Crayola) #FCE883 ΔE 2.68
Orange Yellow #F8D568 ΔE 3.36

Code Snippets

/* Background */
.element {
    background-color: #F8DE7E;
}

/* Text */
.element {
    color: #F8DE7E;
}

/* Border */
.element {
    border: 1px solid #F8DE7E;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #F8DE7E,
        #7E98F8
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #F8DE7E,
        #7E98F8
    );
}

// SCSS variable
$jasmine: #F8DE7E;

// With RGB channels (useful for rgba() usage)
$jasmine-r: 248;
$jasmine-g: 222;
$jasmine-b: 126;

// Usage
.element {
    background-color: $jasmine;
    color: rgba($jasmine-r, $jasmine-g, $jasmine-b, 0.8);
}