Turkish Jade to Cascade Twilight color palette

008A96Turkish Jade 3F1405Black Chocolate 00AABETrue Sky Blue E8CEA2Durian White 2B489ECascade Twilight

Open in generator Export PNG, PDF, ASE…

About this palette

Turkish Jade to Cascade Twilight is a 5-color cool, vintage palette: #008A96 (Turkish Jade), #3F1405 (Black Chocolate), #00AABE (True Sky Blue), #E8CEA2 (Durian White), #2B489E (Cascade Twilight). It mixes turquoise, brown, yellow, blue tones and feels cool overall. The strongest text pairing is #3F1405 on #E8CEA2 with a contrast ratio of 10.49:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Turkish Jade	rgb(0, 138, 150)	hsl(185, 100%, 29%)
Black Chocolate	rgb(63, 20, 5)	hsl(16, 85%, 13%)
True Sky Blue	rgb(0, 170, 190)	hsl(186, 100%, 37%)
Durian White	rgb(232, 206, 162)	hsl(38, 60%, 77%)
Cascade Twilight	rgb(43, 72, 158)	hsl(225, 57%, 39%)

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.49:1 Very good#3F1405 on #E8CEA2
Aa10.49:1 Very good#E8CEA2 on #3F1405
Aa5.70:1 Good#3F1405 on #00AABE
Aa5.70:1 Good#00AABE on #3F1405
Aa5.46:1 Good#E8CEA2 on #2B489E
Aa5.46:1 Good#2B489E on #E8CEA2
Aa3.86:1 Poor#008A96 on #3F1405
Aa3.86:1 Poor#3F1405 on #008A96

Color blindness preview

CSS variables

/* Turkish Jade to Cascade Twilight — https://swatchly.xyz/palette/008a96-3f1405-00aabe-e8cea2-2b489e */
:root {
  --turkish-jade: #008a96;
  --black-chocolate: #3f1405;
  --true-sky-blue: #00aabe;
  --durian-white: #e8cea2;
  --cascade-twilight: #2b489e;
}

Tailwind CSS v4

/* Turkish Jade to Cascade Twilight — https://swatchly.xyz/palette/008a96-3f1405-00aabe-e8cea2-2b489e */
@theme {
  --color-turkish-jade: #008a96;
  --color-turkish-jade-50: #d7fbff;
  --color-turkish-jade-100: #b4f4fb;
  --color-turkish-jade-200: #93e0e9;
  --color-turkish-jade-300: #6ec9d3;
  --color-turkish-jade-400: #3da8b4;
  --color-turkish-jade-500: #008a96;
  --color-turkish-jade-600: #006f79;
  --color-turkish-jade-700: #005961;
  --color-turkish-jade-800: #00464c;
  --color-turkish-jade-900: #00373c;
  --color-turkish-jade-950: #002327;
  --color-black-chocolate: #3f1405;
  --color-black-chocolate-50: #fff2ee;
  --color-black-chocolate-100: #ffe5dc;
  --color-black-chocolate-200: #f8ccbe;
  --color-black-chocolate-300: #e5b4a4;
  --color-black-chocolate-400: #c89382;
  --color-black-chocolate-500: #ad7867;
  --color-black-chocolate-600: #915f4e;
  --color-black-chocolate-700: #784a3b;
  --color-black-chocolate-800: #623a2c;
  --color-black-chocolate-900: #4f2c21;
  --color-black-chocolate-950: #3f1405;
  --color-true-sky-blue: #00aabe;
  --color-true-sky-blue-50: #d6f9ff;
  --color-true-sky-blue-100: #aff3ff;
  --color-true-sky-blue-200: #84e1f1;
  --color-true-sky-blue-300: #5acadc;
  --color-true-sky-blue-400: #00aabe;
  --color-true-sky-blue-500: #008e9f;
  --color-true-sky-blue-600: #007381;
  --color-true-sky-blue-700: #005b67;
  --color-true-sky-blue-800: #004852;
  --color-true-sky-blue-900: #003940;
  --color-true-sky-blue-950: #00242a;
  --color-durian-white: #e8cea2;
  --color-durian-white-50: #feefd6;
  --color-durian-white-100: #f5e4c7;
  --color-durian-white-200: #e8cea2;
  --color-durian-white-300: #cfb993;
  --color-durian-white-400: #b29a71;
  --color-durian-white-500: #988056;
  --color-durian-white-600: #7d663e;
  --color-durian-white-700: #66512c;
  --color-durian-white-800: #513f1e;
  --color-durian-white-900: #3f3014;
  --color-durian-white-950: #281d09;
  --color-cascade-twilight: #2b489e;
  --color-cascade-twilight-50: #f1f5ff;
  --color-cascade-twilight-100: #e2ebff;
  --color-cascade-twilight-200: #c4d6ff;
  --color-cascade-twilight-300: #a2beff;
  --color-cascade-twilight-400: #769bf5;
  --color-cascade-twilight-500: #5a7dd8;
  --color-cascade-twilight-600: #4161b7;
  --color-cascade-twilight-700: #2b489e;
  --color-cascade-twilight-800: #21387b;
  --color-cascade-twilight-900: #172a63;
  --color-cascade-twilight-950: #0c1942;
}