Castro to Cookie Dough Color Palette

About this palette

Castro to Cookie Dough is a 5-color cool, vintage palette: #481D2E (Castro), #CCE0FF (Icy Plains), #2F418A (Pacific Navy), #21B49F (Waterfall), #AB7300 (Cookie Dough). It mixes red, blue, turquoise, yellow tones and feels cool overall. The strongest text pairing is #481D2E on #CCE0FF with a contrast ratio of 10.51:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(72, 29, 46)	hsl(336, 43%, 20%)
Icy Plains	rgb(204, 224, 255)	hsl(216, 100%, 90%)
Pacific Navy	rgb(47, 65, 138)	hsl(228, 49%, 36%)
Waterfall	rgb(33, 180, 159)	hsl(171, 69%, 42%)
Cookie Dough	rgb(171, 115, 0)	hsl(40, 100%, 34%)

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.

Aa10.51:1 Very good#481D2E on #CCE0FF
Aa10.51:1 Very good#CCE0FF on #481D2E
Aa6.98:1 Good#CCE0FF on #2F418A
Aa6.98:1 Good#2F418A on #CCE0FF
Aa5.43:1 Good#481D2E on #21B49F
Aa5.43:1 Good#21B49F on #481D2E
Aa3.61:1 Poor#2F418A on #21B49F
Aa3.61:1 Poor#21B49F on #2F418A

Color blindness preview

CSS variables

/* Castro to Cookie Dough — https://swatchly.xyz/palette/481d2e-cce0ff-2f418a-21b49f-ab7300 */
:root {
  --castro: #481d2e;
  --icy-plains: #cce0ff;
  --pacific-navy: #2f418a;
  --waterfall: #21b49f;
  --cookie-dough: #ab7300;
}

Tailwind CSS v4

/* Castro to Cookie Dough — https://swatchly.xyz/palette/481d2e-cce0ff-2f418a-21b49f-ab7300 */
@theme {
  --color-castro: #481d2e;
  --color-castro-50: #fff1f5;
  --color-castro-100: #ffe2eb;
  --color-castro-200: #f5cad8;
  --color-castro-300: #e2b2c1;
  --color-castro-400: #c390a1;
  --color-castro-500: #a67384;
  --color-castro-600: #895869;
  --color-castro-700: #6e4352;
  --color-castro-800: #56313e;
  --color-castro-900: #481d2e;
  --color-castro-950: #29141b;
  --color-icy-plains: #cce0ff;
  --color-icy-plains-50: #f7faff;
  --color-icy-plains-100: #e9f2ff;
  --color-icy-plains-200: #cce0ff;
  --color-icy-plains-300: #b8c8e1;
  --color-icy-plains-400: #95a7c3;
  --color-icy-plains-500: #788ba7;
  --color-icy-plains-600: #5e6f8a;
  --color-icy-plains-700: #47576f;
  --color-icy-plains-800: #364358;
  --color-icy-plains-900: #283345;
  --color-icy-plains-950: #17202c;
  --color-pacific-navy: #2f418a;
  --color-pacific-navy-50: #f1f5ff;
  --color-pacific-navy-100: #e3ebff;
  --color-pacific-navy-200: #c8d7ff;
  --color-pacific-navy-300: #aac0ff;
  --color-pacific-navy-400: #87a0ee;
  --color-pacific-navy-500: #6c85d4;
  --color-pacific-navy-600: #546bb7;
  --color-pacific-navy-700: #41559b;
  --color-pacific-navy-800: #2f418a;
  --color-pacific-navy-900: #253368;
  --color-pacific-navy-950: #151f46;
  --color-waterfall: #21b49f;
  --color-waterfall-50: #d0fff4;
  --color-waterfall-100: #b0faea;
  --color-waterfall-200: #8de8d6;
  --color-waterfall-300: #66d2bf;
  --color-waterfall-400: #21b49f;
  --color-waterfall-500: #009784;
  --color-waterfall-600: #007a6b;
  --color-waterfall-700: #006155;
  --color-waterfall-800: #004c42;
  --color-waterfall-900: #003b33;
  --color-waterfall-950: #002620;
  --color-cookie-dough: #ab7300;
  --color-cookie-dough-50: #fff2e0;
  --color-cookie-dough-100: #ffe4c1;
  --color-cookie-dough-200: #f9cb8c;
  --color-cookie-dough-300: #e6b268;
  --color-cookie-dough-400: #c89038;
  --color-cookie-dough-500: #ab7300;
  --color-cookie-dough-600: #8a5c00;
  --color-cookie-dough-700: #6e4900;
  --color-cookie-dough-800: #573800;
  --color-cookie-dough-900: #442b00;
  --color-cookie-dough-950: #2c1a00;
}