Matt Lilac to Bats Cloak color palette

E2C2D6Matt Lilac 94AFD1Old World 96806CGazelle 4D7364Green Sleeves 2F3A44Tempest in a Teapot 1D161BBats Cloak

Open in generator Export PNG, PDF, ASE…

About this palette

Matt Lilac to Bats Cloak is a 6-color muted palette: #E2C2D6 (Matt Lilac), #94AFD1 (Old World), #96806C (Gazelle), #4D7364 (Green Sleeves), #2F3A44 (Tempest in a Teapot), #1D161B (Bats Cloak). It mixes pink, blue, orange, turquoise, gray, black tones and feels balanced overall. The strongest text pairing is #E2C2D6 on #1D161B with a contrast ratio of 10.92:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Matt Lilac	rgb(226, 194, 214)	hsl(322, 36%, 82%)
Old World	rgb(148, 175, 209)	hsl(213, 40%, 70%)
Gazelle	rgb(150, 128, 108)	hsl(29, 17%, 51%)
Green Sleeves	rgb(77, 115, 100)	hsl(156, 20%, 38%)
Tempest in a Teapot	rgb(47, 58, 68)	hsl(209, 18%, 23%)
Bats Cloak	rgb(29, 22, 27)	hsl(317, 14%, 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.

Aa10.92:1 Very good#E2C2D6 on #1D161B
Aa10.92:1 Very good#1D161B on #E2C2D6
Aa7.87:1 Very good#94AFD1 on #1D161B
Aa7.87:1 Very good#1D161B on #94AFD1
Aa7.14:1 Very good#E2C2D6 on #2F3A44
Aa7.14:1 Very good#2F3A44 on #E2C2D6
Aa5.15:1 Good#94AFD1 on #2F3A44
Aa5.15:1 Good#2F3A44 on #94AFD1

Color blindness preview

CSS variables

/* Matt Lilac to Bats Cloak — https://swatchly.xyz/palette/e2c2d6-94afd1-96806c-4d7364-2f3a44-1d161b */
:root {
  --matt-lilac: #e2c2d6;
  --old-world: #94afd1;
  --gazelle: #96806c;
  --green-sleeves: #4d7364;
  --tempest-in-a-teapot: #2f3a44;
  --bats-cloak: #1d161b;
}

Tailwind CSS v4

/* Matt Lilac to Bats Cloak — https://swatchly.xyz/palette/e2c2d6-94afd1-96806c-4d7364-2f3a44-1d161b */
@theme {
  --color-matt-lilac: #e2c2d6;
  --color-matt-lilac-50: #fbe7f3;
  --color-matt-lilac-100: #f1dbe8;
  --color-matt-lilac-200: #e2c2d6;
  --color-matt-lilac-300: #cbafc0;
  --color-matt-lilac-400: #ae91a3;
  --color-matt-lilac-500: #94778a;
  --color-matt-lilac-600: #7a5f71;
  --color-matt-lilac-700: #644b5b;
  --color-matt-lilac-800: #503b49;
  --color-matt-lilac-900: #3f2c38;
  --color-matt-lilac-950: #281b23;
  --color-old-world: #94afd1;
  --color-old-world-50: #f5f9ff;
  --color-old-world-100: #e8f2ff;
  --color-old-world-200: #cee1fa;
  --color-old-world-300: #b6cde9;
  --color-old-world-400: #94afd1;
  --color-old-world-500: #7791b2;
  --color-old-world-600: #5c7594;
  --color-old-world-700: #455c78;
  --color-old-world-800: #334760;
  --color-old-world-900: #25354a;
  --color-old-world-950: #14202f;
  --color-gazelle: #96806c;
  --color-gazelle-50: #fff2e7;
  --color-gazelle-100: #f7e8da;
  --color-gazelle-200: #e5d3c3;
  --color-gazelle-300: #d0bca9;
  --color-gazelle-400: #b29c88;
  --color-gazelle-500: #96806c;
  --color-gazelle-600: #7b6653;
  --color-gazelle-700: #63503f;
  --color-gazelle-800: #4e3e2f;
  --color-gazelle-900: #3d2f23;
  --color-gazelle-950: #271d14;
  --color-green-sleeves: #4d7364;
  --color-green-sleeves-50: #e5fbf2;
  --color-green-sleeves-100: #d8f2e7;
  --color-green-sleeves-200: #c0dfd2;
  --color-green-sleeves-300: #a6c9ba;
  --color-green-sleeves-400: #84aa9a;
  --color-green-sleeves-500: #678e7e;
  --color-green-sleeves-600: #4d7364;
  --color-green-sleeves-700: #3a5c4f;
  --color-green-sleeves-800: #2a483d;
  --color-green-sleeves-900: #1f382e;
  --color-green-sleeves-950: #11231c;
  --color-tempest-in-a-teapot: #2f3a44;
  --color-tempest-in-a-teapot-50: #eff6fd;
  --color-tempest-in-a-teapot-100: #e4ecf4;
  --color-tempest-in-a-teapot-200: #cfd9e2;
  --color-tempest-in-a-teapot-300: #b7c2cd;
  --color-tempest-in-a-teapot-400: #98a4b0;
  --color-tempest-in-a-teapot-500: #7e8a96;
  --color-tempest-in-a-teapot-600: #65717c;
  --color-tempest-in-a-teapot-700: #505b65;
  --color-tempest-in-a-teapot-800: #3f4952;
  --color-tempest-in-a-teapot-900: #2f3a44;
  --color-tempest-in-a-teapot-950: #1e252a;
  --color-bats-cloak: #1d161b;
  --color-bats-cloak-50: #f9f3f7;
  --color-bats-cloak-100: #efe9ed;
  --color-bats-cloak-200: #dcd5da;
  --color-bats-cloak-300: #c6bec4;
  --color-bats-cloak-400: #a89ea5;
  --color-bats-cloak-500: #8b8188;
  --color-bats-cloak-600: #6f666c;
  --color-bats-cloak-700: #564f54;
  --color-bats-cloak-800: #423b40;
  --color-bats-cloak-900: #302b2f;
  --color-bats-cloak-950: #1d161b;
}