HueWiz / Color names / Blush Pink
#F4C2C2

Blush Pink color code

Blush Pink hex code: #F4C2C2 · RGB 244, 194, 194. Also called blush, soft pink.

Build a website palette from blush pink →

What color is blush pink?

Blush pink is a soft, warm pink that mimics a natural flush. In design and weddings it usually means a pale pink like #F4C2C2 (which color references also list as baby pink). Confusingly, the 'blush' in many color references is a much stronger rose, #DE5D83, so check which one your client means.

Blush is everywhere in weddings, beauty, fashion and lifestyle brands, and it's a popular warm neutral for portfolios and boutique sites. It reads as gentle, romantic and approachable.

Pale blush needs dark text and works best as a background or accent block. Pair it with gold, charcoal, sage or navy. Avoid pairing pale blush with pure white at large sizes because the contrast is so low it can look washed out; use a warm off-white instead.

Blush Pink variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Soft blush (also listed as baby pink)#F4C2C2rgb(244, 194, 194) · reference
Blush (reference value)#DE5D83rgb(222, 93, 131) · reference
Pale blush#FAE0E0rgb(250, 224, 224) · HueWiz pick
Peachy blush#F7CAC9rgb(247, 202, 201) · HueWiz pick

Blush Pink on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with blush pink's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme
StudioWorkAboutContact

Spring collection

Designed around blush pink.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more
NewCard on surface with an accent badge.
Light roles · surface #FEF4F4 · text #281B1C · link #906464
dark theme
StudioWorkAboutContact

Spring collection

Designed around blush pink.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more
NewCard on surface with an accent badge.
Dark roles · surface #1B1111 · text #F3EDED · link #F4C2C2

Blush Pink color palettes

Hand-picked combinations that work with blush pink. Hover a swatch to see its code; click to copy.

Blush & gold

Open the first color in the palette studio →

Blush & charcoal

Open the first color in the palette studio →

Garden party

Open the first color in the palette studio →

Blush Pink contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

PairingRatioNormal textLarge text
White text on blush pink1.57:1FailFail
Black text on blush pink13.34:1AAAAAA
Blush Pink text on white1.57:1FailFail
Blush Pink text on near-black #11111111.99:1AAAAAA
White text on deeper blush pink #96696A4.64:1AAAAA

Blush Pink shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #F4C2C2. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-blush-pink-50: #FFF4F4;
  --color-blush-pink-100: #FFE6E6;
  --color-blush-pink-200: #FDCDCD;
  --color-blush-pink-300: #E4B5B5;
  --color-blush-pink-400: #C39B9B;
  --color-blush-pink-500: #A28181;
  --color-blush-pink-600: #836868;
  --color-blush-pink-700: #695353;
  --color-blush-pink-800: #503F3F;
  --color-blush-pink-900: #382C2C;
  --color-blush-pink-950: #211A1A;
  --color-blush-pink: #F4C2C2;
}

CSS variables

:root {
  --blush-pink: #F4C2C2;
  --blush-pink-rgb: 244 194 194;
  --blush-pink-light: #FFE6E6;
  --blush-pink-dark: #503F3F;
}

.btn-blush-pink {
  background: #96696A;
  color: #FFFFFF;
}

Need semantic roles (surface, text, primary, accent) and exports? Open blush pink in the Tailwind color generator.

Blush Pink FAQ

What is the hex code for blush pink?

#F4C2C2 is the value HueWiz uses for blush pink; it equals rgb(244, 194, 194). Other common versions include #DE5D83 (blush), #FAE0E0 (pale blush), #F7CAC9 (peachy blush).

Is blush pink a warm or cool color?

With an HSL hue of 0° and 69% saturation, blush pink reads as a warm red.

What text color looks best on blush pink?

Use dark text. White on #F4C2C2 measures 1.57:1 and black measures 13.34:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #96696A.

What colors go with blush pink?

Try blush & gold (#F4C2C2, #D4AF37, #FFF9F5); blush & charcoal (#FAE0E0, #F4C2C2, #36454F); garden party (#F7CAC9, #9CAF88, #FFFDF7). Each palette above can be copied or opened in the HueWiz studio.

Closest CSS named colors

Blush Pink isn't a CSS keyword. These built-in CSS colors are the nearest by perceptual (OKLab) distance; lower ΔE means closer.

Related color names

Copied