Heavy Brown to Shallow Sea color palette

6F6449Heavy Brown 5E4135Espresso Bar D0E9FBVeiling Waterfalls 9B7E79Opium A3B5C3Shallow Sea

About this palette

Heavy Brown to Shallow Sea is a 5-color muted, warm palette: #6F6449 (Heavy Brown), #5E4135 (Espresso Bar), #D0E9FB (Veiling Waterfalls), #9B7E79 (Opium), #A3B5C3 (Shallow Sea). It mixes brown, blue, red, gray tones and feels warm overall. The strongest text pairing is #5E4135 on #D0E9FB with a contrast ratio of 7.33:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Heavy Brown	rgb(111, 100, 73)	hsl(43, 21%, 36%)
Espresso Bar	rgb(94, 65, 53)	hsl(18, 28%, 29%)
Veiling Waterfalls	rgb(208, 233, 251)	hsl(205, 84%, 90%)
Opium	rgb(155, 126, 121)	hsl(9, 15%, 54%)
Shallow Sea	rgb(163, 181, 195)	hsl(206, 21%, 70%)

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.

Aa7.33:1 Very good#5E4135 on #D0E9FB
Aa7.33:1 Very good#D0E9FB on #5E4135
Aa4.65:1 Good#6F6449 on #D0E9FB
Aa4.65:1 Good#D0E9FB on #6F6449
Aa4.36:1 Poor#5E4135 on #A3B5C3
Aa4.36:1 Poor#A3B5C3 on #5E4135

Color blindness preview

CSS variables

/* Heavy Brown to Shallow Sea — https://swatchly.xyz/palette/6f6449-5e4135-d0e9fb-9b7e79-a3b5c3 */
:root {
  --heavy-brown: #6f6449;
  --espresso-bar: #5e4135;
  --veiling-waterfalls: #d0e9fb;
  --opium: #9b7e79;
  --shallow-sea: #a3b5c3;
}

Tailwind CSS v4

/* Heavy Brown to Shallow Sea — https://swatchly.xyz/palette/6f6449-5e4135-d0e9fb-9b7e79-a3b5c3 */
@theme {
  --color-heavy-brown: #6f6449;
  --color-heavy-brown-50: #fcf5e4;
  --color-heavy-brown-100: #f1e9d6;
  --color-heavy-brown-200: #ded4be;
  --color-heavy-brown-300: #c7bca3;
  --color-heavy-brown-400: #a79c80;
  --color-heavy-brown-500: #8b7f63;
  --color-heavy-brown-600: #6f6449;
  --color-heavy-brown-700: #594f37;
  --color-heavy-brown-800: #463d29;
  --color-heavy-brown-900: #362f1e;
  --color-heavy-brown-950: #221d10;
  --color-espresso-bar: #5e4135;
  --color-espresso-bar-50: #fff2ed;
  --color-espresso-bar-100: #fce6dd;
  --color-espresso-bar-200: #ecd1c6;
  --color-espresso-bar-300: #d9bbaf;
  --color-espresso-bar-400: #bc9c8f;
  --color-espresso-bar-500: #a28274;
  --color-espresso-bar-600: #88685c;
  --color-espresso-bar-700: #705348;
  --color-espresso-bar-800: #5e4135;
  --color-espresso-bar-900: #483229;
  --color-espresso-bar-950: #2f1f18;
  --color-veiling-waterfalls: #d0e9fb;
  --color-veiling-waterfalls-50: #e4f2fd;
  --color-veiling-waterfalls-100: #d0e9fb;
  --color-veiling-waterfalls-200: #c3d5e3;
  --color-veiling-waterfalls-300: #abc0cf;
  --color-veiling-waterfalls-400: #8ba2b2;
  --color-veiling-waterfalls-500: #718898;
  --color-veiling-waterfalls-600: #586e7e;
  --color-veiling-waterfalls-700: #445866;
  --color-veiling-waterfalls-800: #344551;
  --color-veiling-waterfalls-900: #26353f;
  --color-veiling-waterfalls-950: #162128;
  --color-opium: #9b7e79;
  --color-opium-50: #fff2ef;
  --color-opium-100: #fae6e2;
  --color-opium-200: #e9d1cd;
  --color-opium-300: #d4bab5;
  --color-opium-400: #b69a94;
  --color-opium-500: #9b7e79;
  --color-opium-600: #7f645f;
  --color-opium-700: #674e4a;
  --color-opium-800: #523c39;
  --color-opium-900: #402e2b;
  --color-opium-950: #281c19;
  --color-shallow-sea: #a3b5c3;
  --color-shallow-sea-50: #e4eff8;
  --color-shallow-sea-100: #d6e3ed;
  --color-shallow-sea-200: #becdd9;
  --color-shallow-sea-300: #a3b5c3;
  --color-shallow-sea-400: #8798a6;
  --color-shallow-sea-500: #6f808d;
  --color-shallow-sea-600: #586874;
  --color-shallow-sea-700: #45535e;
  --color-shallow-sea-800: #35424c;
  --color-shallow-sea-900: #29343d;
  --color-shallow-sea-950: #192026;
}