Total Eclipse to Tropical Fog Color Palette

About this palette

Total Eclipse to Tropical Fog is a 5-color muted, vintage palette: #2F3844 (Total Eclipse), #734D39 (Coffee), #A07558 (Mocha), #8E9DC1 (Sailing), #CBC8B0 (Tropical Fog). It mixes gray, brown, orange, blue tones and feels warm overall. The strongest text pairing is #2F3844 on #CBC8B0 with a contrast ratio of 7.02:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Total Eclipse	rgb(47, 56, 68)	hsl(214, 18%, 23%)
Coffee	rgb(115, 77, 57)	hsl(21, 34%, 34%)
Mocha	rgb(160, 117, 88)	hsl(24, 29%, 49%)
Sailing	rgb(142, 157, 193)	hsl(222, 29%, 66%)
Tropical Fog	rgb(203, 200, 176)	hsl(53, 21%, 74%)

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.

Aa7.02:1 Very good#2F3844 on #CBC8B0
Aa7.02:1 Very good#CBC8B0 on #2F3844
Aa4.37:1 Poor#2F3844 on #8E9DC1
Aa4.37:1 Poor#8E9DC1 on #2F3844
Aa4.36:1 Poor#734D39 on #CBC8B0
Aa4.36:1 Poor#CBC8B0 on #734D39

Color blindness preview

CSS variables

/* Total Eclipse to Tropical Fog — https://swatchly.xyz/palette/2f3844-734d39-a07558-8e9dc1-cbc8b0 */
:root {
  --total-eclipse: #2f3844;
  --coffee: #734d39;
  --mocha: #a07558;
  --sailing: #8e9dc1;
  --tropical-fog: #cbc8b0;
}

Tailwind CSS v4

/* Total Eclipse to Tropical Fog — https://swatchly.xyz/palette/2f3844-734d39-a07558-8e9dc1-cbc8b0 */
@theme {
  --color-total-eclipse: #2f3844;
  --color-total-eclipse-50: #eff6fe;
  --color-total-eclipse-100: #e5ecf5;
  --color-total-eclipse-200: #d0d8e4;
  --color-total-eclipse-300: #b8c2cf;
  --color-total-eclipse-400: #99a3b1;
  --color-total-eclipse-500: #7e8997;
  --color-total-eclipse-600: #656f7d;
  --color-total-eclipse-700: #505965;
  --color-total-eclipse-800: #3f4752;
  --color-total-eclipse-900: #2f3844;
  --color-total-eclipse-950: #1e232a;
  --color-coffee: #734d39;
  --color-coffee-50: #fff2ec;
  --color-coffee-100: #ffe5d8;
  --color-coffee-200: #f2d0bf;
  --color-coffee-300: #deb9a5;
  --color-coffee-400: #c19883;
  --color-coffee-500: #a67d68;
  --color-coffee-600: #8a634f;
  --color-coffee-700: #734d39;
  --color-coffee-800: #5b3c2b;
  --color-coffee-900: #472d1f;
  --color-coffee-950: #2e1b11;
  --color-mocha: #a07558;
  --color-mocha-50: #fff1e8;
  --color-mocha-100: #ffe2d0;
  --color-mocha-200: #f0ccb4;
  --color-mocha-300: #dbb398;
  --color-mocha-400: #bd9175;
  --color-mocha-500: #a07558;
  --color-mocha-600: #855c41;
  --color-mocha-700: #6c482f;
  --color-mocha-800: #563721;
  --color-mocha-900: #442a17;
  --color-mocha-950: #2c190c;
  --color-sailing: #8e9dc1;
  --color-sailing-50: #eff4ff;
  --color-sailing-100: #e0e9ff;
  --color-sailing-200: #c8d4f1;
  --color-sailing-300: #b0bdde;
  --color-sailing-400: #8e9dc1;
  --color-sailing-500: #7482a5;
  --color-sailing-600: #5b6989;
  --color-sailing-700: #475370;
  --color-sailing-800: #36415a;
  --color-sailing-900: #293247;
  --color-sailing-950: #181f2f;
  --color-tropical-fog: #cbc8b0;
  --color-tropical-fog-50: #faf9ec;
  --color-tropical-fog-100: #f2f0e1;
  --color-tropical-fog-200: #dfddcc;
  --color-tropical-fog-300: #cbc8b0;
  --color-tropical-fog-400: #aaa791;
  --color-tropical-fog-500: #8e8b74;
  --color-tropical-fog-600: #726f5a;
  --color-tropical-fog-700: #5a5844;
  --color-tropical-fog-800: #464433;
  --color-tropical-fog-900: #353325;
  --color-tropical-fog-950: #212015;
}