Skip to main content

Rose

Everything you need to know about rose to inspire your next design.

Pick a palette type

What color is 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.

rose colorrose color

What does rose look like on digital screens?

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.

How should I effectively use rose in UI design?

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.

What are similar colors to rose?

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.

What colors go with 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.

What colors conflict with rose?

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.

What does rose symbolize?

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.

What’s the history of rose?

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.

Color variations

Shades

Tints

Tones

Hues

Color Harmonies

Complementary

Split

Monochromatic

Analogous

Triadic

Square

Custom Palettes

Raspberry Syrup

Bubblegum Pop

Passion Pulse

Accessibility: Contrast Checker

Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FF1D8D text on a #FFFFFF background.

3.61:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Fail
AAA
4.5:1
Large Text

Figma

Normal Text

How you design, align, and build matters. Do it together with Figma.

This is #FF1D8D text on a #000000 background.

5.81:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1
Fail
AAA
7:1

Large Text

Pass
AA
3:1
Pass
AAA
4.5:1

Color simulations

Protanopia

Deuteranopia

Tritanopia

Achromatopsia

Color conversion

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.

VALUECSS
HEXFF1D8D#FF1D8D
RGB DECIMAL255, 29, 141rgb(255,29,141)
RGB PERCENTAGE100, 11.4, 55.3rgb(100%,11.4%,55.3%)
CMYK0, 89, 45, 0
HSL330.3°, 100, 55.7hsl(330.3,100%,55.7%)
HSV (OR HSB)330.3°, 88.6, 100
WEB SAFEFF3399#FF3399
CIE-LAB56.155, 82.936, -1.856
XYZ46.488, 24.067, 27.395
xyY0.475, 0.246, 24.067
CIE-LCH56.155, 82.957, 358.718
CIE-LUV56.155, 132.794, -18.98
HUNTER-LAB49.058, 83.299, 1.232
BINARY11111111, 00011101, 10001101
iOS - SwiftUIColor(red: 255 / 255, green: 29 / 255, blue: 141 / 255)
iOS - UIKitUIColor(red: 255/255.0, green: 29/255.0, blue: 141/255.0, alpha: 1.0)
Android - ComposeColor(0xFFFF1D8D)