Dark Roast to Water Color Palette

About this palette

Dark Roast to Water is a 5-color muted, cool, earthy, vintage palette: #502C31 (Dark Roast), #7F4E57 (Nocturne Red), #5A8A72 (Clouded Pine), #98C3A9 (Seaborn), #CDF1FC (Water). It mixes brown, red, green, blue tones and feels cool overall. The strongest text pairing is #502C31 on #CDF1FC with a contrast ratio of 10.07:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Roast	rgb(80, 44, 49)	hsl(352, 29%, 24%)
Nocturne Red	rgb(127, 78, 87)	hsl(349, 24%, 40%)
Clouded Pine	rgb(90, 138, 114)	hsl(150, 21%, 45%)
Seaborn	rgb(152, 195, 169)	hsl(144, 26%, 68%)
Water	rgb(205, 241, 252)	hsl(194, 89%, 90%)

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.07:1 Very good#502C31 on #CDF1FC
Aa10.07:1 Very good#CDF1FC on #502C31
Aa6.14:1 Good#502C31 on #98C3A9
Aa6.14:1 Good#98C3A9 on #502C31
Aa5.62:1 Good#7F4E57 on #CDF1FC
Aa5.62:1 Good#CDF1FC on #7F4E57
Aa3.42:1 Poor#7F4E57 on #98C3A9
Aa3.42:1 Poor#98C3A9 on #7F4E57

Color blindness preview

CSS variables

/* Dark Roast to Water — https://swatchly.xyz/palette/502c31-7f4e57-5a8a72-98c3a9-cdf1fc */
:root {
  --dark-roast: #502c31;
  --nocturne-red: #7f4e57;
  --clouded-pine: #5a8a72;
  --seaborn: #98c3a9;
  --water: #cdf1fc;
}

Tailwind CSS v4

/* Dark Roast to Water — https://swatchly.xyz/palette/502c31-7f4e57-5a8a72-98c3a9-cdf1fc */
@theme {
  --color-dark-roast: #502c31;
  --color-dark-roast-50: #fff1f2;
  --color-dark-roast-100: #ffe3e6;
  --color-dark-roast-200: #f0cdd1;
  --color-dark-roast-300: #ddb5b9;
  --color-dark-roast-400: #c0969a;
  --color-dark-roast-500: #a67b80;
  --color-dark-roast-600: #8b6267;
  --color-dark-roast-700: #724d52;
  --color-dark-roast-800: #5d3d41;
  --color-dark-roast-900: #502c31;
  --color-dark-roast-950: #311d1f;
  --color-nocturne-red: #7f4e57;
  --color-nocturne-red-50: #fff1f3;
  --color-nocturne-red-100: #ffe3e7;
  --color-nocturne-red-200: #f7cdd3;
  --color-nocturne-red-300: #e6b6bd;
  --color-nocturne-red-400: #ca969f;
  --color-nocturne-red-500: #b17c85;
  --color-nocturne-red-600: #96636c;
  --color-nocturne-red-700: #7f4e57;
  --color-nocturne-red-800: #653c43;
  --color-nocturne-red-900: #4f2c33;
  --color-nocturne-red-950: #341a1f;
  --color-clouded-pine: #5a8a72;
  --color-clouded-pine-50: #dffcec;
  --color-clouded-pine-100: #d1f1e0;
  --color-clouded-pine-200: #b7dec9;
  --color-clouded-pine-300: #9bc7b0;
  --color-clouded-pine-400: #77a78e;
  --color-clouded-pine-500: #5a8a72;
  --color-clouded-pine-600: #43705a;
  --color-clouded-pine-700: #305a46;
  --color-clouded-pine-800: #224736;
  --color-clouded-pine-900: #183829;
  --color-clouded-pine-950: #0c2319;
  --color-seaborn: #98c3a9;
  --color-seaborn-50: #def7e7;
  --color-seaborn-100: #d0eddb;
  --color-seaborn-200: #b7d9c4;
  --color-seaborn-300: #98c3a9;
  --color-seaborn-400: #7ca58c;
  --color-seaborn-500: #628b73;
  --color-seaborn-600: #4a725b;
  --color-seaborn-700: #385c47;
  --color-seaborn-800: #294937;
  --color-seaborn-900: #1e3a2a;
  --color-seaborn-950: #102419;
  --color-water: #cdf1fc;
  --color-water-50: #e4f8fe;
  --color-water-100: #cdf1fc;
  --color-water-200: #c1dce4;
  --color-water-300: #a8c6cf;
  --color-water-400: #87a7b1;
  --color-water-500: #6b8c96;
  --color-water-600: #52717b;
  --color-water-700: #3d5b63;
  --color-water-800: #2d474e;
  --color-water-900: #21373d;
  --color-water-950: #122227;
}