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.
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.
VALUE | CSS | |
---|---|---|
HEX | FF8DA1 | #FF8DA1 |
RGB DECIMAL | 255, 141, 161 | RGB(255,141,161) |
RGB PERCENTAGE | 100, 55.3, 63.1 | RGB(100%,55.3%,63.1%) |
CMYK | 0, 45, 37, 0 | |
HSL | 349.5°, 100, 77.6 | HSL(349.5,100%,77.6%) |
HSV (OR HSB) | 349.5°, 44.7, 100 | |
WEB SAFE | FF9999 | #FF9999 |
CIE-LAB | 71.478, 45.075, 8.811 | |
XYZ | 57.198, 42.887, 38.982 | |
xyY | 0.411, 0.308, 42.887 | |
CIE-LCH | 71.478, 45.928, 11.06 | |
CIE-LUV | 71.478, 76.24, 3.571 | |
HUNTER-LAB | 65.488, 41.301, 10.549 | |
BINARY | 11111111, 10001101, 10100001 | |
iOS - SwiftUI | Color(red: 1.0, green: 0.41, blue: 0.71) | |
iOS - UIKit | UIColor(red: 1.0, green: 0.41, blue: 0.71, alpha: 1) | |
Android - Compose | Color(0xFFFF8DA1) |