Forget-Me-Not to Mermaid Tears color palette

0586BFForget-Me-Not 005B75Saltwater Denim C6CB3CGolden Harvest 673251Grape D98CA5Kiss D9E99EMermaid Tears

Open in generator Export PNG, PDF, ASE…

About this palette

Forget-Me-Not to Mermaid Tears is a 6-color palette: #0586BF (Forget-Me-Not), #005B75 (Saltwater Denim), #C6CB3C (Golden Harvest), #673251 (Grape), #D98CA5 (Kiss), #D9E99E (Mermaid Tears). It mixes blue, yellow, red, pink, green tones and feels balanced overall. The strongest text pairing is #673251 on #D9E99E with a contrast ratio of 7.48:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Forget-Me-Not	rgb(5, 134, 191)	hsl(198, 95%, 38%)
Saltwater Denim	rgb(0, 91, 117)	hsl(193, 100%, 23%)
Golden Harvest	rgb(198, 203, 60)	hsl(62, 58%, 52%)
Grape	rgb(103, 50, 81)	hsl(325, 35%, 30%)
Kiss	rgb(217, 140, 165)	hsl(341, 50%, 70%)
Mermaid Tears	rgb(217, 233, 158)	hsl(73, 63%, 77%)

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.

Aa7.48:1 Very good#673251 on #D9E99E
Aa7.48:1 Very good#D9E99E on #673251
Aa5.85:1 Good#005B75 on #D9E99E
Aa5.85:1 Good#D9E99E on #005B75
Aa5.58:1 Good#C6CB3C on #673251
Aa5.58:1 Good#673251 on #C6CB3C
Aa4.36:1 Poor#005B75 on #C6CB3C
Aa4.36:1 Poor#C6CB3C on #005B75

Color blindness preview

CSS variables

/* Forget-Me-Not to Mermaid Tears — https://swatchly.xyz/palette/0586bf-005b75-c6cb3c-673251-d98ca5-d9e99e */
:root {
  --forget-me-not: #0586bf;
  --saltwater-denim: #005b75;
  --golden-harvest: #c6cb3c;
  --grape: #673251;
  --kiss: #d98ca5;
  --mermaid-tears: #d9e99e;
}

Tailwind CSS v4

/* Forget-Me-Not to Mermaid Tears — https://swatchly.xyz/palette/0586bf-005b75-c6cb3c-673251-d98ca5-d9e99e */
@theme {
  --color-forget-me-not: #0586bf;
  --color-forget-me-not-50: #e8f6ff;
  --color-forget-me-not-100: #d0ecff;
  --color-forget-me-not-200: #a3daff;
  --color-forget-me-not-300: #6ec5fa;
  --color-forget-me-not-400: #3da4dd;
  --color-forget-me-not-500: #0586bf;
  --color-forget-me-not-600: #006c9b;
  --color-forget-me-not-700: #00567d;
  --color-forget-me-not-800: #004363;
  --color-forget-me-not-900: #00344e;
  --color-forget-me-not-950: #002133;
  --color-saltwater-denim: #005b75;
  --color-saltwater-denim-50: #e8f8ff;
  --color-saltwater-denim-100: #d1f1ff;
  --color-saltwater-denim-200: #abe0f6;
  --color-saltwater-denim-300: #8dcae3;
  --color-saltwater-denim-400: #65abc6;
  --color-saltwater-denim-500: #468eaa;
  --color-saltwater-denim-600: #29738d;
  --color-saltwater-denim-700: #005b75;
  --color-saltwater-denim-800: #03475b;
  --color-saltwater-denim-900: #003748;
  --color-saltwater-denim-950: #00222e;
  --color-golden-harvest: #c6cb3c;
  --color-golden-harvest-50: #f7fcb8;
  --color-golden-harvest-100: #eef3a6;
  --color-golden-harvest-200: #dbe083;
  --color-golden-harvest-300: #c6cb3c;
  --color-golden-harvest-400: #a6aa16;
  --color-golden-harvest-500: #8a8e00;
  --color-golden-harvest-600: #6f7200;
  --color-golden-harvest-700: #585a00;
  --color-golden-harvest-800: #444600;
  --color-golden-harvest-900: #343600;
  --color-golden-harvest-950: #202100;
  --color-grape: #673251;
  --color-grape-50: #fff0f8;
  --color-grape-100: #ffe2f1;
  --color-grape-200: #f8c7e1;
  --color-grape-300: #e6afcc;
  --color-grape-400: #c98faf;
  --color-grape-500: #af7394;
  --color-grape-600: #935a7a;
  --color-grape-700: #794663;
  --color-grape-800: #673251;
  --color-grape-900: #4e273e;
  --color-grape-950: #331727;
  --color-kiss: #d98ca5;
  --color-kiss-50: #fff3f7;
  --color-kiss-100: #ffe6ed;
  --color-kiss-200: #ffcada;
  --color-kiss-300: #f2afc4;
  --color-kiss-400: #d98ca5;
  --color-kiss-500: #ba7089;
  --color-kiss-600: #9c556e;
  --color-kiss-700: #804056;
  --color-kiss-800: #662f43;
  --color-kiss-900: #502133;
  --color-kiss-950: #34121f;
  --color-mermaid-tears: #d9e99e;
  --color-mermaid-tears-50: #f7ffe0;
  --color-mermaid-tears-100: #eef8ce;
  --color-mermaid-tears-200: #d9e99e;
  --color-mermaid-tears-300: #c2cf93;
  --color-mermaid-tears-400: #a1af6a;
  --color-mermaid-tears-500: #84924a;
  --color-mermaid-tears-600: #69762e;
  --color-mermaid-tears-700: #525d19;
  --color-mermaid-tears-800: #3f4809;
  --color-mermaid-tears-900: #303702;
  --color-mermaid-tears-950: #1d2300;
}