Pink

HEX: #FFC0CB | Modern Palette

On White
1.54:1
FAIL
On Black
13.65:1
PASS

Color Specifications

HEX
#FFC0CB
RGB
255, 192, 203
HSL
349°, 100% ,87%
CMYK
0, 25, 20, 0

About Pink

Pink (#FFC0CB) is a color with RGB(255, 192, 203) and HSL(349.5°, 100%, 87.6%). It is commonly associated with Playful moods. In design, it fits Neon, Warm styles and is suitable for Text, Button, Background. Its complementary color is #C0FFF4, which creates strong contrast. Its triadic palette includes #CBFFC0 and #C0CBFF. The name comes from pinck (Dutch).

  • HEX: #FFC0CB
  • RGB: 255, 192, 203
  • HSL: 349.5°, 100%, 87.6%
  • Mood: Playful
  • Style: Neon, Warm
  • Use case: Text, Button, Background
  • Complementary color: #C0FFF4
  • Triadic colors: #CBFFC0, #C0CBFF
  • The name comes from pinck (Dutch).

Live Components

LIGHT
DARK
System Notification Box

Color Palettes

Pink #FFC0CB is used in Monochromatic, Neutral + Accent, Analogous, 3 + 1 + 1 palettes, giving designers ready-made combinations for backgrounds, surfaces, accents, and interface elements.

Monochromatic Five tones of the same hue — a reliable scale for backgrounds, surfaces, and text.
 
 
 
 
PINK
Neutral + Accent Four near-neutral tones grounded by a saturated accent — clean and versatile for UI.
 
 
PINK
 
 
Analogous Five hues drifting across a 60° arc — naturally harmonious and pleasing to the eye.
 
 
 
 
 
3 + 1 + 1 Three analogous base colors, one complementary accent, one dark anchor — bold yet balanced.
 
 
 
 
 

Color Harmonies

Pink #FFC0CB pairs with #C0FFF4 as its complementary color, and #CBFFC0 and #C0CBFF in triadic combinations. These harmony relationships help create balanced color combinations for UI, branding, and design work.

Complementary

The color directly opposite on the color wheel — creates maximum contrast and vibrance.

PINK
Analogous

Colors adjacent on the wheel — naturally harmonious and pleasing to the eye.

PINK
Triadic

Three colors equally spaced 120° apart — bold, balanced, and visually rich.

PINK
Split-Complementary

Two colors flanking the complement — high contrast with less tension than full complementary.

PINK
Tetradic (Square)

Four colors at 90° intervals — rich variety, best when one color dominates.

PINK
Monochromatic

Shades and tints of the same hue — cohesive, elegant, and easy to work with.

PINK

Shades & Tints

The shade and tint range for Pink #FFC0CB moves from dark #1A0004 tones through the base color to lighter #FFE6EA tones, making it useful for depth, hierarchy, and background variation.

PINK

Color Characteristics

Mood
Playful
Style
Neon Warm
Use case
Text Button Background

Accessibility Simulation

Deuteranopia #D5D5C9
Protanopia #C8C8CB
Tritanopia #FEC1C1
Achromatopsia #D0D0D0

Frequently Asked Questions

Pink (#FFC0CB) is a color with RGB(255, 192, 203) and HSL(349.5°, 100%, 87.6%).

#FFC0CB pairs strongly with #C0FFF4 as its complementary color. It can also be used with neutral tones for balanced UI and design layouts.

#FFC0CB is suitable for Text, Button, Background and works well with Neon, Warm styles.

#FFC0CB is commonly associated with Playful.

The name Pink is linked to pinck from Dutch, meaning small, little, or a specific type of flower (Dianthus).

Name, History & Etymology

Origin Word pinck
Meaning small, little, or a specific type of flower (Dianthus)
Language Dutch
First Recorded Use Late 17th Century

History

The word 'pink' entered English from Dutch 'pinck', referring to a small flower, specifically a carnation or dianthus. The use of 'pink' to describe the color of these flowers, and then more broadly, emerged in the late 17th century. Historically, pink was not always associated with femininity; in the early 20th century, it was sometimes considered a more masculine color (being a 'stronger' version of red) while blue was seen as more delicate. This gender association largely reversed in the mid-20th century, particularly after World War II, due to marketing and cultural shifts.

First Recorded Use

The color 'pink' as a distinct term in English appeared around the late 17th century. Before this, it was often described as a shade of red or 'light red'. The word 'pink' itself, referring to the flower, predates its use as a color name.

Cultural Associations

Pink is widely associated with femininity, sweetness, romance, and tenderness in Western cultures. It is often used for baby girls' clothing and products. In some contexts, it can also represent playfulness, charm, or even rebellion (e.g., 'punk pink'). In Japan, pink is associated with spring and the transient nature of life due to the cherry blossoms (sakura). In India, it is sometimes associated with hospitality and welcome. The 'pink ribbon' is an international symbol for breast cancer awareness.

Similar Named Colors
Bubble Gum #FFC1CC ΔE 0.27
Cherry Blossom Pink #FFB7C5 ΔE 2.39
Light Pink #FFB6C1 ΔE 2.67
Orchid Pink #F2BDCD ΔE 3.24

Code Snippets

/* Background */
.element {
    background-color: #FFC0CB;
}

/* Text */
.element {
    color: #FFC0CB;
}

/* Border */
.element {
    border: 1px solid #FFC0CB;
}

/* Linear gradient to complementary */
.element {
    background: linear-gradient(
        to right,
        #FFC0CB,
        #C0FFF4
    );
}

/* Radial gradient */
.element {
    background: radial-gradient(
        circle,
        #FFC0CB,
        #C0FFF4
    );
}

// SCSS variable
$pink: #FFC0CB;

// With RGB channels (useful for rgba() usage)
$pink-r: 255;
$pink-g: 192;
$pink-b: 203;

// Usage
.element {
    background-color: $pink;
    color: rgba($pink-r, $pink-g, $pink-b, 0.8);
}