Ice Dagger to Heavy Metal Color Palette

About this palette

Ice Dagger to Heavy Metal is a 5-color muted, gradient palette: #D0E6DA (Ice Dagger), #BBB397 (Khaki), #8D8675 (Kosher Khaki), #606B4B (Hinterland), #444735 (Heavy Metal). It mixes gray, yellow, green tones and feels balanced overall. The strongest text pairing is #D0E6DA on #444735 with a contrast ratio of 7.28:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ice Dagger	rgb(208, 230, 218)	hsl(147, 31%, 86%)
Khaki	rgb(187, 179, 151)	hsl(47, 21%, 66%)
Kosher Khaki	rgb(141, 134, 117)	hsl(42, 10%, 51%)
Hinterland	rgb(96, 107, 75)	hsl(81, 18%, 36%)
Heavy Metal	rgb(68, 71, 53)	hsl(70, 15%, 24%)

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.

Aa7.28:1 Very good#D0E6DA on #444735
Aa7.28:1 Very good#444735 on #D0E6DA
Aa4.55:1 Good#BBB397 on #444735
Aa4.55:1 Good#444735 on #BBB397
Aa4.33:1 Poor#D0E6DA on #606B4B
Aa4.33:1 Poor#606B4B on #D0E6DA

Color blindness preview

CSS variables

/* Ice Dagger to Heavy Metal — https://swatchly.xyz/palette/d0e6da-bbb397-8d8675-606b4b-444735 */
:root {
  --ice-dagger: #d0e6da;
  --khaki: #bbb397;
  --kosher-khaki: #8d8675;
  --hinterland: #606b4b;
  --heavy-metal: #444735;
}

Tailwind CSS v4

/* Ice Dagger to Heavy Metal — https://swatchly.xyz/palette/d0e6da-bbb397-8d8675-606b4b-444735 */
@theme {
  --color-ice-dagger: #d0e6da;
  --color-ice-dagger-50: #f3fef8;
  --color-ice-dagger-100: #e9f6ef;
  --color-ice-dagger-200: #d0e6da;
  --color-ice-dagger-300: #bbcdc3;
  --color-ice-dagger-400: #98aca2;
  --color-ice-dagger-500: #7b9085;
  --color-ice-dagger-600: #607469;
  --color-ice-dagger-700: #4a5b52;
  --color-ice-dagger-800: #37473e;
  --color-ice-dagger-900: #293630;
  --color-ice-dagger-950: #18221d;
  --color-khaki: #bbb397;
  --color-khaki-50: #f3eedc;
  --color-khaki-100: #e7e2ce;
  --color-khaki-200: #d2ccb5;
  --color-khaki-300: #bbb397;
  --color-khaki-400: #9e967c;
  --color-khaki-500: #857d63;
  --color-khaki-600: #6d654c;
  --color-khaki-700: #58513b;
  --color-khaki-800: #46402c;
  --color-khaki-900: #383322;
  --color-khaki-950: #231f13;
  --color-kosher-khaki: #8d8675;
  --color-kosher-khaki-50: #f9f5eb;
  --color-kosher-khaki-100: #f0ebdf;
  --color-kosher-khaki-200: #ddd7ca;
  --color-kosher-khaki-300: #c7c1b1;
  --color-kosher-khaki-400: #a8a190;
  --color-kosher-khaki-500: #8d8675;
  --color-kosher-khaki-600: #726c5b;
  --color-kosher-khaki-700: #5b5546;
  --color-kosher-khaki-800: #474235;
  --color-kosher-khaki-900: #373328;
  --color-kosher-khaki-950: #221f17;
  --color-hinterland: #606b4b;
  --color-hinterland-50: #f1f9e5;
  --color-hinterland-100: #e6eed7;
  --color-hinterland-200: #d0dabf;
  --color-hinterland-300: #b8c3a4;
  --color-hinterland-400: #97a382;
  --color-hinterland-500: #7b8665;
  --color-hinterland-600: #606b4b;
  --color-hinterland-700: #4b5539;
  --color-hinterland-800: #3a432a;
  --color-hinterland-900: #2c331f;
  --color-hinterland-950: #1b2011;
  --color-heavy-metal: #444735;
  --color-heavy-metal-50: #f4f7eb;
  --color-heavy-metal-100: #eaeddf;
  --color-heavy-metal-200: #d6d9c9;
  --color-heavy-metal-300: #c0c4b2;
  --color-heavy-metal-400: #a1a591;
  --color-heavy-metal-500: #868a76;
  --color-heavy-metal-600: #6d705d;
  --color-heavy-metal-700: #575a48;
  --color-heavy-metal-800: #444735;
  --color-heavy-metal-900: #343629;
  --color-heavy-metal-950: #202218;
}