April Showers to Mermaid Dreams color palette

DDE2BCApril Showers E6A2BFThink Pink 002E3DNordic Noir 5F3B4APlum Intended 0387B9Mermaid Dreams

About this palette

April Showers to Mermaid Dreams is a 5-color warm, vintage palette: #DDE2BC (April Showers), #E6A2BF (Think Pink), #002E3D (Nordic Noir), #5F3B4A (Plum Intended), #0387B9 (Mermaid Dreams). It mixes green, pink, blue, red tones and feels warm overall. The strongest text pairing is #DDE2BC on #002E3D with a contrast ratio of 10.75:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
April Showers	rgb(221, 226, 188)	hsl(68, 40%, 81%)
Think Pink	rgb(230, 162, 191)	hsl(334, 58%, 77%)
Nordic Noir	rgb(0, 46, 61)	hsl(195, 100%, 12%)
Plum Intended	rgb(95, 59, 74)	hsl(335, 23%, 30%)
Mermaid Dreams	rgb(3, 135, 185)	hsl(196, 97%, 37%)

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.75:1 Very good#DDE2BC on #002E3D
Aa10.75:1 Very good#002E3D on #DDE2BC
Aa7.09:1 Very good#DDE2BC on #5F3B4A
Aa7.09:1 Very good#5F3B4A on #DDE2BC
Aa7.05:1 Very good#E6A2BF on #002E3D
Aa7.05:1 Very good#002E3D on #E6A2BF
Aa4.65:1 Good#E6A2BF on #5F3B4A
Aa4.65:1 Good#5F3B4A on #E6A2BF

Color blindness preview

CSS variables

/* April Showers to Mermaid Dreams — https://swatchly.xyz/palette/dde2bc-e6a2bf-002e3d-5f3b4a-0387b9 */
:root {
  --april-showers: #dde2bc;
  --think-pink: #e6a2bf;
  --nordic-noir: #002e3d;
  --plum-intended: #5f3b4a;
  --mermaid-dreams: #0387b9;
}

Tailwind CSS v4

/* April Showers to Mermaid Dreams — https://swatchly.xyz/palette/dde2bc-e6a2bf-002e3d-5f3b4a-0387b9 */
@theme {
  --color-april-showers: #dde2bc;
  --color-april-showers-50: #f9fce8;
  --color-april-showers-100: #f0f3dd;
  --color-april-showers-200: #dde2bc;
  --color-april-showers-300: #c5c9ab;
  --color-april-showers-400: #a5a987;
  --color-april-showers-500: #888d6a;
  --color-april-showers-600: #6d714f;
  --color-april-showers-700: #56593b;
  --color-april-showers-800: #42452a;
  --color-april-showers-900: #33351e;
  --color-april-showers-950: #1f2110;
  --color-think-pink: #e6a2bf;
  --color-think-pink-50: #ffebf3;
  --color-think-pink-100: #ffdae9;
  --color-think-pink-200: #f6bfd6;
  --color-think-pink-300: #e6a2bf;
  --color-think-pink-400: #c585a1;
  --color-think-pink-500: #aa6b87;
  --color-think-pink-600: #8e536d;
  --color-think-pink-700: #753f58;
  --color-think-pink-800: #5e3045;
  --color-think-pink-900: #4c2436;
  --color-think-pink-950: #311422;
  --color-nordic-noir: #002e3d;
  --color-nordic-noir-50: #e9f8ff;
  --color-nordic-noir-100: #d5f0fc;
  --color-nordic-noir-200: #bddeec;
  --color-nordic-noir-300: #a2c8d8;
  --color-nordic-noir-400: #7da7b8;
  --color-nordic-noir-500: #5f899b;
  --color-nordic-noir-600: #446d7d;
  --color-nordic-noir-700: #305462;
  --color-nordic-noir-800: #203e4b;
  --color-nordic-noir-900: #002e3d;
  --color-nordic-noir-950: #091a21;
  --color-plum-intended: #5f3b4a;
  --color-plum-intended-50: #fff1f6;
  --color-plum-intended-100: #ffe2ed;
  --color-plum-intended-200: #eecdda;
  --color-plum-intended-300: #dbb6c4;
  --color-plum-intended-400: #bf96a6;
  --color-plum-intended-500: #a47c8c;
  --color-plum-intended-600: #896372;
  --color-plum-intended-700: #714e5c;
  --color-plum-intended-800: #5f3b4a;
  --color-plum-intended-900: #482e39;
  --color-plum-intended-950: #2f1c24;
  --color-mermaid-dreams: #0387b9;
  --color-mermaid-dreams-50: #e7f6ff;
  --color-mermaid-dreams-100: #ceedff;
  --color-mermaid-dreams-200: #9ddcff;
  --color-mermaid-dreams-300: #6ec6f4;
  --color-mermaid-dreams-400: #3da5d7;
  --color-mermaid-dreams-500: #0387b9;
  --color-mermaid-dreams-600: #006d96;
  --color-mermaid-dreams-700: #005678;
  --color-mermaid-dreams-800: #004460;
  --color-mermaid-dreams-900: #00354b;
  --color-mermaid-dreams-950: #002131;
}