Tranquili Teal to Lost in Time color palette

6C99A6Tranquili Teal CBE6D9Ice Dagger 243129Marshland 8F6164Opera 694A51Wine Stain 94AEB9Lost in Time

Open in generator Export PNG, PDF, ASE…

About this palette

Tranquili Teal to Lost in Time is a 6-color muted palette: #6C99A6 (Tranquili Teal), #CBE6D9 (Ice Dagger), #243129 (Marshland), #8F6164 (Opera), #694A51 (Wine Stain), #94AEB9 (Lost in Time). It mixes blue, gray, red tones and feels warm overall. The strongest text pairing is #CBE6D9 on #243129 with a contrast ratio of 10.26:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Tranquili Teal	rgb(108, 153, 166)	hsl(193, 25%, 54%)
Ice Dagger	rgb(203, 230, 217)	hsl(151, 35%, 85%)
Marshland	rgb(36, 49, 41)	hsl(143, 15%, 17%)
Opera	rgb(143, 97, 100)	hsl(356, 19%, 47%)
Wine Stain	rgb(105, 74, 81)	hsl(346, 17%, 35%)
Lost in Time	rgb(148, 174, 185)	hsl(198, 21%, 65%)

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.26:1 Very good#CBE6D9 on #243129
Aa10.26:1 Very good#243129 on #CBE6D9
Aa5.88:1 Good#CBE6D9 on #694A51
Aa5.88:1 Good#694A51 on #CBE6D9
Aa5.83:1 Good#243129 on #94AEB9
Aa5.83:1 Good#94AEB9 on #243129
Aa4.36:1 Poor#6C99A6 on #243129
Aa4.36:1 Poor#243129 on #6C99A6

Color blindness preview

CSS variables

/* Tranquili Teal to Lost in Time — https://swatchly.xyz/palette/6c99a6-cbe6d9-243129-8f6164-694a51-94aeb9 */
:root {
  --tranquili-teal: #6c99a6;
  --ice-dagger: #cbe6d9;
  --marshland: #243129;
  --opera: #8f6164;
  --wine-stain: #694a51;
  --lost-in-time: #94aeb9;
}

Tailwind CSS v4

/* Tranquili Teal to Lost in Time — https://swatchly.xyz/palette/6c99a6-cbe6d9-243129-8f6164-694a51-94aeb9 */
@theme {
  --color-tranquili-teal: #6c99a6;
  --color-tranquili-teal-50: #ebfaff;
  --color-tranquili-teal-100: #d9f5fd;
  --color-tranquili-teal-200: #c3e4ee;
  --color-tranquili-teal-300: #aad0db;
  --color-tranquili-teal-400: #88b3bf;
  --color-tranquili-teal-500: #6c99a6;
  --color-tranquili-teal-600: #507c89;
  --color-tranquili-teal-700: #3a636e;
  --color-tranquili-teal-800: #294d57;
  --color-tranquili-teal-900: #1c3b43;
  --color-tranquili-teal-950: #0e242a;
  --color-ice-dagger: #cbe6d9;
  --color-ice-dagger-50: #f0fef7;
  --color-ice-dagger-100: #e6f5ee;
  --color-ice-dagger-200: #cbe6d9;
  --color-ice-dagger-300: #b7cdc2;
  --color-ice-dagger-400: #94ada1;
  --color-ice-dagger-500: #779084;
  --color-ice-dagger-600: #5c7469;
  --color-ice-dagger-700: #465c52;
  --color-ice-dagger-800: #34473f;
  --color-ice-dagger-900: #273730;
  --color-ice-dagger-950: #17221d;
  --color-marshland: #243129;
  --color-marshland-50: #eff8f2;
  --color-marshland-100: #e4eee7;
  --color-marshland-200: #cfdbd3;
  --color-marshland-300: #b7c5bc;
  --color-marshland-400: #96a59b;
  --color-marshland-500: #79887f;
  --color-marshland-600: #5f6d64;
  --color-marshland-700: #48554d;
  --color-marshland-800: #36413a;
  --color-marshland-900: #243129;
  --color-marshland-950: #171d19;
  --color-opera: #8f6164;
  --color-opera-50: #fff1f2;
  --color-opera-100: #ffe4e5;
  --color-opera-200: #f5cecf;
  --color-opera-300: #e2b6b8;
  --color-opera-400: #c59698;
  --color-opera-500: #aa7b7e;
  --color-opera-600: #8f6164;
  --color-opera-700: #744b4e;
  --color-opera-800: #5d393c;
  --color-opera-900: #492b2d;
  --color-opera-950: #2f191b;
  --color-wine-stain: #694a51;
  --color-wine-stain-50: #fff1f4;
  --color-wine-stain-100: #fce4e9;
  --color-wine-stain-200: #ebcfd5;
  --color-wine-stain-300: #d6b7bd;
  --color-wine-stain-400: #b8969e;
  --color-wine-stain-500: #9d7b82;
  --color-wine-stain-600: #816168;
  --color-wine-stain-700: #694a51;
  --color-wine-stain-800: #52393f;
  --color-wine-stain-900: #402b30;
  --color-wine-stain-950: #291a1d;
  --color-lost-in-time: #94aeb9;
  --color-lost-in-time-50: #effaff;
  --color-lost-in-time-100: #e2f2f9;
  --color-lost-in-time-200: #cde1e9;
  --color-lost-in-time-300: #b6ccd5;
  --color-lost-in-time-400: #94aeb9;
  --color-lost-in-time-500: #78919c;
  --color-lost-in-time-600: #5d757f;
  --color-lost-in-time-700: #465d66;
  --color-lost-in-time-800: #344850;
  --color-lost-in-time-900: #26373d;
  --color-lost-in-time-950: #162126;
}