Ink Black to Icy Plains Color Palette

About this palette

Ink Black to Icy Plains is a 5-color muted, cool palette: #2C2024 (Ink Black), #5A614A (Tree of Life), #578875 (Clouded Pine), #C0BFAA (Pelican), #DCDAFD (Icy Plains). It mixes gray, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #2C2024 on #DCDAFD with a contrast ratio of 11.57:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ink Black	rgb(44, 32, 36)	hsl(340, 16%, 15%)
Tree of Life	rgb(90, 97, 74)	hsl(78, 13%, 34%)
Clouded Pine	rgb(87, 136, 117)	hsl(157, 22%, 44%)
Pelican	rgb(192, 191, 170)	hsl(57, 15%, 71%)
Icy Plains	rgb(220, 218, 253)	hsl(243, 90%, 92%)

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.

Aa11.57:1 Very good#2C2024 on #DCDAFD
Aa11.57:1 Very good#DCDAFD on #2C2024
Aa8.42:1 Very good#2C2024 on #C0BFAA
Aa8.42:1 Very good#C0BFAA on #2C2024
Aa4.78:1 Good#5A614A on #DCDAFD
Aa4.78:1 Good#DCDAFD on #5A614A
Aa3.87:1 Poor#2C2024 on #578875
Aa3.87:1 Poor#578875 on #2C2024

Color blindness preview

CSS variables

/* Ink Black to Icy Plains — https://swatchly.xyz/palette/2c2024-5a614a-578875-c0bfaa-dcdafd */
:root {
  --ink-black: #2c2024;
  --tree-of-life: #5a614a;
  --clouded-pine: #578875;
  --pelican: #c0bfaa;
  --icy-plains: #dcdafd;
}

Tailwind CSS v4

/* Ink Black to Icy Plains — https://swatchly.xyz/palette/2c2024-5a614a-578875-c0bfaa-dcdafd */
@theme {
  --color-ink-black: #2c2024;
  --color-ink-black-50: #fcf2f5;
  --color-ink-black-100: #f2e8eb;
  --color-ink-black-200: #e0d4d7;
  --color-ink-black-300: #cbbdc1;
  --color-ink-black-400: #ac9da2;
  --color-ink-black-500: #928287;
  --color-ink-black-600: #78696e;
  --color-ink-black-700: #615458;
  --color-ink-black-800: #4e4246;
  --color-ink-black-900: #3e3437;
  --color-ink-black-950: #2c2024;
  --color-tree-of-life: #5a614a;
  --color-tree-of-life-50: #f3f7e9;
  --color-tree-of-life-100: #e8eedd;
  --color-tree-of-life-200: #d6dcc9;
  --color-tree-of-life-300: #c1c8b2;
  --color-tree-of-life-400: #a2aa92;
  --color-tree-of-life-500: #889078;
  --color-tree-of-life-600: #6f775f;
  --color-tree-of-life-700: #5a614a;
  --color-tree-of-life-800: #464c39;
  --color-tree-of-life-900: #353a2a;
  --color-tree-of-life-950: #212519;
  --color-clouded-pine: #578875;
  --color-clouded-pine-50: #defbef;
  --color-clouded-pine-100: #cff0e2;
  --color-clouded-pine-200: #b5dccc;
  --color-clouded-pine-300: #99c5b3;
  --color-clouded-pine-400: #74a592;
  --color-clouded-pine-500: #578875;
  --color-clouded-pine-600: #406f5d;
  --color-clouded-pine-700: #2e5949;
  --color-clouded-pine-800: #214639;
  --color-clouded-pine-900: #17372c;
  --color-clouded-pine-950: #0c231b;
  --color-pelican: #c0bfaa;
  --color-pelican-50: #f5f4e8;
  --color-pelican-100: #eaeadc;
  --color-pelican-200: #d6d6c6;
  --color-pelican-300: #c0bfaa;
  --color-pelican-400: #a1a08c;
  --color-pelican-500: #868572;
  --color-pelican-600: #6c6b59;
  --color-pelican-700: #565544;
  --color-pelican-800: #444334;
  --color-pelican-900: #343427;
  --color-pelican-950: #202017;
  --color-icy-plains: #dcdafd;
  --color-icy-plains-50: #f9f9ff;
  --color-icy-plains-100: #f0efff;
  --color-icy-plains-200: #dcdafd;
  --color-icy-plains-300: #c5c3df;
  --color-icy-plains-400: #a4a2c1;
  --color-icy-plains-500: #8785a5;
  --color-icy-plains-600: #6c6a88;
  --color-icy-plains-700: #55536e;
  --color-icy-plains-800: #413f57;
  --color-icy-plains-900: #323044;
  --color-icy-plains-950: #1e1d2c;
}