Icy Plains to Metal Gear Color Palette

About this palette

Icy Plains to Metal Gear is a 4-color pastel, light, cool palette: #D1DDFF (Icy Plains), #E6F9D8 (Futon), #F5BEA6 (Cream Puff), #A7C6E0 (Metal Gear). It mixes blue, white, orange tones and feels cool overall. The strongest text pairing is #E6F9D8 on #A7C6E0 with a contrast ratio of 1.60:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(209, 221, 255)	hsl(224, 100%, 91%)
Futon	rgb(230, 249, 216)	hsl(95, 73%, 91%)
Cream Puff	rgb(245, 190, 166)	hsl(18, 80%, 81%)
Metal Gear	rgb(167, 198, 224)	hsl(207, 48%, 77%)

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.

Color blindness preview

CSS variables

/* Icy Plains to Metal Gear — https://swatchly.xyz/palette/d1ddff-e6f9d8-f5bea6-a7c6e0 */
:root {
  --icy-plains: #d1ddff;
  --futon: #e6f9d8;
  --cream-puff: #f5bea6;
  --metal-gear: #a7c6e0;
}

Tailwind CSS v4

/* Icy Plains to Metal Gear — https://swatchly.xyz/palette/d1ddff-e6f9d8-f5bea6-a7c6e0 */
@theme {
  --color-icy-plains: #d1ddff;
  --color-icy-plains-50: #f7f9ff;
  --color-icy-plains-100: #ebf0ff;
  --color-icy-plains-200: #d1ddff;
  --color-icy-plains-300: #bcc5e1;
  --color-icy-plains-400: #9aa5c3;
  --color-icy-plains-500: #7d88a7;
  --color-icy-plains-600: #636d8a;
  --color-icy-plains-700: #4c5570;
  --color-icy-plains-800: #3a4158;
  --color-icy-plains-900: #2c3245;
  --color-icy-plains-950: #1a1f2d;
  --color-futon: #e6f9d8;
  --color-futon-50: #e6f9d8;
  --color-futon-100: #e1edd8;
  --color-futon-200: #cddbc2;
  --color-futon-300: #b6c5aa;
  --color-futon-400: #96a789;
  --color-futon-500: #7b8c6e;
  --color-futon-600: #627255;
  --color-futon-700: #4c5b41;
  --color-futon-800: #3a4731;
  --color-futon-900: #2c3724;
  --color-futon-950: #1a2214;
  --color-cream-puff: #f5bea6;
  --color-cream-puff-50: #fffaf7;
  --color-cream-puff-100: #ffefe8;
  --color-cream-puff-200: #fed8c7;
  --color-cream-puff-300: #f5bea6;
  --color-cream-puff-400: #cf9e88;
  --color-cream-puff-500: #b28069;
  --color-cream-puff-600: #94634e;
  --color-cream-puff-700: #784c38;
  --color-cream-puff-800: #5f3928;
  --color-cream-puff-900: #492a1b;
  --color-cream-puff-950: #2f190e;
  --color-metal-gear: #a7c6e0;
  --color-metal-gear-50: #edf7ff;
  --color-metal-gear-100: #dbefff;
  --color-metal-gear-200: #c4dbef;
  --color-metal-gear-300: #a7c6e0;
  --color-metal-gear-400: #89a6be;
  --color-metal-gear-500: #6d8ba3;
  --color-metal-gear-600: #547087;
  --color-metal-gear-700: #3f596d;
  --color-metal-gear-800: #2f4557;
  --color-metal-gear-900: #223544;
  --color-metal-gear-950: #13212c;
}