Start generating

Aubergine to Bubbles color palette

351F22Aubergine185957Mosque3F7E73Turquoise TortoiseBB8491Punched PinkE0B9BCShy Young SalmonE5FFF9Bubbles
Open in generator Export PNG, PDF, ASE…

About this palette

Aubergine to Bubbles is a 6-color muted palette: #351F22 (Aubergine), #185957 (Mosque), #3F7E73 (Turquoise Tortoise), #BB8491 (Punched Pink), #E0B9BC (Shy Young Salmon), #E5FFF9 (Bubbles). It mixes gray, turquoise, pink, white tones and feels balanced overall. The strongest text pairing is #351F22 on #E5FFF9 with a contrast ratio of 14.60:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Auberginergb(53, 31, 34)hsl(352, 26%, 16%)
Mosquergb(24, 89, 87)hsl(178, 58%, 22%)
Turquoise Tortoisergb(63, 126, 115)hsl(170, 33%, 37%)
Punched Pinkrgb(187, 132, 145)hsl(346, 29%, 63%)
Shy Young Salmonrgb(224, 185, 188)hsl(355, 39%, 80%)
Bubblesrgb(229, 255, 249)hsl(166, 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.

  • Aa14.60:1 Super#351F22 on #E5FFF9
  • Aa14.60:1 Super#E5FFF9 on #351F22
  • Aa8.64:1 Very good#351F22 on #E0B9BC
  • Aa8.64:1 Very good#E0B9BC on #351F22
  • Aa7.68:1 Very good#185957 on #E5FFF9
  • Aa7.68:1 Very good#E5FFF9 on #185957
  • Aa4.98:1 Good#351F22 on #BB8491
  • Aa4.98:1 Good#BB8491 on #351F22

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Aubergine to Bubbles — https://swatchly.xyz/palette/351f22-185957-3f7e73-bb8491-e0b9bc-e5fff9 */
:root {
  --aubergine: #351f22;
  --mosque: #185957;
  --turquoise-tortoise: #3f7e73;
  --punched-pink: #bb8491;
  --shy-young-salmon: #e0b9bc;
  --bubbles: #e5fff9;
}

Tailwind CSS v4

/* Aubergine to Bubbles — https://swatchly.xyz/palette/351f22-185957-3f7e73-bb8491-e0b9bc-e5fff9 */
@theme {
  --color-aubergine: #351f22;
  --color-aubergine-50: #fff1f3;
  --color-aubergine-100: #f9e6e8;
  --color-aubergine-200: #e8d1d3;
  --color-aubergine-300: #d3babc;
  --color-aubergine-400: #b5999c;
  --color-aubergine-500: #9b7f82;
  --color-aubergine-600: #81676a;
  --color-aubergine-700: #6a5255;
  --color-aubergine-800: #564143;
  --color-aubergine-900: #463335;
  --color-aubergine-950: #351f22;
  --color-mosque: #185957;
  --color-mosque-50: #dcfdfb;
  --color-mosque-100: #cef4f2;
  --color-mosque-200: #b3e1de;
  --color-mosque-300: #95cac7;
  --color-mosque-400: #6faaa7;
  --color-mosque-500: #508d8b;
  --color-mosque-600: #36716f;
  --color-mosque-700: #185957;
  --color-mosque-800: #154544;
  --color-mosque-900: #0c3634;
  --color-mosque-950: #042120;
  --color-turquoise-tortoise: #3f7e73;
  --color-turquoise-tortoise-50: #dbfef6;
  --color-turquoise-tortoise-100: #cff6ee;
  --color-turquoise-tortoise-200: #b7e5db;
  --color-turquoise-tortoise-300: #9bd0c6;
  --color-turquoise-tortoise-400: #77b3a7;
  --color-turquoise-tortoise-500: #5a988d;
  --color-turquoise-tortoise-600: #3f7e73;
  --color-turquoise-tortoise-700: #2a655b;
  --color-turquoise-tortoise-800: #1a5047;
  --color-turquoise-tortoise-900: #0f3e36;
  --color-turquoise-tortoise-950: #052722;
  --color-punched-pink: #bb8491;
  --color-punched-pink-50: #ffebef;
  --color-punched-pink-100: #ffdae2;
  --color-punched-pink-200: #f0c1cb;
  --color-punched-pink-300: #daa7b2;
  --color-punched-pink-400: #bb8491;
  --color-punched-pink-500: #a06b78;
  --color-punched-pink-600: #855460;
  --color-punched-pink-700: #6d414c;
  --color-punched-pink-800: #58323c;
  --color-punched-pink-900: #47262e;
  --color-punched-pink-950: #2f171d;
  --color-shy-young-salmon: #e0b9bc;
  --color-shy-young-salmon-50: #fff4f4;
  --color-shy-young-salmon-100: #ffe7e8;
  --color-shy-young-salmon-200: #efd2d4;
  --color-shy-young-salmon-300: #e0b9bc;
  --color-shy-young-salmon-400: #be9a9d;
  --color-shy-young-salmon-500: #a27e81;
  --color-shy-young-salmon-600: #856366;
  --color-shy-young-salmon-700: #6c4d50;
  --color-shy-young-salmon-800: #553b3d;
  --color-shy-young-salmon-900: #422c2e;
  --color-shy-young-salmon-950: #2a1a1c;
  --color-bubbles: #e5fff9;
  --color-bubbles-50: #e5fff9;
  --color-bubbles-100: #e2f2ee;
  --color-bubbles-200: #ccdeda;
  --color-bubbles-300: #b3c8c3;
  --color-bubbles-400: #91a8a3;
  --color-bubbles-500: #758c87;
  --color-bubbles-600: #5b716c;
  --color-bubbles-700: #465a56;
  --color-bubbles-800: #354743;
  --color-bubbles-900: #273633;
  --color-bubbles-950: #172220;
}

Similar palettes