Strawberry Blonde to Oxblood color palette

FFDBDFStrawberry Blonde FF8F9FRock’n’Rose CE566EStrawberry Moon A24852Rose Laffy Taffy 7E112BOxblood

Open in generator Export PNG, PDF, ASE…

About this palette

Strawberry Blonde to Oxblood is a 5-color warm, monochromatic, gradient palette: #FFDBDF (Strawberry Blonde), #FF8F9F (Rock’n’Rose), #CE566E (Strawberry Moon), #A24852 (Rose Laffy Taffy), #7E112B (Oxblood). It mixes pink, red tones and feels warm overall. The strongest text pairing is #FFDBDF on #7E112B with a contrast ratio of 8.22:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Strawberry Blonde	rgb(255, 219, 223)	hsl(353, 100%, 93%)
Rock’n’Rose	rgb(255, 143, 159)	hsl(351, 100%, 78%)
Strawberry Moon	rgb(206, 86, 110)	hsl(348, 55%, 57%)
Rose Laffy Taffy	rgb(162, 72, 82)	hsl(353, 38%, 46%)
Oxblood	rgb(126, 17, 43)	hsl(346, 76%, 28%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa8.22:1 Very good#FFDBDF on #7E112B
Aa8.22:1 Very good#7E112B on #FFDBDF
Aa4.84:1 Good#FF8F9F on #7E112B
Aa4.84:1 Good#7E112B on #FF8F9F
Aa4.59:1 Good#FFDBDF on #A24852
Aa4.59:1 Good#A24852 on #FFDBDF
Aa3.18:1 Poor#FFDBDF on #CE566E
Aa3.18:1 Poor#CE566E on #FFDBDF

Color blindness preview

CSS variables

/* Strawberry Blonde to Oxblood — https://swatchly.xyz/palette/ffdbdf-ff8f9f-ce566e-a24852-7e112b */
:root {
  --strawberry-blonde: #ffdbdf;
  --rock-n-rose: #ff8f9f;
  --strawberry-moon: #ce566e;
  --rose-laffy-taffy: #a24852;
  --oxblood: #7e112b;
}

Tailwind CSS v4

/* Strawberry Blonde to Oxblood — https://swatchly.xyz/palette/ffdbdf-ff8f9f-ce566e-a24852-7e112b */
@theme {
  --color-strawberry-blonde: #ffdbdf;
  --color-strawberry-blonde-50: #ffeaed;
  --color-strawberry-blonde-100: #ffdbdf;
  --color-strawberry-blonde-200: #e6cbce;
  --color-strawberry-blonde-300: #d3b4b8;
  --color-strawberry-blonde-400: #b69599;
  --color-strawberry-blonde-500: #9b7b7f;
  --color-strawberry-blonde-600: #806265;
  --color-strawberry-blonde-700: #684d50;
  --color-strawberry-blonde-800: #533b3e;
  --color-strawberry-blonde-900: #412d2f;
  --color-strawberry-blonde-950: #291b1d;
  --color-rock-n-rose: #ff8f9f;
  --color-rock-n-rose-50: #ffe9eb;
  --color-rock-n-rose-100: #ffd8dc;
  --color-rock-n-rose-200: #ffb8c0;
  --color-rock-n-rose-300: #ff8f9f;
  --color-rock-n-rose-400: #dd7383;
  --color-rock-n-rose-500: #c1586a;
  --color-rock-n-rose-600: #a44053;
  --color-rock-n-rose-700: #882d40;
  --color-rock-n-rose-800: #702031;
  --color-rock-n-rose-900: #5b1525;
  --color-rock-n-rose-950: #3c0a15;
  --color-strawberry-moon: #ce566e;
  --color-strawberry-moon-50: #fff1f2;
  --color-strawberry-moon-100: #ffe2e5;
  --color-strawberry-moon-200: #ffc5cc;
  --color-strawberry-moon-300: #ffa0ae;
  --color-strawberry-moon-400: #eb758a;
  --color-strawberry-moon-500: #ce566e;
  --color-strawberry-moon-600: #ae3b55;
  --color-strawberry-moon-700: #902741;
  --color-strawberry-moon-800: #751831;
  --color-strawberry-moon-900: #5e0d24;
  --color-strawberry-moon-950: #3e0415;
  --color-rose-laffy-taffy: #a24852;
  --color-rose-laffy-taffy-50: #fff1f2;
  --color-rose-laffy-taffy-100: #ffe3e4;
  --color-rose-laffy-taffy-200: #ffc5c8;
  --color-rose-laffy-taffy-300: #faa4aa;
  --color-rose-laffy-taffy-400: #de8088;
  --color-rose-laffy-taffy-500: #c0636c;
  --color-rose-laffy-taffy-600: #a24852;
  --color-rose-laffy-taffy-700: #85353f;
  --color-rose-laffy-taffy-800: #6b262f;
  --color-rose-laffy-taffy-900: #551a23;
  --color-rose-laffy-taffy-950: #380e14;
  --color-oxblood: #7e112b;
  --color-oxblood-50: #fff1f2;
  --color-oxblood-100: #ffe3e5;
  --color-oxblood-200: #ffc7ca;
  --color-oxblood-300: #ffa4ab;
  --color-oxblood-400: #ea7c87;
  --color-oxblood-500: #ce5f6c;
  --color-oxblood-600: #af4453;
  --color-oxblood-700: #912f3f;
  --color-oxblood-800: #7e112b;
  --color-oxblood-900: #5f1422;
  --color-oxblood-950: #3f0913;
}