Catch the Wave to Darkest Forest color palette

B3DBDDCatch the Wave 518467Clouded Pine C58B87Grand Sunset 5B4B5BFreefall 243621Darkest Forest

About this palette

Catch the Wave to Darkest Forest is a 5-color muted, cool palette: #B3DBDD (Catch the Wave), #518467 (Clouded Pine), #C58B87 (Grand Sunset), #5B4B5B (Freefall), #243621 (Darkest Forest). It mixes turquoise, green, red, gray tones and feels cool overall. The strongest text pairing is #B3DBDD on #243621 with a contrast ratio of 8.67:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Catch the Wave	rgb(179, 219, 221)	hsl(183, 38%, 78%)
Clouded Pine	rgb(81, 132, 103)	hsl(146, 24%, 42%)
Grand Sunset	rgb(197, 139, 135)	hsl(4, 35%, 65%)
Freefall	rgb(91, 75, 91)	hsl(300, 10%, 33%)
Darkest Forest	rgb(36, 54, 33)	hsl(111, 24%, 17%)

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.67:1 Very good#B3DBDD on #243621
Aa8.67:1 Very good#243621 on #B3DBDD
Aa5.42:1 Good#B3DBDD on #5B4B5B
Aa5.42:1 Good#5B4B5B on #B3DBDD
Aa4.57:1 Good#C58B87 on #243621
Aa4.57:1 Good#243621 on #C58B87

Color blindness preview

CSS variables

/* Catch the Wave to Darkest Forest — https://swatchly.xyz/palette/b3dbdd-518467-c58b87-5b4b5b-243621 */
:root {
  --catch-the-wave: #b3dbdd;
  --clouded-pine: #518467;
  --grand-sunset: #c58b87;
  --freefall: #5b4b5b;
  --darkest-forest: #243621;
}

Tailwind CSS v4

/* Catch the Wave to Darkest Forest — https://swatchly.xyz/palette/b3dbdd-518467-c58b87-5b4b5b-243621 */
@theme {
  --color-catch-the-wave: #b3dbdd;
  --color-catch-the-wave-50: #e0f7f8;
  --color-catch-the-wave-100: #d3edee;
  --color-catch-the-wave-200: #b3dbdd;
  --color-catch-the-wave-300: #a2c4c6;
  --color-catch-the-wave-400: #81a6a8;
  --color-catch-the-wave-500: #668c8e;
  --color-catch-the-wave-600: #4e7274;
  --color-catch-the-wave-700: #3a5b5d;
  --color-catch-the-wave-800: #2b484a;
  --color-catch-the-wave-900: #1f3839;
  --color-catch-the-wave-950: #112324;
  --color-clouded-pine: #518467;
  --color-clouded-pine-50: #e0feeb;
  --color-clouded-pine-100: #d6f7e3;
  --color-clouded-pine-200: #c0e7cf;
  --color-clouded-pine-300: #a8d3b9;
  --color-clouded-pine-400: #86b79a;
  --color-clouded-pine-500: #6a9d80;
  --color-clouded-pine-600: #518467;
  --color-clouded-pine-700: #3a6a50;
  --color-clouded-pine-800: #29533c;
  --color-clouded-pine-900: #1b402d;
  --color-clouded-pine-950: #0e291a;
  --color-grand-sunset: #c58b87;
  --color-grand-sunset-50: #ffefee;
  --color-grand-sunset-100: #ffe0dd;
  --color-grand-sunset-200: #f6c6c3;
  --color-grand-sunset-300: #e2ada9;
  --color-grand-sunset-400: #c58b87;
  --color-grand-sunset-500: #a9716d;
  --color-grand-sunset-600: #8d5855;
  --color-grand-sunset-700: #734441;
  --color-grand-sunset-800: #5d3432;
  --color-grand-sunset-900: #4a2725;
  --color-grand-sunset-950: #301716;
  --color-freefall: #5b4b5b;
  --color-freefall-50: #fcf1fc;
  --color-freefall-100: #f3e7f3;
  --color-freefall-200: #e0d1df;
  --color-freefall-300: #c9b9c9;
  --color-freefall-400: #aa99aa;
  --color-freefall-500: #8e7d8e;
  --color-freefall-600: #726272;
  --color-freefall-700: #5b4b5b;
  --color-freefall-800: #473a47;
  --color-freefall-900: #372c37;
  --color-freefall-950: #221b22;
  --color-darkest-forest: #243621;
  --color-darkest-forest-50: #edf9eb;
  --color-darkest-forest-100: #e2f0df;
  --color-darkest-forest-200: #ccddc9;
  --color-darkest-forest-300: #b4c7b1;
  --color-darkest-forest-400: #93a890;
  --color-darkest-forest-500: #778c74;
  --color-darkest-forest-600: #5d715a;
  --color-darkest-forest-700: #485944;
  --color-darkest-forest-800: #364533;
  --color-darkest-forest-900: #243621;
  --color-darkest-forest-950: #172016;
}