Pink HEX Code
The HEX code for pink is #FFC0CB. Pink is a light tint of red, created by adding white to red. It ranges from soft pastels to vibrant hot pinks, making it versatile for both subtle and bold designs.
Pink Color Values
| Format | Value |
|---|---|
| HEX | #FFC0CB |
| RGB | rgb(255, 192, 203) |
| HSL | hsl(350, 100%, 88%) |
| CMYK | C:0 M:25 Y:20 K:0 |
Pink Shades and Variations
| Shade | HEX | Description |
|---|---|---|
| Lavender Pink | #FBAED2 | Soft, pastel |
| Pink | #FFC0CB | CSS pink |
| Light Pink | #FFB6C1 | Soft, romantic |
| Hot Pink | #FF69B4 | Bright, vibrant |
| Deep Pink | #FF1493 | Intense, bold |
| Magenta | #FF00FF | Vivid pink-purple |
| Rose | #FF007F | Rich pink |
| Salmon | #FA8072 | Orange-tinted pink |
| Fuchsia | #FF00FF | Same as magenta |
Pink in Design
Pink conveys:
- Romance: Valentine's Day, love
- Femininity: Beauty, fashion
- Playfulness: Fun, youthful
- Softness: Comfort, calm
Modern Pink Usage
Pink has expanded beyond traditional gender associations:
``css
/* Soft, modern pink */
.subtle {
background-color: #FDF2F8;
color: #831843;
}
/* Bold accent pink */
.accent {
color: #EC4899;
}
/* Hot pink CTA */
.cta {
background-color: #FF69B4;
}
`
Pink in UI Design
| Use Case | Recommended Pink |
|---|---|
| Background | #FDF2F8, #FCE7F3 |
| Primary action | #EC4899, #DB2777 |
| Error state (soft) | #F472B6 |
| Accent | #F9A8D4 |
Brand Pinks
| Brand | HEX | Name |
|---|---|---|
| Barbie | #DA1884 | Barbie Pink |
| T-Mobile | #E20074 | T-Mobile Magenta |
| Lyft | #FF00BF | Lyft Pink |
| #E1306C | IG Gradient Pink | |
| Dribbble | #EA4C89 | Dribbble Pink |
Tailwind Pink Scale
`javascript
pink: {
50: '#fdf2f8',
100: '#fce7f3',
200: '#fbcfe8',
500: '#ec4899',
700: '#be185d',
900: '#831843',
}
`
Pink has become increasingly popular in tech and startup branding, breaking from traditional blue corporate colors to signal innovation and approachability.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
``
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp looking like one hue rather than a fade to grey.