Figma color wheel
Want to find the perfect complementary or analogous colors to match rose?
Rose is a vibrant and romantic color that blends the intensity of pink with a bold hint of red. This warm hue sits between red and magenta on the color wheel, capturing the deeper, more saturated side of rose. Its vividness conveys passion and energy, while still maintaining a sense of soft romance.
Color variations
Shades
Tints
Tones
Hues
Color Harmonies
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Custom Palettes
Raspberry Syrup
Bubblegum Pop
Passion Pulse
Rose is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
- HEX code: #FF1D8D
- RGB value: 100% red, 11.4% green and 55.3% 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.
Rose can be a powerful tool in UI design. Here's how to harness its potential:
- Leverage its symbology. For elements related to love and relationships, a touch of a deeper rose, like a classic red, can evoke feelings of romance and passion. Think dating apps or Valentine's Day promotions.
- Create a calm. Embrace lighter pinks to create a calming and gentle atmosphere. These are ideal for healthcare apps, baby product websites, or features promoting relaxation.
- Inspire creativity. Brighter rose hues can add a touch of energy and inspire creativity. This might be suitable for design software interfaces or artistic platforms.
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 vibrant and dynamic spectrum as rose, consider:
- Magenta (#FD3DB5) is a similar vibrant pink with a deeper saturation, making it appear more vivid and striking.
- Hot pink (#FF69B4) offers a lighter, more playful pink tone while retaining the energetic feel of rose.
- Raspberry (#E30B5C) provides a darker, more subdued pink but maintains the intensity of rose.
- Cerise (#DE3163) has a slightly redder tone, offering a classic and sophisticated alternative to rose.
To complement rose's vibrant tones, consider pairing it with:
- Navy blue (#000080) provides a deep, contrasting backdrop that makes the brightness of rose pop.
- Mint green (#ADEBB3) is a fresh, soft color that complements rose without competing for attention.
- Lemon yellow (#FFF44F) adds a cheerful and sunny aspect, enhancing the liveliness of rose.
- Light gray (#D3D3D3) serves as a neutral balance, softening the intensity of rose for a more harmonious look.
- Cream (#FDFBD4) is a soft, warm white that pairs naturally with rose for a gentle and inviting palette.
Other colors worth considering include olive green to provide an earthy balance, steel blue for a cool contrast, and lavender for a delicate and refined combination.
While rose is versatile, it may clash with:
- Forest green (#228B22) offers a very earthy and dark contrast that can overshadow the brightness of rose.
- Bright orange (#FFA500) competes for attention, potentially creating a jarring and unharmonious visual.
- Teal (#069494) might introduce too much coolness, clashing with the warm vibrancy of rose.
- Mustard yellow (#FFDB58) can appear dull alongside the dynamic rose, resulting in a muddled aesthetic.
- Dark purple (#800080), when used in large amounts, may overwhelm and darken the lively nature of rose too much.
Rose is associated with feelings of love and romance. Red roses, in particular, are a universal symbol of passionate love and desire. Rose can also symbolize creativity and passion.
In color psychology, rose reflects these symbolic associations. Brighter pinks can activate feelings of happiness, cheerfulness, and innocence. Blush tones are known to promote feelings of calmness and peace.
In UI design, rose can be used strategically to create a welcoming and positive user experience. However, it's essential to consider the target audience and overall brand identity when using rose in UI design.
Roses, with their diverse colors including shades of pink, have been admired for millennia and were cultivated in China as early as 5,000 BC. Greeks and Romans also cherished them, associating them with love and beauty.
Capturing this specific hue with pigments took time. Early options were derived from natural materials, offering inconsistent color. The development of synthetic dyes in the 18th and 19th centuries provided a more comprehensive range, including vibrant and consistent rose tones.
This color has graced art and literature for centuries. Artists used rose pigments for flowers, skin tones, and soft backgrounds, while writers evoked emotions like love, gentleness, and innocence with the word "rose." The Victorian "language of flowers" further solidified the link between rose and love, gratitude, and admiration, a tradition that continues today.
Contrast 3.61
- Large Text
#FF1D8D
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Pass | Fail | |
Pass | Fail |
Contrast 5.81
- Large Text
#FF1D8D
- Normal Text
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Fail | |
Pass | Pass | |
Pass | Pass |
Color simulations
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #FF1D8D, known as rose, has RGB values of R:255, G:29, B:141 and CMYK values of C:0, M:0.89, Y:0.45, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | FF1D8D | #FF1D8D |
| RGB DECIMAL | 255, 29, 141 | rgb(255,29,141) |
| RGB PERCENTAGE | 100, 11.4, 55.3 | rgb(100%,11.4%,55.3%) |
| CMYK | 0, 89, 45, 0 | |
| HSL | 330.3°, 100, 55.7 | hsl(330.3,100%,55.7%) |
| HSV (OR HSB) | 330.3°, 88.6, 100 | |
| WEB SAFE | FF3399 | #FF3399 |
| CIE-LAB | 56.155, 82.936, -1.856 | |
| XYZ | 46.488, 24.067, 27.395 | |
| xyY | 0.475, 0.246, 24.067 | |
| CIE-LCH | 56.155, 82.957, 358.718 | |
| CIE-LUV | 56.155, 132.794, -18.98 | |
| HUNTER-LAB | 49.058, 83.299, 1.232 | |
| BINARY | 11111111, 00011101, 10001101 | |
| iOS - SwiftUI | Color(red: 255 / 255, green: 29 / 255, blue: 141 / 255) | |
| iOS - UIKit | UIColor(red: 255/255.0, green: 29/255.0, blue: 141/255.0, alpha: 1.0) | |
| Android - Compose | Color(0xFFFF1D8D) |
