Castro to Strawberry Cheesecake Color Palette

About this palette

Castro to Strawberry Cheesecake is a 4-color warm, vintage, monochromatic, gradient palette: #401F29 (Castro), #7D4354 (Nocturne Red), #C37591 (Prehistoric Pink), #FFDBE8 (Strawberry Cheesecake). It mixes red, pink tones and feels warm overall. The strongest text pairing is #401F29 on #FFDBE8 with a contrast ratio of 11.45:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(64, 31, 41)	hsl(342, 35%, 19%)
Nocturne Red	rgb(125, 67, 84)	hsl(342, 30%, 38%)
Prehistoric Pink	rgb(195, 117, 145)	hsl(338, 39%, 61%)
Strawberry Cheesecake	rgb(255, 219, 232)	hsl(338, 100%, 93%)

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.

Aa11.45:1 Very good#401F29 on #FFDBE8
Aa11.45:1 Very good#FFDBE8 on #401F29
Aa5.90:1 Good#7D4354 on #FFDBE8
Aa5.90:1 Good#FFDBE8 on #7D4354
Aa4.34:1 Poor#401F29 on #C37591
Aa4.34:1 Poor#C37591 on #401F29

Color blindness preview

CSS variables

/* Castro to Strawberry Cheesecake — https://swatchly.xyz/palette/401f29-7d4354-c37591-ffdbe8 */
:root {
  --castro: #401f29;
  --nocturne-red: #7d4354;
  --prehistoric-pink: #c37591;
  --strawberry-cheesecake: #ffdbe8;
}

Tailwind CSS v4

/* Castro to Strawberry Cheesecake — https://swatchly.xyz/palette/401f29-7d4354-c37591-ffdbe8 */
@theme {
  --color-castro: #401f29;
  --color-castro-50: #fff1f4;
  --color-castro-100: #ffe3e9;
  --color-castro-200: #efcdd6;
  --color-castro-300: #dbb5bf;
  --color-castro-400: #bc939e;
  --color-castro-500: #9f7681;
  --color-castro-600: #815b65;
  --color-castro-700: #66454e;
  --color-castro-800: #4e323a;
  --color-castro-900: #401f29;
  --color-castro-950: #231418;
  --color-nocturne-red: #7d4354;
  --color-nocturne-red-50: #fff1f4;
  --color-nocturne-red-100: #ffe3e9;
  --color-nocturne-red-200: #fcc8d5;
  --color-nocturne-red-300: #e9b0be;
  --color-nocturne-red-400: #cd8e9f;
  --color-nocturne-red-500: #b27384;
  --color-nocturne-red-600: #95596a;
  --color-nocturne-red-700: #7d4354;
  --color-nocturne-red-800: #633341;
  --color-nocturne-red-900: #4e2632;
  --color-nocturne-red-950: #33161e;
  --color-prehistoric-pink: #c37591;
  --color-prehistoric-pink-50: #fff4f7;
  --color-prehistoric-pink-100: #ffe8ef;
  --color-prehistoric-pink-200: #ffcedd;
  --color-prehistoric-pink-300: #f6b2c9;
  --color-prehistoric-pink-400: #dc91ab;
  --color-prehistoric-pink-500: #c37591;
  --color-prehistoric-pink-600: #a35975;
  --color-prehistoric-pink-700: #86425c;
  --color-prehistoric-pink-800: #6c3047;
  --color-prehistoric-pink-900: #542236;
  --color-prehistoric-pink-950: #361221;
  --color-strawberry-cheesecake: #ffdbe8;
  --color-strawberry-cheesecake-50: #ffebf2;
  --color-strawberry-cheesecake-100: #ffdbe8;
  --color-strawberry-cheesecake-200: #e6cbd5;
  --color-strawberry-cheesecake-300: #d2b4bf;
  --color-strawberry-cheesecake-400: #b595a1;
  --color-strawberry-cheesecake-500: #9a7a86;
  --color-strawberry-cheesecake-600: #7f616d;
  --color-strawberry-cheesecake-700: #684c57;
  --color-strawberry-cheesecake-800: #523a44;
  --color-strawberry-cheesecake-900: #402c34;
  --color-strawberry-cheesecake-950: #291a20;
}