Irish Spring to Sea Paint Color Palette

About this palette

Irish Spring to Sea Paint is a 5-color warm palette: #86CFB0 (Irish Spring), #CA89AC (Moonlight Mauve), #AA649E (Je t’aime), #8C5900 (Grizzly), #144B7A (Sea Paint). It mixes turquoise, pink, brown, blue tones and feels warm overall. The strongest text pairing is #86CFB0 on #144B7A with a contrast ratio of 4.99:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Irish Spring	rgb(134, 207, 176)	hsl(155, 43%, 67%)
Moonlight Mauve	rgb(202, 137, 172)	hsl(328, 38%, 66%)
Je t’aime	rgb(170, 100, 158)	hsl(310, 29%, 53%)
Grizzly	rgb(140, 89, 0)	hsl(38, 100%, 27%)
Sea Paint	rgb(20, 75, 122)	hsl(208, 72%, 28%)

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.

Aa4.99:1 Good#86CFB0 on #144B7A
Aa4.99:1 Good#144B7A on #86CFB0
Aa3.32:1 Poor#CA89AC on #144B7A
Aa3.32:1 Poor#144B7A on #CA89AC
Aa3.26:1 Poor#86CFB0 on #8C5900
Aa3.26:1 Poor#8C5900 on #86CFB0

Color blindness preview

CSS variables

/* Irish Spring to Sea Paint — https://swatchly.xyz/palette/86cfb0-ca89ac-aa649e-8c5900-144b7a */
:root {
  --irish-spring: #86cfb0;
  --moonlight-mauve: #ca89ac;
  --je-t-aime: #aa649e;
  --grizzly: #8c5900;
  --sea-paint: #144b7a;
}

Tailwind CSS v4

/* Irish Spring to Sea Paint — https://swatchly.xyz/palette/86cfb0-ca89ac-aa649e-8c5900-144b7a */
@theme {
  --color-irish-spring: #86cfb0;
  --color-irish-spring-50: #d6feeb;
  --color-irish-spring-100: #c7f5e0;
  --color-irish-spring-200: #ace2ca;
  --color-irish-spring-300: #86cfb0;
  --color-irish-spring-400: #6aaf92;
  --color-irish-spring-500: #4c9477;
  --color-irish-spring-600: #32795e;
  --color-irish-spring-700: #1d624a;
  --color-irish-spring-800: #0e4e39;
  --color-irish-spring-900: #053d2b;
  --color-irish-spring-950: #01261a;
  --color-moonlight-mauve: #ca89ac;
  --color-moonlight-mauve-50: #fff0f7;
  --color-moonlight-mauve-100: #ffe1f0;
  --color-moonlight-mauve-200: #f9c5e0;
  --color-moonlight-mauve-300: #e6acca;
  --color-moonlight-mauve-400: #ca89ac;
  --color-moonlight-mauve-500: #ad6e90;
  --color-moonlight-mauve-600: #905576;
  --color-moonlight-mauve-700: #76405e;
  --color-moonlight-mauve-800: #5e304a;
  --color-moonlight-mauve-900: #4b233a;
  --color-moonlight-mauve-950: #301424;
  --color-je-t-aime: #aa649e;
  --color-je-t-aime-50: #ffeefb;
  --color-je-t-aime-100: #ffddf8;
  --color-je-t-aime-200: #f9bfed;
  --color-je-t-aime-300: #e5a4d9;
  --color-je-t-aime-400: #c781ba;
  --color-je-t-aime-500: #aa649e;
  --color-je-t-aime-600: #8e4c83;
  --color-je-t-aime-700: #74386a;
  --color-je-t-aime-800: #5d2955;
  --color-je-t-aime-900: #4a1e43;
  --color-je-t-aime-950: #30102b;
  --color-grizzly: #8c5900;
  --color-grizzly-50: #fff3e5;
  --color-grizzly-100: #ffe5c8;
  --color-grizzly-200: #f8cd99;
  --color-grizzly-300: #e4b378;
  --color-grizzly-400: #c6914e;
  --color-grizzly-500: #a9742c;
  --color-grizzly-600: #8c5900;
  --color-grizzly-700: #704600;
  --color-grizzly-800: #583600;
  --color-grizzly-900: #452900;
  --color-grizzly-950: #2c1900;
  --color-sea-paint: #144b7a;
  --color-sea-paint-50: #eef6ff;
  --color-sea-paint-100: #dcedff;
  --color-sea-paint-200: #b9dcff;
  --color-sea-paint-300: #99c7f6;
  --color-sea-paint-400: #75a9dc;
  --color-sea-paint-500: #598ec2;
  --color-sea-paint-600: #4074a6;
  --color-sea-paint-700: #2d5e8b;
  --color-sea-paint-800: #144b7a;
  --color-sea-paint-900: #133a5d;
  --color-sea-paint-950: #08243e;
}