Castro to Winter Wizard Color Palette

About this palette

Castro to Winter Wizard is a 5-color warm palette: #471F32 (Castro), #A63069 (Plastic Lips), #0092A8 (Oasis), #ED9B5A (Ridgeback), #97E8FF (Winter Wizard). It mixes red, turquoise, orange, blue tones and feels warm overall. The strongest text pairing is #471F32 on #97E8FF with a contrast ratio of 10.13:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(71, 31, 50)	hsl(332, 39%, 20%)
Plastic Lips	rgb(166, 48, 105)	hsl(331, 55%, 42%)
Oasis	rgb(0, 146, 168)	hsl(188, 100%, 33%)
Ridgeback	rgb(237, 155, 90)	hsl(27, 80%, 64%)
Winter Wizard	rgb(151, 232, 255)	hsl(193, 100%, 80%)

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.13:1 Very good#471F32 on #97E8FF
Aa10.13:1 Very good#97E8FF on #471F32
Aa6.25:1 Good#471F32 on #ED9B5A
Aa6.25:1 Good#ED9B5A on #471F32
Aa4.71:1 Good#A63069 on #97E8FF
Aa4.71:1 Good#97E8FF on #A63069
Aa3.76:1 Poor#471F32 on #0092A8
Aa3.76:1 Poor#0092A8 on #471F32

Color blindness preview

CSS variables

/* Castro to Winter Wizard — https://swatchly.xyz/palette/471f32-a63069-0092a8-ed9b5a-97e8ff */
:root {
  --castro: #471f32;
  --plastic-lips: #a63069;
  --oasis: #0092a8;
  --ridgeback: #ed9b5a;
  --winter-wizard: #97e8ff;
}

Tailwind CSS v4

/* Castro to Winter Wizard — https://swatchly.xyz/palette/471f32-a63069-0092a8-ed9b5a-97e8ff */
@theme {
  --color-castro: #471f32;
  --color-castro-50: #fff1f6;
  --color-castro-100: #ffe2ee;
  --color-castro-200: #f2cbdb;
  --color-castro-300: #dfb2c5;
  --color-castro-400: #c191a5;
  --color-castro-500: #a47489;
  --color-castro-600: #875a6d;
  --color-castro-700: #6c4456;
  --color-castro-800: #553242;
  --color-castro-900: #471f32;
  --color-castro-950: #29151e;
  --color-plastic-lips: #a63069;
  --color-plastic-lips-50: #fff1f6;
  --color-plastic-lips-100: #ffe0eb;
  --color-plastic-lips-200: #ffc0d7;
  --color-plastic-lips-300: #ff98c1;
  --color-plastic-lips-400: #e56ea1;
  --color-plastic-lips-500: #c64e85;
  --color-plastic-lips-600: #a63069;
  --color-plastic-lips-700: #882053;
  --color-plastic-lips-800: #6e1241;
  --color-plastic-lips-900: #580832;
  --color-plastic-lips-950: #3a031f;
  --color-oasis: #0092a8;
  --color-oasis-50: #e2f9ff;
  --color-oasis-100: #c2f4ff;
  --color-oasis-200: #96e4f5;
  --color-oasis-300: #72cee2;
  --color-oasis-400: #40aec4;
  --color-oasis-500: #0092a8;
  --color-oasis-600: #007688;
  --color-oasis-700: #005d6c;
  --color-oasis-800: #004955;
  --color-oasis-900: #003942;
  --color-oasis-950: #00242b;
  --color-ridgeback: #ed9b5a;
  --color-ridgeback-50: #fff9f5;
  --color-ridgeback-100: #fff0e6;
  --color-ridgeback-200: #ffdabf;
  --color-ridgeback-300: #ffbe8e;
  --color-ridgeback-400: #ed9b5a;
  --color-ridgeback-500: #cb7d3c;
  --color-ridgeback-600: #ab5f16;
  --color-ridgeback-700: #8a4800;
  --color-ridgeback-800: #6c3700;
  --color-ridgeback-900: #522800;
  --color-ridgeback-950: #331700;
  --color-winter-wizard: #97e8ff;
  --color-winter-wizard-50: #eafaff;
  --color-winter-wizard-100: #d0f4ff;
  --color-winter-wizard-200: #97e8ff;
  --color-winter-wizard-300: #8ccfe2;
  --color-winter-wizard-400: #63b0c5;
  --color-winter-wizard-500: #4294a9;
  --color-winter-wizard-600: #23788c;
  --color-winter-wizard-700: #076072;
  --color-winter-wizard-800: #004b5a;
  --color-winter-wizard-900: #003a46;
  --color-winter-wizard-950: #00242d;
}