Hex Color Code for Pink
Find the perfect pink hex color code for your web design projects. Browse our comprehensive collection of pink shades from pale blush to vibrant hot pink, with hex codes, RGB and HSL values.
Pink Color Picker
Use our interactive color picker to find the perfect shade of pink. Adjust the controls to create your ideal pink tone, then copy the hex code, RGB, or HSL values for your projects.
Pink Hex Color Codes
Pink
The standard pink color, a light reddish tone that is often associated with femininity and softness.
Light Pink
A softer, paler shade of pink with subtle warm undertones.
Hot Pink
A vivid, intense pink shade that appears more saturated and vibrant than standard pink.
Deep Pink
A rich, intense pink color with strong magenta undertones.
Medium Pink
A moderately intense pink tone that sits between light and hot pink.
Baby Pink
A very light, soft pink commonly associated with infants and gentleness.
Blush Pink
An extremely soft, pale pink with a subtle warmth, similar to the natural flush of cheeks.
Pastel Pink
A soft, light pink with reduced saturation that creates a calm, soothing aesthetic.
Powder Pink
A very light, soft pink with a subtle muted quality, reminiscent of cosmetic powder.
Rose Quartz
A soft, muted pink with a hint of peach, named after the natural stone.
Fuchsia Pink
A vibrant, intense purplish-pink color at maximum saturation.
Neon Pink
An extremely bright, vibrant pink with a glowing quality.
Shocking Pink
A vivid, intense pink specifically designed to be attention-grabbing.
Magenta Pink
A vibrant purplish-pink that is one of the primary colors in the CMYK color model.
Electric Pink
A vivid, high-energy pink with extraordinary brightness and impact.
Dusty Pink
A muted, desaturated pink with a hint of gray, creating a sophisticated look.
Mauve Pink
A soft, dusty pink with purple undertones, creating an elegant, vintage feel.
Old Rose
A muted, dusty pink with brownish undertones, reminiscent of dried roses.
Ash Pink
A very muted, grayish pink with a sophisticated, neutral quality.
Antique Pink
A soft, muted pink with a vintage feel, often used in historical or period designs.
Rose Pink
A medium-deep pink with vibrant, rosy tones.
Dark Pink
A deeper, more saturated pink with reduced brightness.
Raspberry Pink
A deep, rich pink with red undertones, similar to the color of ripe raspberries.
Cerise Pink
A deep, vivid pink with red undertones, named after the cherry fruit.
Ruby Pink
A rich, jewel-toned pink with depth and intensity.
Using Pink Color Hex Codes in Web Design
Pink in CSS
.header {
background-color: #FFC0CB; /* Pink */
color: #333333;
}
.button {
background-color: #FF69B4; /* Hot Pink */
border: 2px solid #FF1493; /* Deep Pink */
}
.highlight {
color: #FFB6C1; /* Light Pink */
}Use pink hex codes in your CSS to create elements with various pink shades. Light pinks work well for backgrounds, while deeper pinks make great accent colors.
Pink in HTML
<!-- Using pink hex codes for inline styling -->
<div style="color: #FF69B4;">
This text is hot pink
</div>
<p style="background-color: #FFD1DC;
color: #D3436E;">
Dark pink text on pastel pink background
</p>
<span style="border: 3px solid #FF1493;">
This has a deep pink border
</span>While it's generally better to use CSS for styling, pink hex codes can also be used directly in HTML inline styles.
Color Combination Tips for Pink
- •
Complementary: Pair pinks with greens for high contrast and visual impact. For example, #FF69B4 (Hot Pink) with #69FF8F (Light Green).
- •
Monochromatic: Use various shades of pink together for a harmonious, cohesive look. Combine light, medium, and dark pinks for depth.
- •
Analogous: Pink works well with purple and red for a smooth, related color scheme that feels cohesive and harmonious.
- •
Neutral pairing: Pink pairs beautifully with neutrals like white, cream, gray, or navy for elegant, balanced designs.
Pink Color Psychology and Branding
What Pink Communicates
Pink is a color with strong psychological associations, making it a powerful tool in design and branding:
- Nurturing and Compassionate: Pink is associated with care, understanding, and nurturing, making it suitable for healthcare, childcare, or charity brands.
- Calming and Soothing: Particularly softer pinks can have a calming effect, reducing anxiety and creating a sense of safety.
- Romantic and Sweet: Pink has long been associated with love, tenderness, and affection, making it popular for Valentine's Day and wedding-related designs.
- Energetic and Youthful: Brighter pinks convey energy, excitement, and playfulness, particularly appealing to younger audiences.
Pink in Branding
Many successful brands use pink in their visual identity:
T-Mobile
Uses a vibrant magenta pink to stand out in the telecommunications industry, conveying energy and innovation.
Barbie
The iconic hot pink is playful, feminine, and instantly recognizable, embodying the brand's fun and fashionable identity.
Victoria's Secret
Uses deep pink to convey femininity, luxury, and sensuality, perfectly aligned with their brand positioning.
Frequently Asked Questions
What is the hex code for pink?
The standard hex code for pink is #FFC0CB. However, pink comes in many shades and variations. Hot pink is #FF69B4, light pink is #FFB6C1, and deep pink is #FF1493. These are just a few of the many pink hex codes available for web design and development.
What's the difference between magenta and pink hex codes?
While pink and magenta are related, they have different hex codes and appearances. Magenta, with hex code #FF00FF, is a purplish-pink color that's more saturated and vibrant than standard pink (#FFC0CB). Magenta is one of the primary colors in the CMYK color model used in printing, while pink is generally considered a tint of red. Magenta contains equal amounts of red and blue with no green, giving it a more purple appearance, while pink typically has more red and less blue component.
How do I make a lighter shade of pink using hex codes?
To create a lighter shade of any pink hex code, you can increase all three color components (red, green, and blue) closer to white (#FFFFFF). For example, if you start with hot pink (#FF69B4), you can lighten it by increasing the green and blue values: #FF8BC4 is a lighter version. Alternatively, in HSL format, you can keep the same hue but increase the lightness percentage. Our color picker tool above lets you easily create lighter pink shades by adjusting the brightness/lightness slider.
What colors pair well with pink in web design?
Pink pairs beautifully with several colors in web design. White and cream create clean, feminine designs. Gray provides sophistication, while navy or black add contrast and elegance. For complementary color schemes, green (especially mint or sage) contrasts beautifully with pink. Gold accents can add luxury to pink designs. For more dynamic combinations, turquoise or teal create vibrant modern looks, and purple creates a harmonious analogous color scheme. The specific pink shade will influence which pairings work best.
Find Your Perfect Pink Color
Use our interactive color picker to discover the ideal pink hex code for your web design project
Try Pink Color Picker