Castro to Red Elegance Color Palette

About this palette

Castro to Red Elegance is a 5-color dark, warm, earthy, monochromatic palette: #4B1A24 (Castro), #331812 (Close but No Cigar), #67313B (Arcane Red), #110600 (Blackout), #824655 (Red Elegance). It mixes brown, black, red tones and feels warm overall. The strongest text pairing is #110600 on #824655 with a contrast ratio of 2.82:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(75, 26, 36)	hsl(348, 49%, 20%)
Close but No Cigar	rgb(51, 24, 18)	hsl(11, 48%, 14%)
Arcane Red	rgb(103, 49, 59)	hsl(349, 36%, 30%)
Blackout	rgb(17, 6, 0)	hsl(21, 100%, 3%)
Red Elegance	rgb(130, 70, 85)	hsl(345, 30%, 39%)

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.

Color blindness preview

CSS variables

/* Castro to Red Elegance — https://swatchly.xyz/palette/4b1a24-331812-67313b-110600-824655 */
:root {
  --castro: #4b1a24;
  --close-but-no-cigar: #331812;
  --arcane-red: #67313b;
  --blackout: #110600;
  --red-elegance: #824655;
}

Tailwind CSS v4

/* Castro to Red Elegance — https://swatchly.xyz/palette/4b1a24-331812-67313b-110600-824655 */
@theme {
  --color-castro: #4b1a24;
  --color-castro-50: #fff1f3;
  --color-castro-100: #ffe3e6;
  --color-castro-200: #fac9cf;
  --color-castro-300: #e7b0b7;
  --color-castro-400: #c98e96;
  --color-castro-500: #ab7179;
  --color-castro-600: #8d565e;
  --color-castro-700: #714148;
  --color-castro-800: #582f36;
  --color-castro-900: #4b1a24;
  --color-castro-950: #2a1216;
  --color-close-but-no-cigar: #331812;
  --color-close-but-no-cigar-50: #fff2ef;
  --color-close-but-no-cigar-100: #fde5df;
  --color-close-but-no-cigar-200: #edd0c9;
  --color-close-but-no-cigar-300: #d9b9b1;
  --color-close-but-no-cigar-400: #bb9890;
  --color-close-but-no-cigar-500: #a07d75;
  --color-close-but-no-cigar-600: #84635c;
  --color-close-but-no-cigar-700: #6b4e47;
  --color-close-but-no-cigar-800: #563c36;
  --color-close-but-no-cigar-900: #442e29;
  --color-close-but-no-cigar-950: #331812;
  --color-arcane-red: #67313b;
  --color-arcane-red-50: #fff1f3;
  --color-arcane-red-100: #ffe3e6;
  --color-arcane-red-200: #fbc8cf;
  --color-arcane-red-300: #e8b0b8;
  --color-arcane-red-400: #cc8f98;
  --color-arcane-red-500: #b1747d;
  --color-arcane-red-600: #945a63;
  --color-arcane-red-700: #7a454e;
  --color-arcane-red-800: #67313b;
  --color-arcane-red-900: #4e272e;
  --color-arcane-red-950: #33171c;
  --color-blackout: #110600;
  --color-blackout-50: #fdf3ea;
  --color-blackout-100: #f4e9de;
  --color-blackout-200: #e2d5c8;
  --color-blackout-300: #cdbeb0;
  --color-blackout-400: #af9e8f;
  --color-blackout-500: #8e7e6e;
  --color-blackout-600: #6e5f51;
  --color-blackout-700: #524538;
  --color-blackout-800: #392f25;
  --color-blackout-900: #241c15;
  --color-blackout-950: #110600;
  --color-red-elegance: #824655;
  --color-red-elegance-50: #fff1f4;
  --color-red-elegance-100: #ffe3e8;
  --color-red-elegance-200: #fdc8d3;
  --color-red-elegance-300: #ecb1bd;
  --color-red-elegance-400: #d0909e;
  --color-red-elegance-500: #b67584;
  --color-red-elegance-600: #9a5c6b;
  --color-red-elegance-700: #824655;
  --color-red-elegance-800: #673542;
  --color-red-elegance-900: #512732;
  --color-red-elegance-950: #35171f;
}