Soft & pastelBalanced softness
Pink and Gray Color Combination
Grey neutralises pink, so the combination keeps a soft signal without tipping into sweetness — it is the standard way to make pink work in a serious layout.
Hex codes #FFC0CB and #808080 — a balanced softness pair with a 2.57:1 contrast ratio between the two colors.
Values for this combination
- RGB
- rgb(255, 192, 203)
- HSL
- hsl(350, 100%, 88%)
- Hex
- #FFC0CB
- RGB
- rgb(128, 128, 128)
- HSL
- hsl(0, 0%, 50%)
- Hex
- #808080
Contrast between Pink and Gray
Contrast ratio 2.57:1. This only decides whether one color of the pair can carry text on the other — the colors themselves always work side by side.
Gray text on a Pink surface, at 2.57:1.
Pink text on a Gray surface, at 2.57:1.
Where this pair works
- Apparel branding
- Interior design
- Editorial layout
Give Pink (#FFC0CB) roughly 60% of the surface, Gray (#808080) about 30%, and leave the last 10% for the neutral below. That split is what keeps a two-color combination from turning into a fight.
A five-color set from this pair
Pink and Gray as a working palette: a pale tint of the lighter color for backgrounds, both colors as they are, a deep shade of the darker color for text and a neutral for everything in between.
- Pale tint#fae1e5backgrounds and large surfaces · closest to MistyRose
- Primary#FFC0CBthe dominant color · closest to Pink
- Secondary#808080the accent color · closest to Gray
- Deep shade#292323text, borders and icons · closest to RaisinBlack
- Neutral#f6f4f4dividers and quiet surfaces · closest to WhiteSmoke
Explore Pink and Gray on their own
Pink
More color combinations
Gray and White
#808080 · #FFFFFFQuiet structureOpen combinationNavy and Gray
#000080 · #808080Layered neutralsOpen combinationTeal and Gray
#008080 · #808080Modern technicalOpen combinationMauve and Gray
#E0B0FF · #808080Muted eleganceOpen combinationLavender and Cream
#E6E6FA · #FFFDD0Quiet luxuryOpen combinationBlush and Sage
#DE5D83 · #BCB88ABotanical softnessOpen combinationPink and Gray are a balanced softness pair: grey neutralises pink, so the combination keeps a soft signal without tipping into sweetness — it is the standard way to make pink work in a serious layout.
Frequently asked questions
Yes — this pair is used for apparel branding, interior design, editorial layout. The two colors measure 2.57:1 against each other, which means the two should sit side by side as surfaces rather than as text and background.
Good to know
- Every value on this page is calculated from #FFC0CB and #808080 — nothing is hardcoded.
- Build a longer palette out of Pink or Gray in the palette generator, or test your own text pair in the contrast checker.
Put this combination to work
Turn Pink and Gray into a full palette, a gradient or a set of shades — or check the pair against WCAG.
