Inkwell Inception to Concrete Landscape color palette

1D1F28Inkwell Inception 364234Deep Forest 859887Mother Earth BBA19ACoca Mocha F4E2DEPearly 595D72Concrete Landscape

Open in generator Export PNG, PDF, ASE…

About this palette

Inkwell Inception to Concrete Landscape is a 6-color muted palette: #1D1F28 (Inkwell Inception), #364234 (Deep Forest), #859887 (Mother Earth), #BBA19A (Coca Mocha), #F4E2DE (Pearly), #595D72 (Concrete Landscape). It mixes gray tones and feels balanced overall. The strongest text pairing is #1D1F28 on #F4E2DE with a contrast ratio of 13.12:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Inkwell Inception	rgb(29, 31, 40)	hsl(229, 16%, 14%)
Deep Forest	rgb(54, 66, 52)	hsl(111, 12%, 23%)
Mother Earth	rgb(133, 152, 135)	hsl(126, 8%, 56%)
Coca Mocha	rgb(187, 161, 154)	hsl(13, 20%, 67%)
Pearly	rgb(244, 226, 222)	hsl(11, 50%, 91%)
Concrete Landscape	rgb(89, 93, 114)	hsl(230, 12%, 40%)

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.

Aa13.12:1 Super#1D1F28 on #F4E2DE
Aa13.12:1 Super#F4E2DE on #1D1F28
Aa8.45:1 Very good#364234 on #F4E2DE
Aa8.45:1 Very good#F4E2DE on #364234
Aa6.79:1 Good#1D1F28 on #BBA19A
Aa6.79:1 Good#BBA19A on #1D1F28
Aa5.35:1 Good#1D1F28 on #859887
Aa5.35:1 Good#859887 on #1D1F28

Color blindness preview

CSS variables

/* Inkwell Inception to Concrete Landscape — https://swatchly.xyz/palette/1d1f28-364234-859887-bba19a-f4e2de-595d72 */
:root {
  --inkwell-inception: #1d1f28;
  --deep-forest: #364234;
  --mother-earth: #859887;
  --coca-mocha: #bba19a;
  --pearly: #f4e2de;
  --concrete-landscape: #595d72;
}

Tailwind CSS v4

/* Inkwell Inception to Concrete Landscape — https://swatchly.xyz/palette/1d1f28-364234-859887-bba19a-f4e2de-595d72 */
@theme {
  --color-inkwell-inception: #1d1f28;
  --color-inkwell-inception-50: #f3f5fc;
  --color-inkwell-inception-100: #e9ebf3;
  --color-inkwell-inception-200: #d5d7e0;
  --color-inkwell-inception-300: #bec0cb;
  --color-inkwell-inception-400: #9ea1ac;
  --color-inkwell-inception-500: #838691;
  --color-inkwell-inception-600: #696b76;
  --color-inkwell-inception-700: #53555f;
  --color-inkwell-inception-800: #40424b;
  --color-inkwell-inception-900: #31333a;
  --color-inkwell-inception-950: #1d1f28;
  --color-deep-forest: #364234;
  --color-deep-forest-50: #f0f8ee;
  --color-deep-forest-100: #e5eee3;
  --color-deep-forest-200: #d0dbce;
  --color-deep-forest-300: #b8c4b6;
  --color-deep-forest-400: #97a495;
  --color-deep-forest-500: #7b8878;
  --color-deep-forest-600: #606d5e;
  --color-deep-forest-700: #4a5548;
  --color-deep-forest-800: #364234;
  --color-deep-forest-900: #2a3229;
  --color-deep-forest-950: #191f18;
  --color-mother-earth: #859887;
  --color-mother-earth-50: #f0fbf1;
  --color-mother-earth-100: #e7f3e8;
  --color-mother-earth-200: #d4e2d6;
  --color-mother-earth-300: #becfc0;
  --color-mother-earth-400: #9fb1a1;
  --color-mother-earth-500: #859887;
  --color-mother-earth-600: #697b6b;
  --color-mother-earth-700: #516253;
  --color-mother-earth-800: #3d4c3f;
  --color-mother-earth-900: #2e3a2f;
  --color-mother-earth-950: #1b231c;
  --color-coca-mocha: #bba19a;
  --color-coca-mocha-50: #fff5f2;
  --color-coca-mocha-100: #fbeae6;
  --color-coca-mocha-200: #ebd7d2;
  --color-coca-mocha-300: #d7c1bb;
  --color-coca-mocha-400: #bba19a;
  --color-coca-mocha-500: #9e857e;
  --color-coca-mocha-600: #816963;
  --color-coca-mocha-700: #68524d;
  --color-coca-mocha-800: #523f3a;
  --color-coca-mocha-900: #3f2f2b;
  --color-coca-mocha-950: #271c19;
  --color-pearly: #f4e2de;
  --color-pearly-50: #f9efec;
  --color-pearly-100: #f4e2de;
  --color-pearly-200: #ded0cd;
  --color-pearly-300: #c9bab7;
  --color-pearly-400: #ab9b98;
  --color-pearly-500: #91817d;
  --color-pearly-600: #766764;
  --color-pearly-700: #5f524f;
  --color-pearly-800: #4b3f3d;
  --color-pearly-900: #3a302e;
  --color-pearly-950: #251d1c;
  --color-concrete-landscape: #595d72;
  --color-concrete-landscape-50: #f2f4ff;
  --color-concrete-landscape-100: #e7eafa;
  --color-concrete-landscape-200: #d5d8ea;
  --color-concrete-landscape-300: #bfc3d7;
  --color-concrete-landscape-400: #a1a5bb;
  --color-concrete-landscape-500: #878ba2;
  --color-concrete-landscape-600: #6e7288;
  --color-concrete-landscape-700: #595d72;
  --color-concrete-landscape-800: #45485a;
  --color-concrete-landscape-900: #353746;
  --color-concrete-landscape-950: #20222d;
}