Ultra Mint to Castro Color Palette

About this palette

Ultra Mint to Castro is a 5-color cool, earthy, vintage palette: #97E9C4 (Ultra Mint), #92C1A8 (Seaborn), #36956E (Illuminati Green), #693D5B (Royal Plum), #412238 (Castro). It mixes green, purple tones and feels cool overall. The strongest text pairing is #97E9C4 on #412238 with a contrast ratio of 9.78:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ultra Mint	rgb(151, 233, 196)	hsl(153, 65%, 75%)
Seaborn	rgb(146, 193, 168)	hsl(148, 27%, 66%)
Illuminati Green	rgb(54, 149, 110)	hsl(155, 47%, 40%)
Royal Plum	rgb(105, 61, 91)	hsl(319, 27%, 33%)
Castro	rgb(65, 34, 56)	hsl(317, 31%, 19%)

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.

Aa9.78:1 Very good#97E9C4 on #412238
Aa9.78:1 Very good#412238 on #97E9C4
Aa6.89:1 Good#92C1A8 on #412238
Aa6.89:1 Good#412238 on #92C1A8
Aa6.10:1 Good#97E9C4 on #693D5B
Aa6.10:1 Good#693D5B on #97E9C4
Aa4.31:1 Poor#92C1A8 on #693D5B
Aa4.31:1 Poor#693D5B on #92C1A8

Color blindness preview

CSS variables

/* Ultra Mint to Castro — https://swatchly.xyz/palette/97e9c4-92c1a8-36956e-693d5b-412238 */
:root {
  --ultra-mint: #97e9c4;
  --seaborn: #92c1a8;
  --illuminati-green: #36956e;
  --royal-plum: #693d5b;
  --castro: #412238;
}

Tailwind CSS v4

/* Ultra Mint to Castro — https://swatchly.xyz/palette/97e9c4-92c1a8-36956e-693d5b-412238 */
@theme {
  --color-ultra-mint: #97e9c4;
  --color-ultra-mint-50: #d4ffea;
  --color-ultra-mint-100: #c4f6de;
  --color-ultra-mint-200: #97e9c4;
  --color-ultra-mint-300: #8bd0b0;
  --color-ultra-mint-400: #64b290;
  --color-ultra-mint-500: #459775;
  --color-ultra-mint-600: #297c5c;
  --color-ultra-mint-700: #126448;
  --color-ultra-mint-800: #004f37;
  --color-ultra-mint-900: #003d29;
  --color-ultra-mint-950: #002719;
  --color-seaborn: #92c1a8;
  --color-seaborn-50: #daf7e7;
  --color-seaborn-100: #cbecda;
  --color-seaborn-200: #b2d7c3;
  --color-seaborn-300: #92c1a8;
  --color-seaborn-400: #76a38c;
  --color-seaborn-500: #5d8a73;
  --color-seaborn-600: #46715b;
  --color-seaborn-700: #345b48;
  --color-seaborn-800: #264938;
  --color-seaborn-900: #1c3a2b;
  --color-seaborn-950: #0e241a;
  --color-illuminati-green: #36956e;
  --color-illuminati-green-50: #d8ffeb;
  --color-illuminati-green-100: #c1f8dc;
  --color-illuminati-green-200: #a3e6c5;
  --color-illuminati-green-300: #83d1ac;
  --color-illuminati-green-400: #59b18a;
  --color-illuminati-green-500: #36956e;
  --color-illuminati-green-600: #157a56;
  --color-illuminati-green-700: #006242;
  --color-illuminati-green-800: #004d33;
  --color-illuminati-green-900: #003c27;
  --color-illuminati-green-950: #002617;
  --color-royal-plum: #693d5b;
  --color-royal-plum-50: #fff0f9;
  --color-royal-plum-100: #ffe1f4;
  --color-royal-plum-200: #f0c8e2;
  --color-royal-plum-300: #dbaecb;
  --color-royal-plum-400: #bd8cac;
  --color-royal-plum-500: #9f6f8f;
  --color-royal-plum-600: #825573;
  --color-royal-plum-700: #693d5b;
  --color-royal-plum-800: #523047;
  --color-royal-plum-900: #402337;
  --color-royal-plum-950: #291422;
  --color-castro: #412238;
  --color-castro-50: #fff0fa;
  --color-castro-100: #fce2f3;
  --color-castro-200: #eccde1;
  --color-castro-300: #d7b5cc;
  --color-castro-400: #b994ac;
  --color-castro-500: #9c7790;
  --color-castro-600: #7f5d74;
  --color-castro-700: #66475c;
  --color-castro-800: #4f3547;
  --color-castro-900: #412238;
  --color-castro-950: #251621;
}