Coca Mocha to Wave Splash Color Palette

About this palette

Coca Mocha to Wave Splash is a 5-color muted palette: #BB9E9B (Coca Mocha), #3D402B (Madras), #959363 (Guacamole), #66617D (Plummy), #CCE4E3 (Wave Splash). It mixes gray, yellow, purple tones and feels balanced overall. The strongest text pairing is #3D402B on #CCE4E3 with a contrast ratio of 8.02:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coca Mocha	rgb(187, 158, 155)	hsl(6, 19%, 67%)
Madras	rgb(61, 64, 43)	hsl(69, 20%, 21%)
Guacamole	rgb(149, 147, 99)	hsl(58, 20%, 49%)
Plummy	rgb(102, 97, 125)	hsl(251, 13%, 44%)
Wave Splash	rgb(204, 228, 227)	hsl(177, 31%, 85%)

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.02:1 Very good#3D402B on #CCE4E3
Aa8.02:1 Very good#CCE4E3 on #3D402B
Aa4.42:1 Poor#66617D on #CCE4E3
Aa4.42:1 Poor#CCE4E3 on #66617D
Aa4.31:1 Poor#BB9E9B on #3D402B
Aa4.31:1 Poor#3D402B on #BB9E9B
Aa3.37:1 Poor#3D402B on #959363
Aa3.37:1 Poor#959363 on #3D402B

Color blindness preview

CSS variables

/* Coca Mocha to Wave Splash — https://swatchly.xyz/palette/bb9e9b-3d402b-959363-66617d-cce4e3 */
:root {
  --coca-mocha: #bb9e9b;
  --madras: #3d402b;
  --guacamole: #959363;
  --plummy: #66617d;
  --wave-splash: #cce4e3;
}

Tailwind CSS v4

/* Coca Mocha to Wave Splash — https://swatchly.xyz/palette/bb9e9b-3d402b-959363-66617d-cce4e3 */
@theme {
  --color-coca-mocha: #bb9e9b;
  --color-coca-mocha-50: #fff4f2;
  --color-coca-mocha-100: #fbe9e6;
  --color-coca-mocha-200: #ebd5d2;
  --color-coca-mocha-300: #d7bebb;
  --color-coca-mocha-400: #bb9e9b;
  --color-coca-mocha-500: #9e827f;
  --color-coca-mocha-600: #826764;
  --color-coca-mocha-700: #68504e;
  --color-coca-mocha-800: #523e3c;
  --color-coca-mocha-900: #402e2d;
  --color-coca-mocha-950: #281c1a;
  --color-madras: #3d402b;
  --color-madras-50: #f4f7e9;
  --color-madras-100: #eaeddd;
  --color-madras-200: #d7dac7;
  --color-madras-300: #bfc3ad;
  --color-madras-400: #9fa28b;
  --color-madras-500: #83866f;
  --color-madras-600: #686b55;
  --color-madras-700: #505340;
  --color-madras-800: #3d402b;
  --color-madras-900: #2f3122;
  --color-madras-950: #1c1e14;
  --color-guacamole: #959363;
  --color-guacamole-50: #faf9de;
  --color-guacamole-100: #f2f1d3;
  --color-guacamole-200: #e0dfbc;
  --color-guacamole-300: #cccba2;
  --color-guacamole-400: #afad7f;
  --color-guacamole-500: #959363;
  --color-guacamole-600: #797648;
  --color-guacamole-700: #605e32;
  --color-guacamole-800: #4b4922;
  --color-guacamole-900: #393716;
  --color-guacamole-950: #23220a;
  --color-plummy: #66617d;
  --color-plummy-50: #f5f3ff;
  --color-plummy-100: #eae7fb;
  --color-plummy-200: #d5d1ea;
  --color-plummy-300: #beb9d5;
  --color-plummy-400: #9d98b6;
  --color-plummy-500: #817c99;
  --color-plummy-600: #66617d;
  --color-plummy-700: #514c65;
  --color-plummy-800: #3f3b50;
  --color-plummy-900: #302d3f;
  --color-plummy-950: #1e1b28;
  --color-wave-splash: #cce4e3;
  --color-wave-splash-50: #f0fdfc;
  --color-wave-splash-100: #e6f4f4;
  --color-wave-splash-200: #cce4e3;
  --color-wave-splash-300: #b8cbca;
  --color-wave-splash-400: #95abaa;
  --color-wave-splash-500: #788e8e;
  --color-wave-splash-600: #5d7372;
  --color-wave-splash-700: #475b5a;
  --color-wave-splash-800: #354646;
  --color-wave-splash-900: #283636;
  --color-wave-splash-950: #172221;
}