Castro to Shallot Peel Color Palette

About this palette

Castro to Shallot Peel is a 5-color warm, vintage palette: #3C2638 (Castro), #31606A (After the Storm), #9E6BAB (Crown Jewels), #C3A45A (Camel), #ECC27A (Shallot Peel). It mixes purple, turquoise, yellow tones and feels warm overall. The strongest text pairing is #3C2638 on #ECC27A with a contrast ratio of 8.23:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(60, 38, 56)	hsl(311, 22%, 19%)
After the Storm	rgb(49, 96, 106)	hsl(191, 37%, 30%)
Crown Jewels	rgb(158, 107, 171)	hsl(288, 28%, 55%)
Camel	rgb(195, 164, 90)	hsl(42, 47%, 56%)
Shallot Peel	rgb(236, 194, 122)	hsl(38, 75%, 70%)

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.23:1 Very good#3C2638 on #ECC27A
Aa8.23:1 Very good#ECC27A on #3C2638
Aa5.75:1 Good#3C2638 on #C3A45A
Aa5.75:1 Good#C3A45A on #3C2638
Aa4.17:1 Poor#31606A on #ECC27A
Aa4.17:1 Poor#ECC27A on #31606A
Aa3.37:1 Poor#3C2638 on #9E6BAB
Aa3.37:1 Poor#9E6BAB on #3C2638

Color blindness preview

CSS variables

/* Castro to Shallot Peel — https://swatchly.xyz/palette/3c2638-31606a-9e6bab-c3a45a-ecc27a */
:root {
  --castro: #3c2638;
  --after-the-storm: #31606a;
  --crown-jewels: #9e6bab;
  --camel: #c3a45a;
  --shallot-peel: #ecc27a;
}

Tailwind CSS v4

/* Castro to Shallot Peel — https://swatchly.xyz/palette/3c2638-31606a-9e6bab-c3a45a-ecc27a */
@theme {
  --color-castro: #3c2638;
  --color-castro-50: #fff0fc;
  --color-castro-100: #f7e5f3;
  --color-castro-200: #e6d0e1;
  --color-castro-300: #d1b8cb;
  --color-castro-400: #b297ac;
  --color-castro-500: #957b90;
  --color-castro-600: #796074;
  --color-castro-700: #604a5c;
  --color-castro-800: #4b3847;
  --color-castro-900: #3c2638;
  --color-castro-950: #231821;
  --color-after-the-storm: #31606a;
  --color-after-the-storm-50: #e4faff;
  --color-after-the-storm-100: #d3f2f9;
  --color-after-the-storm-200: #bbdfe8;
  --color-after-the-storm-300: #a1cad4;
  --color-after-the-storm-400: #7eacb6;
  --color-after-the-storm-500: #62919c;
  --color-after-the-storm-600: #487781;
  --color-after-the-storm-700: #31606a;
  --color-after-the-storm-800: #254b53;
  --color-after-the-storm-900: #193a41;
  --color-after-the-storm-950: #0c2429;
  --color-crown-jewels: #9e6bab;
  --color-crown-jewels-50: #fcefff;
  --color-crown-jewels-100: #f9dfff;
  --color-crown-jewels-200: #edc4f8;
  --color-crown-jewels-300: #d9aae5;
  --color-crown-jewels-400: #ba88c7;
  --color-crown-jewels-500: #9e6bab;
  --color-crown-jewels-600: #83528f;
  --color-crown-jewels-700: #6a3e75;
  --color-crown-jewels-800: #552e5e;
  --color-crown-jewels-900: #43224b;
  --color-crown-jewels-950: #2b1331;
  --color-camel: #c3a45a;
  --color-camel-50: #fff7e4;
  --color-camel-100: #ffedc4;
  --color-camel-200: #f0daa6;
  --color-camel-300: #dec487;
  --color-camel-400: #c3a45a;
  --color-camel-500: #a5873d;
  --color-camel-600: #896b1e;
  --color-camel-700: #6f5401;
  --color-camel-800: #564100;
  --color-camel-900: #423100;
  --color-camel-950: #291d00;
  --color-shallot-peel: #ecc27a;
  --color-shallot-peel-50: #fff8ee;
  --color-shallot-peel-100: #ffefd4;
  --color-shallot-peel-200: #f8daa9;
  --color-shallot-peel-300: #ecc27a;
  --color-shallot-peel-400: #c8a15f;
  --color-shallot-peel-500: #ab843c;
  --color-shallot-peel-600: #8e681c;
  --color-shallot-peel-700: #735100;
  --color-shallot-peel-800: #593e00;
  --color-shallot-peel-900: #442e00;
  --color-shallot-peel-950: #2c1c00;
}