Castro to Homegrown color palette

4A2333Castro 355931Pine 00AAAATeal Me No Lies 85BEC6Misty Cold Sea F7BDD7Manga Pink 618650Homegrown

Open in generator Export PNG, PDF, ASE…

About this palette

Castro to Homegrown is a 6-color cool palette: #4A2333 (Castro), #355931 (Pine), #00AAAA (Teal Me No Lies), #85BEC6 (Misty Cold Sea), #F7BDD7 (Manga Pink), #618650 (Homegrown). It mixes red, green, turquoise, pink tones and feels cool overall. The strongest text pairing is #4A2333 on #F7BDD7 with a contrast ratio of 8.37:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castro	rgb(74, 35, 51)	hsl(335, 36%, 21%)
Pine	rgb(53, 89, 49)	hsl(114, 29%, 27%)
Teal Me No Lies	rgb(0, 170, 170)	hsl(180, 100%, 33%)
Misty Cold Sea	rgb(133, 190, 198)	hsl(187, 36%, 65%)
Manga Pink	rgb(247, 189, 215)	hsl(333, 78%, 85%)
Homegrown	rgb(97, 134, 80)	hsl(101, 25%, 42%)

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.37:1 Very good#4A2333 on #F7BDD7
Aa8.37:1 Very good#F7BDD7 on #4A2333
Aa6.44:1 Good#4A2333 on #85BEC6
Aa6.44:1 Good#85BEC6 on #4A2333
Aa5.03:1 Good#355931 on #F7BDD7
Aa5.03:1 Good#F7BDD7 on #355931
Aa4.64:1 Good#4A2333 on #00AAAA
Aa4.64:1 Good#00AAAA on #4A2333

Color blindness preview

CSS variables

/* Castro to Homegrown — https://swatchly.xyz/palette/4a2333-355931-00aaaa-85bec6-f7bdd7-618650 */
:root {
  --castro: #4a2333;
  --pine: #355931;
  --teal-me-no-lies: #00aaaa;
  --misty-cold-sea: #85bec6;
  --manga-pink: #f7bdd7;
  --homegrown: #618650;
}

Tailwind CSS v4

/* Castro to Homegrown — https://swatchly.xyz/palette/4a2333-355931-00aaaa-85bec6-f7bdd7-618650 */
@theme {
  --color-castro: #4a2333;
  --color-castro-50: #fff1f5;
  --color-castro-100: #ffe2ec;
  --color-castro-200: #f2cbd9;
  --color-castro-300: #deb3c2;
  --color-castro-400: #c192a3;
  --color-castro-500: #a57687;
  --color-castro-600: #885c6d;
  --color-castro-700: #6e4756;
  --color-castro-800: #583542;
  --color-castro-900: #4a2333;
  --color-castro-950: #2c171f;
  --color-pine: #355931;
  --color-pine-50: #e6fde3;
  --color-pine-100: #daf4d7;
  --color-pine-200: #c2e0be;
  --color-pine-300: #a7caa2;
  --color-pine-400: #84aa7f;
  --color-pine-500: #678d62;
  --color-pine-600: #4d7149;
  --color-pine-700: #355931;
  --color-pine-800: #294526;
  --color-pine-900: #1e361b;
  --color-pine-950: #10210f;
  --color-teal-me-no-lies: #00aaaa;
  --color-teal-me-no-lies-50: #bdfffe;
  --color-teal-me-no-lies-100: #a8f5f4;
  --color-teal-me-no-lies-200: #83e1e0;
  --color-teal-me-no-lies-300: #59caca;
  --color-teal-me-no-lies-400: #00aaaa;
  --color-teal-me-no-lies-500: #008e8e;
  --color-teal-me-no-lies-600: #007373;
  --color-teal-me-no-lies-700: #005c5c;
  --color-teal-me-no-lies-800: #004949;
  --color-teal-me-no-lies-900: #003939;
  --color-teal-me-no-lies-950: #002525;
  --color-misty-cold-sea: #85bec6;
  --color-misty-cold-sea-50: #d3f5fa;
  --color-misty-cold-sea-100: #c3eaef;
  --color-misty-cold-sea-200: #a7d5db;
  --color-misty-cold-sea-300: #85bec6;
  --color-misty-cold-sea-400: #6aa1a8;
  --color-misty-cold-sea-500: #50888f;
  --color-misty-cold-sea-600: #396f76;
  --color-misty-cold-sea-700: #285a60;
  --color-misty-cold-sea-800: #1b484e;
  --color-misty-cold-sea-900: #12393e;
  --color-misty-cold-sea-950: #072427;
  --color-manga-pink: #f7bdd7;
  --color-manga-pink-50: #ffeaf3;
  --color-manga-pink-100: #ffd9e9;
  --color-manga-pink-200: #f7bdd7;
  --color-manga-pink-300: #dcaac1;
  --color-manga-pink-400: #c08ba3;
  --color-manga-pink-500: #a57189;
  --color-manga-pink-600: #8a586f;
  --color-manga-pink-700: #714459;
  --color-manga-pink-800: #5b3447;
  --color-manga-pink-900: #482737;
  --color-manga-pink-950: #2e1622;
  --color-homegrown: #618650;
  --color-homegrown-50: #e4fbda;
  --color-homegrown-100: #d5f0ca;
  --color-homegrown-200: #bcdcaf;
  --color-homegrown-300: #a1c492;
  --color-homegrown-400: #7ea46d;
  --color-homegrown-500: #618650;
  --color-homegrown-600: #4b6d3a;
  --color-homegrown-700: #39572a;
  --color-homegrown-800: #2a451d;
  --color-homegrown-900: #203614;
  --color-homegrown-950: #12230a;
}