Irish Spring to Muddy Brown Color Palette

About this palette

Irish Spring to Muddy Brown is a 5-color cool palette: #8ECE9B (Irish Spring), #B378C8 (Lavendless), #26448A (Pacific Navy), #BBCBFF (Night Snow), #826800 (Muddy Brown). It mixes green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #26448A on #BBCBFF with a contrast ratio of 5.75:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Irish Spring	rgb(142, 206, 155)	hsl(132, 40%, 68%)
Lavendless	rgb(179, 120, 200)	hsl(284, 42%, 63%)
Pacific Navy	rgb(38, 68, 138)	hsl(222, 57%, 35%)
Night Snow	rgb(187, 203, 255)	hsl(226, 100%, 87%)
Muddy Brown	rgb(130, 104, 0)	hsl(48, 100%, 25%)

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.

Aa5.75:1 Good#26448A on #BBCBFF
Aa5.75:1 Good#BBCBFF on #26448A
Aa5.03:1 Good#8ECE9B on #26448A
Aa5.03:1 Good#26448A on #8ECE9B
Aa3.33:1 Poor#BBCBFF on #826800
Aa3.33:1 Poor#826800 on #BBCBFF

Color blindness preview

CSS variables

/* Irish Spring to Muddy Brown — https://swatchly.xyz/palette/8ece9b-b378c8-26448a-bbcbff-826800 */
:root {
  --irish-spring: #8ece9b;
  --lavendless: #b378c8;
  --pacific-navy: #26448a;
  --night-snow: #bbcbff;
  --muddy-brown: #826800;
}

Tailwind CSS v4

/* Irish Spring to Muddy Brown — https://swatchly.xyz/palette/8ece9b-b378c8-26448a-bbcbff-826800 */
@theme {
  --color-irish-spring: #8ece9b;
  --color-irish-spring-50: #d9fedf;
  --color-irish-spring-100: #cbf4d2;
  --color-irish-spring-200: #b1e2ba;
  --color-irish-spring-300: #8ece9b;
  --color-irish-spring-400: #72ae7e;
  --color-irish-spring-500: #559464;
  --color-irish-spring-600: #3c794b;
  --color-irish-spring-700: #296138;
  --color-irish-spring-800: #1b4d29;
  --color-irish-spring-900: #113d1e;
  --color-irish-spring-950: #072610;
  --color-lavendless: #b378c8;
  --color-lavendless-50: #fcf4ff;
  --color-lavendless-100: #f9eaff;
  --color-lavendless-200: #f2d0ff;
  --color-lavendless-300: #e6b5f8;
  --color-lavendless-400: #cc94e0;
  --color-lavendless-500: #b378c8;
  --color-lavendless-600: #945ba8;
  --color-lavendless-700: #79438b;
  --color-lavendless-800: #603170;
  --color-lavendless-900: #4a2258;
  --color-lavendless-950: #2f1239;
  --color-pacific-navy: #26448a;
  --color-pacific-navy-50: #f0f5ff;
  --color-pacific-navy-100: #e2ebff;
  --color-pacific-navy-200: #c4d8ff;
  --color-pacific-navy-300: #a4c2ff;
  --color-pacific-navy-400: #7fa3ed;
  --color-pacific-navy-500: #6488d4;
  --color-pacific-navy-600: #4c6eb7;
  --color-pacific-navy-700: #39589b;
  --color-pacific-navy-800: #26448a;
  --color-pacific-navy-900: #1e3569;
  --color-pacific-navy-950: #102147;
  --color-night-snow: #bbcbff;
  --color-night-snow-50: #e8eeff;
  --color-night-snow-100: #d8e1ff;
  --color-night-snow-200: #bbcbff;
  --color-night-snow-300: #a9b7e4;
  --color-night-snow-400: #8a99c9;
  --color-night-snow-500: #717faf;
  --color-night-snow-600: #596693;
  --color-night-snow-700: #46517a;
  --color-night-snow-800: #364064;
  --color-night-snow-900: #29314f;
  --color-night-snow-950: #181e34;
  --color-muddy-brown: #826800;
  --color-muddy-brown-50: #fff5d7;
  --color-muddy-brown-100: #fbeab9;
  --color-muddy-brown-200: #ead69a;
  --color-muddy-brown-300: #d6bf7a;
  --color-muddy-brown-400: #b99f50;
  --color-muddy-brown-500: #9d832d;
  --color-muddy-brown-600: #826800;
  --color-muddy-brown-700: #675200;
  --color-muddy-brown-800: #514000;
  --color-muddy-brown-900: #3f3100;
  --color-muddy-brown-950: #281e00;
}