Icy Plains to Eigengrau Color Palette

About this palette

Icy Plains to Eigengrau is a 5-color muted, warm, earthy, vintage palette: #CEDBFF (Icy Plains), #A3A87B (Olive Tree), #8D5B3C (Cocoa), #5A3A22 (Peat Brown), #14171E (Eigengrau). It mixes blue, green, brown, black tones and feels warm overall. The strongest text pairing is #CEDBFF on #14171E with a contrast ratio of 12.98:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Icy Plains	rgb(206, 219, 255)	hsl(224, 100%, 90%)
Olive Tree	rgb(163, 168, 123)	hsl(67, 21%, 57%)
Cocoa	rgb(141, 91, 60)	hsl(23, 40%, 39%)
Peat Brown	rgb(90, 58, 34)	hsl(26, 45%, 24%)
Eigengrau	rgb(20, 23, 30)	hsl(222, 20%, 10%)

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.

Aa12.98:1 Super#CEDBFF on #14171E
Aa12.98:1 Super#14171E on #CEDBFF
Aa7.37:1 Very good#CEDBFF on #5A3A22
Aa7.37:1 Very good#5A3A22 on #CEDBFF
Aa7.21:1 Very good#A3A87B on #14171E
Aa7.21:1 Very good#14171E on #A3A87B
Aa4.11:1 Poor#CEDBFF on #8D5B3C
Aa4.11:1 Poor#8D5B3C on #CEDBFF

Color blindness preview

CSS variables

/* Icy Plains to Eigengrau — https://swatchly.xyz/palette/cedbff-a3a87b-8d5b3c-5a3a22-14171e */
:root {
  --icy-plains: #cedbff;
  --olive-tree: #a3a87b;
  --cocoa: #8d5b3c;
  --peat-brown: #5a3a22;
  --eigengrau: #14171e;
}

Tailwind CSS v4

/* Icy Plains to Eigengrau — https://swatchly.xyz/palette/cedbff-a3a87b-8d5b3c-5a3a22-14171e */
@theme {
  --color-icy-plains: #cedbff;
  --color-icy-plains-50: #f5f8ff;
  --color-icy-plains-100: #e8efff;
  --color-icy-plains-200: #cedbff;
  --color-icy-plains-300: #b9c4e1;
  --color-icy-plains-400: #98a3c4;
  --color-icy-plains-500: #7c87a8;
  --color-icy-plains-600: #616c8b;
  --color-icy-plains-700: #4b5571;
  --color-icy-plains-800: #39415a;
  --color-icy-plains-900: #2b3247;
  --color-icy-plains-950: #1a1f2d;
  --color-olive-tree: #a3a87b;
  --color-olive-tree-50: #f5f9df;
  --color-olive-tree-100: #ecefd3;
  --color-olive-tree-200: #d8ddba;
  --color-olive-tree-300: #c2c7a0;
  --color-olive-tree-400: #a3a87b;
  --color-olive-tree-500: #878c60;
  --color-olive-tree-600: #6d7147;
  --color-olive-tree-700: #565a33;
  --color-olive-tree-800: #434624;
  --color-olive-tree-900: #333619;
  --color-olive-tree-950: #1f210c;
  --color-cocoa: #8d5b3c;
  --color-cocoa-50: #fff2eb;
  --color-cocoa-100: #ffe5d5;
  --color-cocoa-200: #f7ccb3;
  --color-cocoa-300: #e4b397;
  --color-cocoa-400: #c69273;
  --color-cocoa-500: #aa7656;
  --color-cocoa-600: #8d5b3c;
  --color-cocoa-700: #72472b;
  --color-cocoa-800: #5c361d;
  --color-cocoa-900: #482813;
  --color-cocoa-950: #2f1809;
  --color-peat-brown: #5a3a22;
  --color-peat-brown-50: #fff2ea;
  --color-peat-brown-100: #ffe6d4;
  --color-peat-brown-200: #efd1bc;
  --color-peat-brown-300: #dbb9a2;
  --color-peat-brown-400: #bd9980;
  --color-peat-brown-500: #a27e64;
  --color-peat-brown-600: #86634b;
  --color-peat-brown-700: #6d4e37;
  --color-peat-brown-800: #5a3a22;
  --color-peat-brown-900: #442d1c;
  --color-peat-brown-950: #2b1b0f;
  --color-eigengrau: #14171e;
  --color-eigengrau-50: #f3f5fb;
  --color-eigengrau-100: #e8ebf1;
  --color-eigengrau-200: #d4d7df;
  --color-eigengrau-300: #bdc1c9;
  --color-eigengrau-400: #9da1ab;
  --color-eigengrau-500: #80848e;
  --color-eigengrau-600: #656871;
  --color-eigengrau-700: #4d5058;
  --color-eigengrau-800: #393c43;
  --color-eigengrau-900: #292b31;
  --color-eigengrau-950: #14171e;
}