Bath Water to Bruised Plum color palette

7CE6F2Bath Water C891A9Pinch Me C66432Chivalrous Fox 8A4B2EGingerbread 004B4ATropical Forest 341B27Bruised Plum

Open in generator Export PNG, PDF, ASE…

About this palette

Bath Water to Bruised Plum is a 6-color warm, vintage palette: #7CE6F2 (Bath Water), #C891A9 (Pinch Me), #C66432 (Chivalrous Fox), #8A4B2E (Gingerbread), #004B4A (Tropical Forest), #341B27 (Bruised Plum). It mixes turquoise, pink, orange, brown, red tones and feels warm overall. The strongest text pairing is #7CE6F2 on #341B27 with a contrast ratio of 10.85:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Bath Water	rgb(124, 230, 242)	hsl(186, 82%, 72%)
Pinch Me	rgb(200, 145, 169)	hsl(334, 33%, 68%)
Chivalrous Fox	rgb(198, 100, 50)	hsl(20, 60%, 49%)
Gingerbread	rgb(138, 75, 46)	hsl(19, 50%, 36%)
Tropical Forest	rgb(0, 75, 74)	hsl(179, 100%, 15%)
Bruised Plum	rgb(52, 27, 39)	hsl(331, 32%, 15%)

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.85:1 Very good#7CE6F2 on #341B27
Aa10.85:1 Very good#341B27 on #7CE6F2
Aa6.87:1 Good#7CE6F2 on #004B4A
Aa6.87:1 Good#004B4A on #7CE6F2
Aa6.06:1 Good#C891A9 on #341B27
Aa6.06:1 Good#341B27 on #C891A9
Aa4.62:1 Good#7CE6F2 on #8A4B2E
Aa4.62:1 Good#8A4B2E on #7CE6F2

Color blindness preview

CSS variables

/* Bath Water to Bruised Plum — https://swatchly.xyz/palette/7ce6f2-c891a9-c66432-8a4b2e-004b4a-341b27 */
:root {
  --bath-water: #7ce6f2;
  --pinch-me: #c891a9;
  --chivalrous-fox: #c66432;
  --gingerbread: #8a4b2e;
  --tropical-forest: #004b4a;
  --bruised-plum: #341b27;
}

Tailwind CSS v4

/* Bath Water to Bruised Plum — https://swatchly.xyz/palette/7ce6f2-c891a9-c66432-8a4b2e-004b4a-341b27 */
@theme {
  --color-bath-water: #7ce6f2;
  --color-bath-water-50: #d4faff;
  --color-bath-water-100: #b5f4fc;
  --color-bath-water-200: #7ce6f2;
  --color-bath-water-300: #75ced8;
  --color-bath-water-400: #47b0bb;
  --color-bath-water-500: #1a95a0;
  --color-bath-water-600: #007983;
  --color-bath-water-700: #006069;
  --color-bath-water-800: #004c53;
  --color-bath-water-900: #003b40;
  --color-bath-water-950: #002529;
  --color-pinch-me: #c891a9;
  --color-pinch-me-50: #fff2f7;
  --color-pinch-me-100: #ffe4ef;
  --color-pinch-me-200: #f6cbdd;
  --color-pinch-me-300: #e3b3c7;
  --color-pinch-me-400: #c891a9;
  --color-pinch-me-500: #ab768d;
  --color-pinch-me-600: #8e5b72;
  --color-pinch-me-700: #73465b;
  --color-pinch-me-800: #5c3547;
  --color-pinch-me-900: #482736;
  --color-pinch-me-950: #2e1622;
  --color-chivalrous-fox: #c66432;
  --color-chivalrous-fox-50: #fff1eb;
  --color-chivalrous-fox-100: #ffe4d8;
  --color-chivalrous-fox-200: #ffc8af;
  --color-chivalrous-fox-300: #ffa67c;
  --color-chivalrous-fox-400: #e38253;
  --color-chivalrous-fox-500: #c66432;
  --color-chivalrous-fox-600: #a74a14;
  --color-chivalrous-fox-700: #893700;
  --color-chivalrous-fox-800: #6d2a00;
  --color-chivalrous-fox-900: #551f00;
  --color-chivalrous-fox-950: #381100;
  --color-gingerbread: #8a4b2e;
  --color-gingerbread-50: #fff2ed;
  --color-gingerbread-100: #ffe5da;
  --color-gingerbread-200: #ffcdb7;
  --color-gingerbread-300: #f1b49a;
  --color-gingerbread-400: #d79477;
  --color-gingerbread-500: #bd7a5c;
  --color-gingerbread-600: #a16143;
  --color-gingerbread-700: #8a4b2e;
  --color-gingerbread-800: #6e3921;
  --color-gingerbread-900: #572a15;
  --color-gingerbread-950: #391909;
  --color-tropical-forest: #004b4a;
  --color-tropical-forest-50: #dbfdfc;
  --color-tropical-forest-100: #cef4f2;
  --color-tropical-forest-200: #b4e2e0;
  --color-tropical-forest-300: #98ccca;
  --color-tropical-forest-400: #72adab;
  --color-tropical-forest-500: #549290;
  --color-tropical-forest-600: #3a7675;
  --color-tropical-forest-700: #265e5d;
  --color-tropical-forest-800: #004b4a;
  --color-tropical-forest-900: #0d3938;
  --color-tropical-forest-950: #052323;
  --color-bruised-plum: #341b27;
  --color-bruised-plum-50: #fff1f7;
  --color-bruised-plum-100: #fae4ed;
  --color-bruised-plum-200: #e9cfda;
  --color-bruised-plum-300: #d5b8c4;
  --color-bruised-plum-400: #b797a5;
  --color-bruised-plum-500: #9c7d8b;
  --color-bruised-plum-600: #826471;
  --color-bruised-plum-700: #6a4f5b;
  --color-bruised-plum-800: #563e49;
  --color-bruised-plum-900: #45303a;
  --color-bruised-plum-950: #341b27;
}