Wild Life to Rogue Waters color palette

A9C1BFWild Life 2C534FHunter 859F9BJapanese Bonsai 223B39Royal Neptune E1F5F1Bone-Chilling 4C7573Rogue Waters

Open in generator Export PNG, PDF, ASE…

About this palette

Wild Life to Rogue Waters is a 6-color muted palette: #A9C1BF (Wild Life), #2C534F (Hunter), #859F9B (Japanese Bonsai), #223B39 (Royal Neptune), #E1F5F1 (Bone-Chilling), #4C7573 (Rogue Waters). It mixes gray, turquoise, white tones and feels cool overall. The strongest text pairing is #223B39 on #E1F5F1 with a contrast ratio of 10.57:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Wild Life	rgb(169, 193, 191)	hsl(175, 16%, 71%)
Hunter	rgb(44, 83, 79)	hsl(174, 31%, 25%)
Japanese Bonsai	rgb(133, 159, 155)	hsl(171, 12%, 57%)
Royal Neptune	rgb(34, 59, 57)	hsl(175, 27%, 18%)
Bone-Chilling	rgb(225, 245, 241)	hsl(168, 50%, 92%)
Rogue Waters	rgb(76, 117, 115)	hsl(177, 21%, 38%)

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.57:1 Very good#223B39 on #E1F5F1
Aa10.57:1 Very good#E1F5F1 on #223B39
Aa7.54:1 Very good#2C534F on #E1F5F1
Aa7.54:1 Very good#E1F5F1 on #2C534F
Aa6.31:1 Good#A9C1BF on #223B39
Aa6.31:1 Good#223B39 on #A9C1BF
Aa4.52:1 Good#E1F5F1 on #4C7573
Aa4.52:1 Good#4C7573 on #E1F5F1

Color blindness preview

CSS variables

/* Wild Life to Rogue Waters — https://swatchly.xyz/palette/a9c1bf-2c534f-859f9b-223b39-e1f5f1-4c7573 */
:root {
  --wild-life: #a9c1bf;
  --hunter: #2c534f;
  --japanese-bonsai: #859f9b;
  --royal-neptune: #223b39;
  --bone-chilling: #e1f5f1;
  --rogue-waters: #4c7573;
}

Tailwind CSS v4

/* Wild Life to Rogue Waters — https://swatchly.xyz/palette/a9c1bf-2c534f-859f9b-223b39-e1f5f1-4c7573 */
@theme {
  --color-wild-life: #a9c1bf;
  --color-wild-life-50: #e8f6f4;
  --color-wild-life-100: #dbebea;
  --color-wild-life-200: #c5d7d6;
  --color-wild-life-300: #a9c1bf;
  --color-wild-life-400: #8ca2a0;
  --color-wild-life-500: #718886;
  --color-wild-life-600: #596e6d;
  --color-wild-life-700: #455857;
  --color-wild-life-800: #344544;
  --color-wild-life-900: #273635;
  --color-wild-life-950: #172221;
  --color-hunter: #2c534f;
  --color-hunter-50: #e4fbf8;
  --color-hunter-100: #d7f2ee;
  --color-hunter-200: #c0dfdb;
  --color-hunter-300: #a8cbc7;
  --color-hunter-400: #87aea9;
  --color-hunter-500: #6c948f;
  --color-hunter-600: #537b76;
  --color-hunter-700: #406561;
  --color-hunter-800: #2c534f;
  --color-hunter-900: #23403d;
  --color-hunter-950: #132927;
  --color-japanese-bonsai: #859f9b;
  --color-japanese-bonsai-50: #e6f6f3;
  --color-japanese-bonsai-100: #d9ebe8;
  --color-japanese-bonsai-200: #c1d6d3;
  --color-japanese-bonsai-300: #a8bfbb;
  --color-japanese-bonsai-400: #859f9b;
  --color-japanese-bonsai-500: #6c8581;
  --color-japanese-bonsai-600: #546c68;
  --color-japanese-bonsai-700: #415653;
  --color-japanese-bonsai-800: #314441;
  --color-japanese-bonsai-900: #253533;
  --color-japanese-bonsai-950: #162220;
  --color-royal-neptune: #223b39;
  --color-royal-neptune-50: #e9f9f7;
  --color-royal-neptune-100: #ddf0ee;
  --color-royal-neptune-200: #c7dddb;
  --color-royal-neptune-300: #aec7c4;
  --color-royal-neptune-400: #8ea8a6;
  --color-royal-neptune-500: #728e8b;
  --color-royal-neptune-600: #597371;
  --color-royal-neptune-700: #455d5b;
  --color-royal-neptune-800: #344a48;
  --color-royal-neptune-900: #223b39;
  --color-royal-neptune-950: #172423;
  --color-bone-chilling: #e1f5f1;
  --color-bone-chilling-50: #f1fcfa;
  --color-bone-chilling-100: #e1f5f1;
  --color-bone-chilling-200: #d1dfdc;
  --color-bone-chilling-300: #b8c8c5;
  --color-bone-chilling-400: #96a8a5;
  --color-bone-chilling-500: #7a8c89;
  --color-bone-chilling-600: #5f716d;
  --color-bone-chilling-700: #495956;
  --color-bone-chilling-800: #384643;
  --color-bone-chilling-900: #2a3633;
  --color-bone-chilling-950: #192120;
  --color-rogue-waters: #4c7573;
  --color-rogue-waters-50: #e3fbf9;
  --color-rogue-waters-100: #d7f2f0;
  --color-rogue-waters-200: #bfdfdd;
  --color-rogue-waters-300: #a5cac8;
  --color-rogue-waters-400: #82aba9;
  --color-rogue-waters-500: #66908e;
  --color-rogue-waters-600: #4c7573;
  --color-rogue-waters-700: #385d5c;
  --color-rogue-waters-800: #294948;
  --color-rogue-waters-900: #1d3937;
  --color-rogue-waters-950: #0f2323;
}