Mermaid Tears to Violet Void color palette

CDE7AAMermaid Tears E192C1Sultan of Pink A7779FDrama Queen 5F771FTopiary Green 3E456BStarlit Night 181A27Violet Void

Open in generator Export PNG, PDF, ASE…

About this palette

Mermaid Tears to Violet Void is a 6-color palette: #CDE7AA (Mermaid Tears), #E192C1 (Sultan of Pink), #A7779F (Drama Queen), #5F771F (Topiary Green), #3E456B (Starlit Night), #181A27 (Violet Void). It mixes green, pink, purple, gray tones and feels cool overall. The strongest text pairing is #CDE7AA on #181A27 with a contrast ratio of 12.84:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mermaid Tears	rgb(205, 231, 170)	hsl(86, 56%, 79%)
Sultan of Pink	rgb(225, 146, 193)	hsl(324, 57%, 73%)
Drama Queen	rgb(167, 119, 159)	hsl(310, 21%, 56%)
Topiary Green	rgb(95, 119, 31)	hsl(76, 59%, 29%)
Starlit Night	rgb(62, 69, 107)	hsl(231, 27%, 33%)
Violet Void	rgb(24, 26, 39)	hsl(232, 24%, 12%)

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.84:1 Super#CDE7AA on #181A27
Aa12.84:1 Super#181A27 on #CDE7AA
Aa7.47:1 Very good#E192C1 on #181A27
Aa7.47:1 Very good#181A27 on #E192C1
Aa6.88:1 Good#CDE7AA on #3E456B
Aa6.88:1 Good#3E456B on #CDE7AA
Aa4.76:1 Good#A7779F on #181A27
Aa4.76:1 Good#181A27 on #A7779F

Color blindness preview

CSS variables

/* Mermaid Tears to Violet Void — https://swatchly.xyz/palette/cde7aa-e192c1-a7779f-5f771f-3e456b-181a27 */
:root {
  --mermaid-tears: #cde7aa;
  --sultan-of-pink: #e192c1;
  --drama-queen: #a7779f;
  --topiary-green: #5f771f;
  --starlit-night: #3e456b;
  --violet-void: #181a27;
}

Tailwind CSS v4

/* Mermaid Tears to Violet Void — https://swatchly.xyz/palette/cde7aa-e192c1-a7779f-5f771f-3e456b-181a27 */
@theme {
  --color-mermaid-tears: #cde7aa;
  --color-mermaid-tears-50: #f0fede;
  --color-mermaid-tears-100: #e6f6d2;
  --color-mermaid-tears-200: #cde7aa;
  --color-mermaid-tears-300: #b8ce9c;
  --color-mermaid-tears-400: #97ae77;
  --color-mermaid-tears-500: #7b9259;
  --color-mermaid-tears-600: #60763f;
  --color-mermaid-tears-700: #4a5e2b;
  --color-mermaid-tears-800: #38491c;
  --color-mermaid-tears-900: #2a3912;
  --color-mermaid-tears-950: #192308;
  --color-sultan-of-pink: #e192c1;
  --color-sultan-of-pink-50: #fff8fc;
  --color-sultan-of-pink-100: #ffecf6;
  --color-sultan-of-pink-200: #ffd2eb;
  --color-sultan-of-pink-300: #f7b6db;
  --color-sultan-of-pink-400: #e192c1;
  --color-sultan-of-pink-500: #c075a2;
  --color-sultan-of-pink-600: #a15885;
  --color-sultan-of-pink-700: #83416a;
  --color-sultan-of-pink-800: #692e53;
  --color-sultan-of-pink-900: #51203f;
  --color-sultan-of-pink-950: #331127;
  --color-drama-queen: #a7779f;
  --color-drama-queen-50: #fff1fc;
  --color-drama-queen-100: #ffe2f9;
  --color-drama-queen-200: #f2cbeb;
  --color-drama-queen-300: #dfb3d7;
  --color-drama-queen-400: #c293ba;
  --color-drama-queen-500: #a7779f;
  --color-drama-queen-600: #8a5d83;
  --color-drama-queen-700: #70476a;
  --color-drama-queen-800: #593554;
  --color-drama-queen-900: #462741;
  --color-drama-queen-950: #2d1729;
  --color-topiary-green: #5f771f;
  --color-topiary-green-50: #ecfdce;
  --color-topiary-green-100: #e1f4c0;
  --color-topiary-green-200: #cce2a3;
  --color-topiary-green-300: #b4cc84;
  --color-topiary-green-400: #94ae5d;
  --color-topiary-green-500: #79923d;
  --color-topiary-green-600: #5f771f;
  --color-topiary-green-700: #4a5f09;
  --color-topiary-green-800: #394a00;
  --color-topiary-green-900: #2b3900;
  --color-topiary-green-950: #1a2400;
  --color-starlit-night: #3e456b;
  --color-starlit-night-50: #f2f5ff;
  --color-starlit-night-100: #e5eaff;
  --color-starlit-night-200: #ced6f8;
  --color-starlit-night-300: #b7c0e6;
  --color-starlit-night-400: #98a1cb;
  --color-starlit-night-500: #7e87b1;
  --color-starlit-night-600: #656d96;
  --color-starlit-night-700: #50587d;
  --color-starlit-night-800: #3e456b;
  --color-starlit-night-900: #303551;
  --color-starlit-night-950: #1d2136;
  --color-violet-void: #181a27;
  --color-violet-void-50: #f2f4ff;
  --color-violet-void-100: #e8eaf6;
  --color-violet-void-200: #d4d7e4;
  --color-violet-void-300: #bdc0cf;
  --color-violet-void-400: #9da0b1;
  --color-violet-void-500: #818495;
  --color-violet-void-600: #666979;
  --color-violet-void-700: #4f5260;
  --color-violet-void-800: #3c3e4b;
  --color-violet-void-900: #2d2e38;
  --color-violet-void-950: #181a27;
}