Heliotrope is a cheerful, pastel shade that mixes lavender and light violet, creating a soothing vibe. It sits in the purple family on the color wheel. Think of periwinkle and mauve as its siblings. Use heliotrope in designs to add a touch of whimsy and a light, airy aesthetic.
Heliotrope is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- Hex Code: #DF73FF
- RGB value: 87.5% red, 45.1% green, 100.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 heliotrope, consider:
- Lavender (#d3d3ff): With its soft pastel qualities, Lavender echoes Heliotrope's gentle and soothing demeanor, evoking a sense of tranquility.
- Violet (#7f00ff): Violet shares Heliotrope's bold, vibrant energy, offering a similar balance of blue and red hues that convey a striking visual impact.
- Orchid (#ed80e9): Orchid provides a vivid and lively take, capturing Heliotrope’s playful and cheerful spirit with its bright and eye-catching appearance.
- Mauve (#e0afff): Mauve embraces Heliotrope's softer and more muted undertones, presenting a similar delicate balance of pink and purple tints.
To complement Heliotrope, consider pairing it with:
- Aqua (#00FFF0): Aqua introduces a fresh, vibrant contrast to Heliotrope, enhancing its lively, playful appeal without overpowering its delicate tones.
- Mustard Yellow (#FFCE1B): Mustard Yellow adds a warm, earthy contrast against Heliotrope, creating a striking, cheerful color combination that balances boldness with subtlety.
- Mint Green (#ADEBB3): The cool, refreshing nature of Mint Green beautifully offsets Heliotrope’s vibrancy, resulting in a harmonious, soothing palette well-suited for calming aesthetics.
- Light Gray (#D3D3D3): Light Gray offers a neutral, soft background that allows Heliotrope’s vibrant purple hues to stand out, enhancing its vibrant, whimsical nature without distraction.
- Coral (#FF8559): Coral introduces a warm, invigorating touch that complements Heliotrope’s playful character, creating an energetic and dynamic design palette.
While Heliotrope is a vibrant and playful hue, it may clash with:
- Mustard Yellow (#FFCE1B): The boldness of mustard yellow can compete with the lively nature of heliotrope, creating visual tension rather than harmony.
- Chartreuse (#CCFF00): This saturated yellow-green brings out heliotrope’s intensity, resulting in a jarring and overwhelming combination.
- Crimson Red (#B22222): The deep red of crimson can drown out heliotrope’s brightness, leading to a mismatched and unbalanced pairing.
- Neon Green (#2CFF05): The electric vibe of neon green clashes with heliotrope’s vividness, making the overall design feel chaotic.
- Navy Blue (#000080): Navy blue’s deep and dark tone contrasts sharply with heliotrope’s light and energetic nature, creating a stark and potentially discordant look.
Color variations
Shades
Tints
Tones
Hues
Color harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom palettes
Opal Reverie
Glimmering Flora
Spectrum Whirl
Contrast checker
Contrast 2.61
- Large Text
#DF73FF
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 8.03
- Large Text
#DF73FF
- 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 #DF73FF, known as Heliotrope, has RGB values of R:223, G:115, B:255 and CMYK values of C:13, M:55, Y:0, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #DF73FF | #DF73FF |
| RGB DECIMAL | 223, 115, 255 | RGB(223,115,255) |
| RGB PERCENTAGE | 87.5, 45.1, 100.0 | RGB(87.5%,45.1%,100.0%) |
| CMYK | 13, 55, 0, 0 | |
| HSL | HSL(286.3, 100.0%, 72.5%) | HSL(286.3, 100.0%, 72.5%) |
| HSV (OR HSB) | 286.3°, 54.9, 100.0 | |
| WEB SAFE | #204102255 | #204102255 |
| BINARY | 11011111, 01110011, 11111111 | |
| iOS - SwiftUI | Color(red: 0.875, green: 0.451, blue: 1.000) | |
| iOS - UIKit | UIColor(red: 0.875, green: 0.451, blue: 1.000, alpha: 1) | |
| Android - Compose | Color(0xFFDF73FF) |
