Castro to Oh Boy! Color Palette

About this palette

Castro to Oh Boy! is a 5-color cool, vintage palette: #4C2330 (Castro), #47521D (Zen Garden Olive), #AC6473 (Cinnapink), #9CC44E (Lone Hunter), #BCD6FF (Oh Boy!). It mixes red, green, blue tones and feels cool overall. The strongest text pairing is #4C2330 on #BCD6FF with a contrast ratio of 8.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(76, 35, 48)	hsl(341, 37%, 22%)
Zen Garden Olive	rgb(71, 82, 29)	hsl(72, 48%, 22%)
Cinnapink	rgb(172, 100, 115)	hsl(348, 30%, 53%)
Lone Hunter	rgb(156, 196, 78)	hsl(80, 50%, 54%)
Oh Boy!	rgb(188, 214, 255)	hsl(217, 100%, 87%)

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.93:1 Very good#4C2330 on #BCD6FF
Aa8.93:1 Very good#BCD6FF on #4C2330
Aa6.55:1 Good#4C2330 on #9CC44E
Aa6.55:1 Good#9CC44E on #4C2330
Aa5.70:1 Good#47521D on #BCD6FF
Aa5.70:1 Good#BCD6FF on #47521D
Aa4.18:1 Poor#47521D on #9CC44E
Aa4.18:1 Poor#9CC44E on #47521D

Color blindness preview

CSS variables

/* Castro to Oh Boy! — https://swatchly.xyz/palette/4c2330-47521d-ac6473-9cc44e-bcd6ff */
:root {
  --castro: #4c2330;
  --zen-garden-olive: #47521d;
  --cinnapink: #ac6473;
  --lone-hunter: #9cc44e;
  --oh-boy: #bcd6ff;
}

Tailwind CSS v4

/* Castro to Oh Boy! — https://swatchly.xyz/palette/4c2330-47521d-ac6473-9cc44e-bcd6ff */
@theme {
  --color-castro: #4c2330;
  --color-castro-50: #fff1f4;
  --color-castro-100: #ffe3ea;
  --color-castro-200: #f4cbd5;
  --color-castro-300: #e0b3be;
  --color-castro-400: #c3929f;
  --color-castro-500: #a77683;
  --color-castro-600: #8a5c69;
  --color-castro-700: #704753;
  --color-castro-800: #593540;
  --color-castro-900: #4c2330;
  --color-castro-950: #2d171e;
  --color-zen-garden-olive: #47521d;
  --color-zen-garden-olive-50: #f1fada;
  --color-zen-garden-olive-100: #e7f0cd;
  --color-zen-garden-olive-200: #d1dcb1;
  --color-zen-garden-olive-300: #b8c494;
  --color-zen-garden-olive-400: #96a46e;
  --color-zen-garden-olive-500: #7a8651;
  --color-zen-garden-olive-600: #5e6a37;
  --color-zen-garden-olive-700: #47521d;
  --color-zen-garden-olive-800: #374018;
  --color-zen-garden-olive-900: #2a310f;
  --color-zen-garden-olive-950: #191e06;
  --color-cinnapink: #ac6473;
  --color-cinnapink-50: #ffeff1;
  --color-cinnapink-100: #ffdee3;
  --color-cinnapink-200: #fdbfca;
  --color-cinnapink-300: #e9a4b1;
  --color-cinnapink-400: #ca818f;
  --color-cinnapink-500: #ac6473;
  --color-cinnapink-600: #904d5b;
  --color-cinnapink-700: #763a47;
  --color-cinnapink-800: #5f2b37;
  --color-cinnapink-900: #4c202a;
  --color-cinnapink-950: #32121a;
  --color-lone-hunter: #9cc44e;
  --color-lone-hunter-50: #dffab7;
  --color-lone-hunter-100: #d1efa3;
  --color-lone-hunter-200: #b9da80;
  --color-lone-hunter-300: #9cc44e;
  --color-lone-hunter-400: #80a62f;
  --color-lone-hunter-500: #688c00;
  --color-lone-hunter-600: #547200;
  --color-lone-hunter-700: #435b00;
  --color-lone-hunter-800: #344900;
  --color-lone-hunter-900: #293a00;
  --color-lone-hunter-950: #182400;
  --color-oh-boy: #bcd6ff;
  --color-oh-boy-50: #ecf4ff;
  --color-oh-boy-100: #dceaff;
  --color-oh-boy-200: #bcd6ff;
  --color-oh-boy-300: #aac0e3;
  --color-oh-boy-400: #89a1c6;
  --color-oh-boy-500: #6e86ab;
  --color-oh-boy-600: #556c8f;
  --color-oh-boy-700: #415576;
  --color-oh-boy-800: #31435f;
  --color-oh-boy-900: #24334b;
  --color-oh-boy-950: #151f30;
}