Castro to Salmon Glow Color Palette

About this palette

Castro to Salmon Glow is a 5-color muted, warm, vintage, gradient palette: #412835 (Castro), #734B62 (Hibernation), #9E7868 (Woodhaven), #CB9393 (Rosetti), #EBB8B3 (Salmon Glow). It mixes red, orange, pink tones and feels warm overall. The strongest text pairing is #412835 on #EBB8B3 with a contrast ratio of 7.62:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(65, 40, 53)	hsl(329, 24%, 21%)
Hibernation	rgb(115, 75, 98)	hsl(326, 21%, 37%)
Woodhaven	rgb(158, 120, 104)	hsl(18, 22%, 51%)
Rosetti	rgb(203, 147, 147)	hsl(0, 35%, 69%)
Salmon Glow	rgb(235, 184, 179)	hsl(5, 58%, 81%)

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.

Aa7.62:1 Very good#412835 on #EBB8B3
Aa7.62:1 Very good#EBB8B3 on #412835
Aa5.15:1 Good#412835 on #CB9393
Aa5.15:1 Good#CB9393 on #412835
Aa4.13:1 Poor#734B62 on #EBB8B3
Aa4.13:1 Poor#EBB8B3 on #734B62
Aa3.38:1 Poor#412835 on #9E7868
Aa3.38:1 Poor#9E7868 on #412835

Color blindness preview

CSS variables

/* Castro to Salmon Glow — https://swatchly.xyz/palette/412835-734b62-9e7868-cb9393-ebb8b3 */
:root {
  --castro: #412835;
  --hibernation: #734b62;
  --woodhaven: #9e7868;
  --rosetti: #cb9393;
  --salmon-glow: #ebb8b3;
}

Tailwind CSS v4

/* Castro to Salmon Glow — https://swatchly.xyz/palette/412835-734b62-9e7868-cb9393-ebb8b3 */
@theme {
  --color-castro: #412835;
  --color-castro-50: #fff1f7;
  --color-castro-100: #f9e4ee;
  --color-castro-200: #e8d0db;
  --color-castro-300: #d4b8c5;
  --color-castro-400: #b597a6;
  --color-castro-500: #9a7b8a;
  --color-castro-600: #7e616f;
  --color-castro-700: #654b58;
  --color-castro-800: #4f3944;
  --color-castro-900: #412835;
  --color-castro-950: #261920;
  --color-hibernation: #734b62;
  --color-hibernation-50: #fff0f8;
  --color-hibernation-100: #ffe2f1;
  --color-hibernation-200: #f0cde0;
  --color-hibernation-300: #ddb5cb;
  --color-hibernation-400: #c095ad;
  --color-hibernation-500: #a57a92;
  --color-hibernation-600: #8a6178;
  --color-hibernation-700: #734b62;
  --color-hibernation-800: #5b3a4d;
  --color-hibernation-900: #472b3b;
  --color-hibernation-950: #2e1a25;
  --color-woodhaven: #9e7868;
  --color-woodhaven-50: #fff1eb;
  --color-woodhaven-100: #fee3d8;
  --color-woodhaven-200: #edcdc0;
  --color-woodhaven-300: #d9b5a6;
  --color-woodhaven-400: #ba9484;
  --color-woodhaven-500: #9e7868;
  --color-woodhaven-600: #835f50;
  --color-woodhaven-700: #6a4a3c;
  --color-woodhaven-800: #55392d;
  --color-woodhaven-900: #432b21;
  --color-woodhaven-950: #2b1a13;
  --color-rosetti: #cb9393;
  --color-rosetti-50: #fff3f2;
  --color-rosetti-100: #ffe5e5;
  --color-rosetti-200: #f9cdcc;
  --color-rosetti-300: #e6b5b4;
  --color-rosetti-400: #cb9393;
  --color-rosetti-500: #ad7878;
  --color-rosetti-600: #905d5e;
  --color-rosetti-700: #764848;
  --color-rosetti-800: #5e3637;
  --color-rosetti-900: #4a2829;
  --color-rosetti-950: #2f1718;
  --color-salmon-glow: #ebb8b3;
  --color-salmon-glow-50: #fff5f4;
  --color-salmon-glow-100: #ffe9e7;
  --color-salmon-glow-200: #f7d2ce;
  --color-salmon-glow-300: #ebb8b3;
  --color-salmon-glow-400: #c79994;
  --color-salmon-glow-500: #ab7c77;
  --color-salmon-glow-600: #8e615d;
  --color-salmon-glow-700: #734b47;
  --color-salmon-glow-800: #5b3835;
  --color-salmon-glow-900: #472a27;
  --color-salmon-glow-950: #2e1917;
}