Rosy Brown to Calm Waters color palette

B79292Rosy Brown CCC6DDLavender Bliss 5B5D3CCypress 946660Chocolate Temptation 313925Graphite E8FBFFCalm Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Rosy Brown to Calm Waters is a 6-color muted, vintage palette: #B79292 (Rosy Brown), #CCC6DD (Lavender Bliss), #5B5D3C (Cypress), #946660 (Chocolate Temptation), #313925 (Graphite), #E8FBFF (Calm Waters). It mixes red, gray, brown, green, white tones and feels warm overall. The strongest text pairing is #313925 on #E8FBFF with a contrast ratio of 11.29:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Rosy Brown	rgb(183, 146, 146)	hsl(0, 20%, 65%)
Lavender Bliss	rgb(204, 198, 221)	hsl(256, 25%, 82%)
Cypress	rgb(91, 93, 60)	hsl(64, 22%, 30%)
Chocolate Temptation	rgb(148, 102, 96)	hsl(7, 21%, 48%)
Graphite	rgb(49, 57, 37)	hsl(84, 21%, 18%)
Calm Waters	rgb(232, 251, 255)	hsl(190, 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.

Aa11.29:1 Very good#313925 on #E8FBFF
Aa11.29:1 Very good#E8FBFF on #313925
Aa7.28:1 Very good#CCC6DD on #313925
Aa7.28:1 Very good#313925 on #CCC6DD
Aa6.40:1 Good#5B5D3C on #E8FBFF
Aa6.40:1 Good#E8FBFF on #5B5D3C
Aa4.55:1 Good#946660 on #E8FBFF
Aa4.55:1 Good#E8FBFF on #946660

Color blindness preview

CSS variables

/* Rosy Brown to Calm Waters — https://swatchly.xyz/palette/b79292-ccc6dd-5b5d3c-946660-313925-e8fbff */
:root {
  --rosy-brown: #b79292;
  --lavender-bliss: #ccc6dd;
  --cypress: #5b5d3c;
  --chocolate-temptation: #946660;
  --graphite: #313925;
  --calm-waters: #e8fbff;
}

Tailwind CSS v4

/* Rosy Brown to Calm Waters — https://swatchly.xyz/palette/b79292-ccc6dd-5b5d3c-946660-313925-e8fbff */
@theme {
  --color-rosy-brown: #b79292;
  --color-rosy-brown-50: #ffefef;
  --color-rosy-brown-100: #fbe1e1;
  --color-rosy-brown-200: #eacccb;
  --color-rosy-brown-300: #d5b3b3;
  --color-rosy-brown-400: #b79292;
  --color-rosy-brown-500: #9b7878;
  --color-rosy-brown-600: #805f5f;
  --color-rosy-brown-700: #684a4a;
  --color-rosy-brown-800: #533939;
  --color-rosy-brown-900: #412b2c;
  --color-rosy-brown-950: #2a1a1b;
  --color-lavender-bliss: #ccc6dd;
  --color-lavender-bliss-50: #faf9ff;
  --color-lavender-bliss-100: #f3effd;
  --color-lavender-bliss-200: #e1dced;
  --color-lavender-bliss-300: #ccc6dd;
  --color-lavender-bliss-400: #aba5ba;
  --color-lavender-bliss-500: #8e889d;
  --color-lavender-bliss-600: #726c81;
  --color-lavender-bliss-700: #5a5567;
  --color-lavender-bliss-800: #454151;
  --color-lavender-bliss-900: #34303e;
  --color-lavender-bliss-950: #201d27;
  --color-cypress: #5b5d3c;
  --color-cypress-50: #f5f7e3;
  --color-cypress-100: #ebeed6;
  --color-cypress-200: #d9dbc0;
  --color-cypress-300: #c3c6a7;
  --color-cypress-400: #a5a785;
  --color-cypress-500: #8a8d6a;
  --color-cypress-600: #717352;
  --color-cypress-700: #5b5d3c;
  --color-cypress-800: #47492d;
  --color-cypress-900: #363821;
  --color-cypress-950: #222312;
  --color-chocolate-temptation: #946660;
  --color-chocolate-temptation-50: #fff2f0;
  --color-chocolate-temptation-100: #ffe6e3;
  --color-chocolate-temptation-200: #f6d0cb;
  --color-chocolate-temptation-300: #e4b9b3;
  --color-chocolate-temptation-400: #c99a93;
  --color-chocolate-temptation-500: #af7f79;
  --color-chocolate-temptation-600: #946660;
  --color-chocolate-temptation-700: #794f4a;
  --color-chocolate-temptation-800: #603c37;
  --color-chocolate-temptation-900: #4c2d29;
  --color-chocolate-temptation-950: #311a18;
  --color-graphite: #313925;
  --color-graphite-50: #f2f8ea;
  --color-graphite-100: #e7eedf;
  --color-graphite-200: #d3dbc9;
  --color-graphite-300: #bcc5b0;
  --color-graphite-400: #9da690;
  --color-graphite-500: #828b75;
  --color-graphite-600: #68715b;
  --color-graphite-700: #535b47;
  --color-graphite-800: #414836;
  --color-graphite-900: #313925;
  --color-graphite-950: #1f2318;
  --color-calm-waters: #e8fbff;
  --color-calm-waters-50: #e8fbff;
  --color-calm-waters-100: #e4eff1;
  --color-calm-waters-200: #cedcde;
  --color-calm-waters-300: #b6c5c8;
  --color-calm-waters-400: #95a6a9;
  --color-calm-waters-500: #798a8e;
  --color-calm-waters-600: #5f6f73;
  --color-calm-waters-700: #49585b;
  --color-calm-waters-800: #384548;
  --color-calm-waters-900: #2a3537;
  --color-calm-waters-950: #192122;
}