Over the Hills to Castro Color Palette

About this palette

Over the Hills to Castro is a 4-color cool palette: #4C6B00 (Over the Hills), #BAA7E4 (Enchanted Lavender), #D0FFF8 (Ice), #4A222D (Castro). It mixes green, purple, white, red tones and feels cool overall. The strongest text pairing is #D0FFF8 on #4A222D with a contrast ratio of 12.42:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Over the Hills	rgb(76, 107, 0)	hsl(77, 100%, 21%)
Enchanted Lavender	rgb(186, 167, 228)	hsl(259, 53%, 77%)
Ice	rgb(208, 255, 248)	hsl(171, 100%, 91%)
Castro	rgb(74, 34, 45)	hsl(344, 37%, 21%)

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.

Aa12.42:1 Super#D0FFF8 on #4A222D
Aa12.42:1 Super#4A222D on #D0FFF8
Aa6.25:1 Good#BAA7E4 on #4A222D
Aa6.25:1 Good#4A222D on #BAA7E4
Aa5.67:1 Good#4C6B00 on #D0FFF8
Aa5.67:1 Good#D0FFF8 on #4C6B00

Color blindness preview

CSS variables

/* Over the Hills to Castro — https://swatchly.xyz/palette/4c6b00-baa7e4-d0fff8-4a222d */
:root {
  --over-the-hills: #4c6b00;
  --enchanted-lavender: #baa7e4;
  --ice: #d0fff8;
  --castro: #4a222d;
}

Tailwind CSS v4

/* Over the Hills to Castro — https://swatchly.xyz/palette/4c6b00-baa7e4-d0fff8-4a222d */
@theme {
  --color-over-the-hills: #4c6b00;
  --color-over-the-hills-50: #e9fecd;
  --color-over-the-hills-100: #ddf5be;
  --color-over-the-hills-200: #c9e5a4;
  --color-over-the-hills-300: #b3d287;
  --color-over-the-hills-400: #93b560;
  --color-over-the-hills-500: #799b41;
  --color-over-the-hills-600: #618125;
  --color-over-the-hills-700: #4c6b00;
  --color-over-the-hills-800: #3b5400;
  --color-over-the-hills-900: #2c4100;
  --color-over-the-hills-950: #1b2900;
  --color-enchanted-lavender: #baa7e4;
  --color-enchanted-lavender-50: #f0eaff;
  --color-enchanted-lavender-100: #e5dbff;
  --color-enchanted-lavender-200: #d1c2f4;
  --color-enchanted-lavender-300: #baa7e4;
  --color-enchanted-lavender-400: #9d8bc5;
  --color-enchanted-lavender-500: #8472ab;
  --color-enchanted-lavender-600: #6c5a90;
  --color-enchanted-lavender-700: #574777;
  --color-enchanted-lavender-800: #463762;
  --color-enchanted-lavender-900: #372b4f;
  --color-enchanted-lavender-950: #231934;
  --color-ice: #d0fff8;
  --color-ice-50: #d0fff8;
  --color-ice-100: #d4f1ed;
  --color-ice-200: #bddfda;
  --color-ice-300: #a3c9c4;
  --color-ice-400: #80aba5;
  --color-ice-500: #64908a;
  --color-ice-600: #4b756f;
  --color-ice-700: #375e59;
  --color-ice-800: #274a45;
  --color-ice-900: #1c3935;
  --color-ice-950: #0e2421;
  --color-castro: #4a222d;
  --color-castro-50: #fff1f4;
  --color-castro-100: #ffe3e9;
  --color-castro-200: #f3ccd4;
  --color-castro-300: #e0b3bd;
  --color-castro-400: #c2929d;
  --color-castro-500: #a67681;
  --color-castro-600: #895c66;
  --color-castro-700: #6f4650;
  --color-castro-800: #58353d;
  --color-castro-900: #4a222d;
  --color-castro-950: #2b161c;
}