Ming to Bubbles Color Palette

About this palette

Ming to Bubbles is a 6-color muted, vintage palette: #377374 (Ming), #6F908E (Yucca), #624040 (Wild Thing), #F2CAC7 (Happy Piglets), #BB9999 (Creamed Caramel), #E8FDFF (Bubbles). It mixes turquoise, brown, pink, red, white tones and feels warm overall. The strongest text pairing is #624040 on #E8FDFF with a contrast ratio of 8.56:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ming	rgb(55, 115, 116)	hsl(181, 36%, 34%)
Yucca	rgb(111, 144, 142)	hsl(176, 13%, 50%)
Wild Thing	rgb(98, 64, 64)	hsl(0, 21%, 32%)
Happy Piglets	rgb(242, 202, 199)	hsl(4, 62%, 86%)
Creamed Caramel	rgb(187, 153, 153)	hsl(0, 20%, 67%)
Bubbles	rgb(232, 253, 255)	hsl(185, 100%, 95%)

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.

Aa8.56:1 Very good#624040 on #E8FDFF
Aa8.56:1 Very good#E8FDFF on #624040
Aa6.04:1 Good#624040 on #F2CAC7
Aa6.04:1 Good#F2CAC7 on #624040
Aa5.15:1 Good#377374 on #E8FDFF
Aa5.15:1 Good#E8FDFF on #377374
Aa3.63:1 Poor#377374 on #F2CAC7
Aa3.63:1 Poor#F2CAC7 on #377374

Color blindness preview

CSS variables

/* Ming to Bubbles — https://swatchly.xyz/palette/377374-6f908e-624040-f2cac7-bb9999-e8fdff */
:root {
  --ming: #377374;
  --yucca: #6f908e;
  --wild-thing: #624040;
  --happy-piglets: #f2cac7;
  --creamed-caramel: #bb9999;
  --bubbles: #e8fdff;
}

Tailwind CSS v4

/* Ming to Bubbles — https://swatchly.xyz/palette/377374-6f908e-624040-f2cac7-bb9999-e8fdff */
@theme {
  --color-ming: #377374;
  --color-ming-50: #dcfdfd;
  --color-ming-100: #cef3f3;
  --color-ming-200: #b3e0e0;
  --color-ming-300: #96caca;
  --color-ming-400: #71abab;
  --color-ming-500: #538f8f;
  --color-ming-600: #377374;
  --color-ming-700: #265c5d;
  --color-ming-800: #184849;
  --color-ming-900: #0e3839;
  --color-ming-950: #052324;
  --color-yucca: #6f908e;
  --color-yucca-50: #e7faf9;
  --color-yucca-100: #dcf1f0;
  --color-yucca-200: #c5dfdd;
  --color-yucca-300: #acc9c8;
  --color-yucca-400: #8baba9;
  --color-yucca-500: #6f908e;
  --color-yucca-600: #557573;
  --color-yucca-700: #405d5b;
  --color-yucca-800: #2f4948;
  --color-yucca-900: #223837;
  --color-yucca-950: #132322;
  --color-wild-thing: #624040;
  --color-wild-thing-50: #fff1f1;
  --color-wild-thing-100: #ffe4e3;
  --color-wild-thing-200: #eecfce;
  --color-wild-thing-300: #dcb9b8;
  --color-wild-thing-400: #c09a99;
  --color-wild-thing-500: #a6807f;
  --color-wild-thing-600: #8b6766;
  --color-wild-thing-700: #745252;
  --color-wild-thing-800: #624040;
  --color-wild-thing-900: #4b3131;
  --color-wild-thing-950: #311e1e;
  --color-happy-piglets: #f2cac7;
  --color-happy-piglets-50: #ffefee;
  --color-happy-piglets-100: #fce2e0;
  --color-happy-piglets-200: #f2cac7;
  --color-happy-piglets-300: #d7b6b3;
  --color-happy-piglets-400: #ba9693;
  --color-happy-piglets-500: #9f7b78;
  --color-happy-piglets-600: #83615f;
  --color-happy-piglets-700: #6b4c4a;
  --color-happy-piglets-800: #553a39;
  --color-happy-piglets-900: #432c2b;
  --color-happy-piglets-950: #2b1a19;
  --color-creamed-caramel: #bb9999;
  --color-creamed-caramel-50: #fff2f2;
  --color-creamed-caramel-100: #fce6e5;
  --color-creamed-caramel-200: #ecd1d1;
  --color-creamed-caramel-300: #d8bab9;
  --color-creamed-caramel-400: #bb9999;
  --color-creamed-caramel-500: #9e7e7e;
  --color-creamed-caramel-600: #826364;
  --color-creamed-caramel-700: #694e4e;
  --color-creamed-caramel-800: #543b3c;
  --color-creamed-caramel-900: #412d2d;
  --color-creamed-caramel-950: #291b1b;
  --color-bubbles: #e8fdff;
  --color-bubbles-50: #e8fdff;
  --color-bubbles-100: #e4f1f2;
  --color-bubbles-200: #ceddde;
  --color-bubbles-300: #b5c6c8;
  --color-bubbles-400: #94a7a8;
  --color-bubbles-500: #788b8d;
  --color-bubbles-600: #5e7071;
  --color-bubbles-700: #48595a;
  --color-bubbles-800: #374547;
  --color-bubbles-900: #293537;
  --color-bubbles-950: #182122;
}