Castro to Exotic Escape Color Palette

About this palette

Castro to Exotic Escape is a 5-color warm, vintage palette: #48202B (Castro), #723E43 (Wine Cellar), #A76528 (Mai Tai), #00AACF (Gummy Dolphins), #99DAE4 (Exotic Escape). It mixes red, brown, blue, turquoise tones and feels warm overall. The strongest text pairing is #48202B on #99DAE4 with a contrast ratio of 8.90:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(72, 32, 43)	hsl(344, 38%, 20%)
Wine Cellar	rgb(114, 62, 67)	hsl(354, 30%, 35%)
Mai Tai	rgb(167, 101, 40)	hsl(29, 61%, 41%)
Gummy Dolphins	rgb(0, 170, 207)	hsl(191, 100%, 41%)
Exotic Escape	rgb(153, 218, 228)	hsl(188, 58%, 75%)

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.90:1 Very good#48202B on #99DAE4
Aa8.90:1 Very good#99DAE4 on #48202B
Aa5.43:1 Good#723E43 on #99DAE4
Aa5.43:1 Good#99DAE4 on #723E43
Aa5.04:1 Good#48202B on #00AACF
Aa5.04:1 Good#00AACF on #48202B
Aa3.08:1 Poor#723E43 on #00AACF
Aa3.08:1 Poor#00AACF on #723E43

Color blindness preview

CSS variables

/* Castro to Exotic Escape — https://swatchly.xyz/palette/48202b-723e43-a76528-00aacf-99dae4 */
:root {
  --castro: #48202b;
  --wine-cellar: #723e43;
  --mai-tai: #a76528;
  --gummy-dolphins: #00aacf;
  --exotic-escape: #99dae4;
}

Tailwind CSS v4

/* Castro to Exotic Escape — https://swatchly.xyz/palette/48202b-723e43-a76528-00aacf-99dae4 */
@theme {
  --color-castro: #48202b;
  --color-castro-50: #fff1f4;
  --color-castro-100: #ffe3e9;
  --color-castro-200: #f3cbd4;
  --color-castro-300: #e0b3bd;
  --color-castro-400: #c2919c;
  --color-castro-500: #a57580;
  --color-castro-600: #885b65;
  --color-castro-700: #6d454f;
  --color-castro-800: #56333c;
  --color-castro-900: #48202b;
  --color-castro-950: #29151a;
  --color-wine-cellar: #723e43;
  --color-wine-cellar-50: #fff1f2;
  --color-wine-cellar-100: #ffe3e5;
  --color-wine-cellar-200: #f8c8cb;
  --color-wine-cellar-300: #e4afb2;
  --color-wine-cellar-400: #c68d91;
  --color-wine-cellar-500: #a97074;
  --color-wine-cellar-600: #8b565a;
  --color-wine-cellar-700: #723e43;
  --color-wine-cellar-800: #593034;
  --color-wine-cellar-900: #462427;
  --color-wine-cellar-950: #2d1517;
  --color-mai-tai: #a76528;
  --color-mai-tai-50: #fff3e9;
  --color-mai-tai-100: #ffe9d8;
  --color-mai-tai-200: #ffd2ae;
  --color-mai-tai-300: #f5b989;
  --color-mai-tai-400: #db9963;
  --color-mai-tai-500: #c27e44;
  --color-mai-tai-600: #a76528;
  --color-mai-tai-700: #8a4d0d;
  --color-mai-tai-800: #6e3a00;
  --color-mai-tai-900: #552c00;
  --color-mai-tai-950: #371a00;
  --color-gummy-dolphins: #00aacf;
  --color-gummy-dolphins-50: #dff7ff;
  --color-gummy-dolphins-100: #c2efff;
  --color-gummy-dolphins-200: #85e1fe;
  --color-gummy-dolphins-300: #5ccaeb;
  --color-gummy-dolphins-400: #00aacf;
  --color-gummy-dolphins-500: #008ead;
  --color-gummy-dolphins-600: #00728c;
  --color-gummy-dolphins-700: #005b70;
  --color-gummy-dolphins-800: #004859;
  --color-gummy-dolphins-900: #003846;
  --color-gummy-dolphins-950: #00242e;
  --color-exotic-escape: #99dae4;
  --color-exotic-escape-50: #d0f6fc;
  --color-exotic-escape-100: #c1ebf2;
  --color-exotic-escape-200: #99dae4;
  --color-exotic-escape-300: #8bc4cc;
  --color-exotic-escape-400: #69a7b0;
  --color-exotic-escape-500: #4d8d96;
  --color-exotic-escape-600: #35737c;
  --color-exotic-escape-700: #225d66;
  --color-exotic-escape-800: #144b52;
  --color-exotic-escape-900: #0a3a40;
  --color-exotic-escape-950: #032429;
}