Marshland to Ice Cube Color Palette

About this palette

Marshland to Ice Cube is a 5-color muted, cool, monochromatic, gradient palette: #20302C (Marshland), #2C534B (Hunter), #597B74 (Stream Burble), #7CA89E (Catnip), #B4E6DD (Ice Cube). It mixes gray, turquoise tones and feels cool overall. The strongest text pairing is #20302C on #B4E6DD with a contrast ratio of 10.06:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Marshland	rgb(32, 48, 44)	hsl(165, 20%, 16%)
Hunter	rgb(44, 83, 75)	hsl(168, 31%, 25%)
Stream Burble	rgb(89, 123, 116)	hsl(168, 16%, 42%)
Catnip	rgb(124, 168, 158)	hsl(166, 20%, 57%)
Ice Cube	rgb(180, 230, 221)	hsl(169, 50%, 80%)

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.

Aa10.06:1 Very good#20302C on #B4E6DD
Aa10.06:1 Very good#B4E6DD on #20302C
Aa6.26:1 Good#2C534B on #B4E6DD
Aa6.26:1 Good#B4E6DD on #2C534B
Aa5.23:1 Good#20302C on #7CA89E
Aa5.23:1 Good#7CA89E on #20302C
Aa3.39:1 Poor#597B74 on #B4E6DD
Aa3.39:1 Poor#B4E6DD on #597B74

Color blindness preview

CSS variables

/* Marshland to Ice Cube — https://swatchly.xyz/palette/20302c-2c534b-597b74-7ca89e-b4e6dd */
:root {
  --marshland: #20302c;
  --hunter: #2c534b;
  --stream-burble: #597b74;
  --catnip: #7ca89e;
  --ice-cube: #b4e6dd;
}

Tailwind CSS v4

/* Marshland to Ice Cube — https://swatchly.xyz/palette/20302c-2c534b-597b74-7ca89e-b4e6dd */
@theme {
  --color-marshland: #20302c;
  --color-marshland-50: #edf8f5;
  --color-marshland-100: #e2eeeb;
  --color-marshland-200: #cddbd7;
  --color-marshland-300: #b5c5c1;
  --color-marshland-400: #93a5a0;
  --color-marshland-500: #768883;
  --color-marshland-600: #5b6c68;
  --color-marshland-700: #455450;
  --color-marshland-800: #33403c;
  --color-marshland-900: #20302c;
  --color-marshland-950: #141c1a;
  --color-hunter: #2c534b;
  --color-hunter-50: #e4fbf5;
  --color-hunter-100: #d8f2eb;
  --color-hunter-200: #c0dfd8;
  --color-hunter-300: #a8cbc3;
  --color-hunter-400: #87aea5;
  --color-hunter-500: #6c948b;
  --color-hunter-600: #537b72;
  --color-hunter-700: #40655d;
  --color-hunter-800: #2c534b;
  --color-hunter-900: #23403a;
  --color-hunter-950: #132924;
  --color-stream-burble: #597b74;
  --color-stream-burble-50: #e6faf6;
  --color-stream-burble-100: #dcf2ed;
  --color-stream-burble-200: #c6e1db;
  --color-stream-burble-300: #aeccc6;
  --color-stream-burble-400: #8dafa8;
  --color-stream-burble-500: #72958d;
  --color-stream-burble-600: #597b74;
  --color-stream-burble-700: #43625c;
  --color-stream-burble-800: #314d48;
  --color-stream-burble-900: #243b37;
  --color-stream-burble-950: #142522;
  --color-catnip: #7ca89e;
  --color-catnip-50: #e1faf4;
  --color-catnip-100: #d4f0e9;
  --color-catnip-200: #bbddd5;
  --color-catnip-300: #a0c7be;
  --color-catnip-400: #7ca89e;
  --color-catnip-500: #628d83;
  --color-catnip-600: #49736a;
  --color-catnip-700: #365c54;
  --color-catnip-800: #274942;
  --color-catnip-900: #1c3833;
  --color-catnip-950: #0f241f;
  --color-ice-cube: #b4e6dd;
  --color-ice-cube-50: #e3fef8;
  --color-ice-cube-100: #d7f5ef;
  --color-ice-cube-200: #b4e6dd;
  --color-ice-cube-300: #a4cdc5;
  --color-ice-cube-400: #80aea6;
  --color-ice-cube-500: #63928a;
  --color-ice-cube-600: #49776f;
  --color-ice-cube-700: #345f58;
  --color-ice-cube-800: #254a44;
  --color-ice-cube-900: #193935;
  --color-ice-cube-950: #0d2421;
}