Pink Color: Hex Code, Palettes & Meaning | Figma (2024)

What color ispink?

This particular shade of pink translates to a light pink with a very slight orange undertone—some might call it a light coral. On the color wheel, it sits closer to the pink section but with a subtle shift towards orange. This subtle blend of warmth from the orange with the softness of pink creates a vibrant yet soothingfeel.

Pink Color: Hex Code, Palettes & Meaning | Figma (1)Pink Color: Hex Code, Palettes & Meaning | Figma (2)

What does pink look like on digital screens?

Pink is defined by the following color codes and values to ensure consistency across various digital platforms anddevices.

  • HEX code: #FF8DA1
  • RGB value: 100% red, 55.3% green, and63.1%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 pink in UIdesign?

Here are some ways to use pink in yourdesigns:

  • Enhance approachability. Use pink to convey warmth. Its soft, inviting hue is perfect for backgrounds in designs that aim to be welcoming andfriendly.
  • Soften difficult topics. Consider pink accents to add a subtle, soothing effect on websites or apps dealing with difficult content.
  • Create subtle CTAs. As a shade of red, pink works well to grab the eye’s attention, yet its more subtle tone isn’t as jarring. Use it for buttons or links that need to stand out without overpowering.

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 topink?

For variations within the same soft, feminine spectrum as pink,consider:

  • Peach (#FFD3AC) adds a bit of orange to the shade of pink for a soft, warmfeel.
  • Blush (#DE5D83) is a more muted shade of pink that has an added element ofsubtlety.
  • Rose (#FF1D8D) is an excellent option for a more energetic, eye-catching hue.
  • Dusty rose (#DCA1A1) is a muted color with hints of pink and light brown for a relaxed, vintagefeel.

What colors go withpink?

To complement pink, consider pairing itwith:

  • White (#FFFFFF) is a neutral color that complements pink, creating contrast yet a sense ofelegance.
  • Navy blue (#000080) is a bold color that can add depth and richness when paired withpink.
  • Pastel yellow (#FFEE8C) adds a sense of cheerfulness to apinkpalette.
  • Gold (#EFBF04) offers glamor and luxury, pairing well with pink’s warmertones.
  • Celadon (#A8DCAB) has soft green hues that work well with pink’s similar luminosity.

Other colors worth considering include cream and beige for their neutral, versatile nature, as well as soft purple and sage green for their harmonious, gentle impression.

What colors conflict withpink?

While pink is delicate and unobtrusive, it mayclashwith:

  • Red (#FF2C2C) may appear to be a perfect pairing for pink, but their similarity can lead to a fight forattention.
  • Neon yellow (#FFFF33) and other neon colors are too bright and vivid, clashing with pink’s subtletone.
  • Dark brown (#5C4033) creates an underwhelming, dull palette when paired withpink.
  • Charcoal (#4A4A4A) is neutral, but its cool undertones clash with pink’s warm appearance.
  • Electric blue (#00F0FF) conflicts with pink due to its high contrast andintensity.

What does pink symbolize?

Pink often symbolizes love, romance, and a sense of playfulness. Rooted in red, it carries an understated vibrancy and can evoke feelings of youthandjoy.

In color psychology, pink has calming and tranquil effects. Though different shades of pink can have varying impacts: Lighter shades are generally calming, while brighter ones canaddenergy.

Use pink to promote tranquility and warmth in UI design. Shades of pink can be effectively used to convey a youthful and energetic vibe, especially for brands that want broad appeal, like in lifestyle or fashion industries.

What’s the history ofpink?

The color pink is named after the "pinks" flower, also known as "dianthus," a type of carnation. The name first appeared in the late 17thcentury.

Other cultures had varied meanings for pink. The Greeks associated it with Aphrodite, the goddess of love and beauty. In Chinese culture, pink is a color of happiness and prosperity and is often used in celebrations such as the Lunar New Year. Over time, pink has become a symbol of love and warmth, especially around Valentine's Day.

Traditionally, pink has been associated with femininity and innocence, making it a popular choice for young girls' fashion. Today, colors like pink are seen as more fluid, celebrating individual identity.

Color variations

Shades

Tints

Tones

Hues

Color harmonies

Complementary

Analogous

Monochromatic

Split

Triadic

Square

Custom palettes

Rose Petals

Watermelon Candy

Hydrangea

Accessibility

Contrast checker

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

2.19:1

WCAG 2.2 Simple Contrast

Normal Text

Fail
AA
4.5:1

Fail
AAA
7:1

Large Text

Fail
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.

9.58:1

WCAG 2.2 Simple Contrast

Normal Text

Pass
AA
4.5:1

Pass
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 #FF8DA1, known as pink, has RGB values of R:255 G:141, B:161 and CMYK values of C:0, M:45, Y:37,K:0.

VALUECSS
HEXFF8DA1#FF8DA1
RGB DECIMAL255, 141, 161RGB(255,141,161)
RGB PERCENTAGE100, 55.3, 63.1RGB(100%,55.3%,63.1%)
CMYK0, 45, 37, 0
HSL349.5°, 100, 77.6HSL(349.5,100%,77.6%)
HSV (OR HSB)349.5°, 44.7, 100
WEB SAFEFF9999#FF9999
CIE-LAB71.478, 45.075, 8.811
XYZ57.198, 42.887, 38.982
xyY0.411, 0.308, 42.887
CIE-LCH71.478, 45.928, 11.06
CIE-LUV71.478, 76.24, 3.571
HUNTER-LAB65.488, 41.301, 10.549
BINARY11111111, 10001101, 10100001
iOS - SwiftUIColor(red: 1.0, green: 0.41, blue: 0.71)
iOS - UIKitUIColor(red: 1.0, green: 0.41, blue: 0.71, alpha: 1)
Android - ComposeColor(0xFFFF8DA1)
Pink Color: Hex Code, Palettes & Meaning | Figma (2024)
Top Articles
Latest Posts
Article information

Author: Chrissy Homenick

Last Updated:

Views: 6250

Rating: 4.3 / 5 (54 voted)

Reviews: 85% of readers found this page helpful

Author information

Name: Chrissy Homenick

Birthday: 2001-10-22

Address: 611 Kuhn Oval, Feltonbury, NY 02783-3818

Phone: +96619177651654

Job: Mining Representative

Hobby: amateur radio, Sculling, Knife making, Gardening, Watching movies, Gunsmithing, Video gaming

Introduction: My name is Chrissy Homenick, I am a tender, funny, determined, tender, glorious, fancy, enthusiastic person who loves writing and wants to share my knowledge and understanding with you.