Catch the Wave to Thundercloud Color Palette

About this palette

Catch the Wave to Thundercloud is a 4-color muted palette: #B7D9D9 (Catch the Wave), #5F4745 (Mustang), #2E2323 (Wood Bark), #66888A (Thundercloud). It mixes turquoise, gray tones and feels cool overall. The strongest text pairing is #B7D9D9 on #2E2323 with a contrast ratio of 10.10:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Catch the Wave	rgb(183, 217, 217)	hsl(180, 31%, 78%)
Mustang	rgb(95, 71, 69)	hsl(5, 16%, 32%)
Wood Bark	rgb(46, 35, 35)	hsl(0, 14%, 16%)
Thundercloud	rgb(102, 136, 138)	hsl(183, 15%, 47%)

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.10:1 Very good#B7D9D9 on #2E2323
Aa10.10:1 Very good#2E2323 on #B7D9D9
Aa5.64:1 Good#B7D9D9 on #5F4745
Aa5.64:1 Good#5F4745 on #B7D9D9
Aa3.95:1 Poor#2E2323 on #66888A
Aa3.95:1 Poor#66888A on #2E2323

Color blindness preview

CSS variables

/* Catch the Wave to Thundercloud — https://swatchly.xyz/palette/b7d9d9-5f4745-2e2323-66888a */
:root {
  --catch-the-wave: #b7d9d9;
  --mustang: #5f4745;
  --wood-bark: #2e2323;
  --thundercloud: #66888a;
}

Tailwind CSS v4

/* Catch the Wave to Thundercloud — https://swatchly.xyz/palette/b7d9d9-5f4745-2e2323-66888a */
@theme {
  --color-catch-the-wave: #b7d9d9;
  --color-catch-the-wave-50: #e2f6f5;
  --color-catch-the-wave-100: #d5ebeb;
  --color-catch-the-wave-200: #b7d9d9;
  --color-catch-the-wave-300: #a5c2c2;
  --color-catch-the-wave-400: #85a5a5;
  --color-catch-the-wave-500: #6a8a8a;
  --color-catch-the-wave-600: #527171;
  --color-catch-the-wave-700: #3e5a5a;
  --color-catch-the-wave-800: #2f4848;
  --color-catch-the-wave-900: #223737;
  --color-catch-the-wave-950: #132222;
  --color-mustang: #5f4745;
  --color-mustang-50: #fff2f0;
  --color-mustang-100: #f9e6e4;
  --color-mustang-200: #e6d0ce;
  --color-mustang-300: #d0b7b5;
  --color-mustang-400: #b19694;
  --color-mustang-500: #947977;
  --color-mustang-600: #775e5c;
  --color-mustang-700: #5f4745;
  --color-mustang-800: #4a3736;
  --color-mustang-900: #392a29;
  --color-mustang-950: #241918;
  --color-wood-bark: #2e2323;
  --color-wood-bark-50: #fbf3f3;
  --color-wood-bark-100: #f2e9e8;
  --color-wood-bark-200: #e0d4d4;
  --color-wood-bark-300: #cabdbd;
  --color-wood-bark-400: #ab9e9e;
  --color-wood-bark-500: #928484;
  --color-wood-bark-600: #786b6b;
  --color-wood-bark-700: #625656;
  --color-wood-bark-800: #4f4444;
  --color-wood-bark-900: #403636;
  --color-wood-bark-950: #2e2323;
  --color-thundercloud: #66888a;
  --color-thundercloud-50: #e5f9fa;
  --color-thundercloud-100: #d8eef0;
  --color-thundercloud-200: #bfdbdc;
  --color-thundercloud-300: #a5c4c6;
  --color-thundercloud-400: #82a4a6;
  --color-thundercloud-500: #66888a;
  --color-thundercloud-600: #4e6e70;
  --color-thundercloud-700: #3b585a;
  --color-thundercloud-800: #2b4547;
  --color-thundercloud-900: #203637;
  --color-thundercloud-950: #122223;
}