Mallard to Ether color palette

294850Mallard 142529Sunken Ship ADD1DBClear Water 728992Gothic 4C6E78Winter Storm 9AAFB7Ether

About this palette

Mallard to Ether is a 6-color muted palette: #294850 (Mallard), #142529 (Sunken Ship), #ADD1DB (Clear Water), #728992 (Gothic), #4C6E78 (Winter Storm), #9AAFB7 (Ether). It mixes blue, gray tones and feels cool overall. The strongest text pairing is #142529 on #ADD1DB with a contrast ratio of 9.74:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mallard	rgb(41, 72, 80)	hsl(192, 32%, 24%)
Sunken Ship	rgb(20, 37, 41)	hsl(191, 34%, 12%)
Clear Water	rgb(173, 209, 219)	hsl(193, 39%, 77%)
Gothic	rgb(114, 137, 146)	hsl(197, 13%, 51%)
Winter Storm	rgb(76, 110, 120)	hsl(194, 22%, 38%)
Ether	rgb(154, 175, 183)	hsl(197, 17%, 66%)

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.

Aa9.74:1 Very good#142529 on #ADD1DB
Aa9.74:1 Very good#ADD1DB on #142529
Aa6.93:1 Good#142529 on #9AAFB7
Aa6.93:1 Good#9AAFB7 on #142529
Aa6.05:1 Good#294850 on #ADD1DB
Aa6.05:1 Good#ADD1DB on #294850
Aa4.30:1 Poor#142529 on #728992
Aa4.30:1 Poor#728992 on #142529

Color blindness preview

CSS variables

/* Mallard to Ether — https://swatchly.xyz/palette/294850-142529-add1db-728992-4c6e78-9aafb7 */
:root {
  --mallard: #294850;
  --sunken-ship: #142529;
  --clear-water: #add1db;
  --gothic: #728992;
  --winter-storm: #4c6e78;
  --ether: #9aafb7;
}

Tailwind CSS v4

/* Mallard to Ether — https://swatchly.xyz/palette/294850-142529-add1db-728992-4c6e78-9aafb7 */
@theme {
  --color-mallard: #294850;
  --color-mallard-50: #e6f9fe;
  --color-mallard-100: #daf0f6;
  --color-mallard-200: #c3dde4;
  --color-mallard-300: #aac7cf;
  --color-mallard-400: #88a8b1;
  --color-mallard-500: #6c8d95;
  --color-mallard-600: #52727a;
  --color-mallard-700: #3e5b62;
  --color-mallard-800: #294850;
  --color-mallard-900: #21373d;
  --color-mallard-950: #132226;
  --color-sunken-ship: #142529;
  --color-sunken-ship-50: #ecf8fb;
  --color-sunken-ship-100: #e1eef1;
  --color-sunken-ship-200: #cbdbdf;
  --color-sunken-ship-300: #b3c5c9;
  --color-sunken-ship-400: #92a6aa;
  --color-sunken-ship-500: #778b90;
  --color-sunken-ship-600: #5e7175;
  --color-sunken-ship-700: #495a5e;
  --color-sunken-ship-800: #38474b;
  --color-sunken-ship-900: #2b383b;
  --color-sunken-ship-950: #142529;
  --color-clear-water: #add1db;
  --color-clear-water-50: #f1fcff;
  --color-clear-water-100: #e1f6fc;
  --color-clear-water-200: #cbe4eb;
  --color-clear-water-300: #add1db;
  --color-clear-water-400: #8eafb8;
  --color-clear-water-500: #70929c;
  --color-clear-water-600: #55767f;
  --color-clear-water-700: #3f5d66;
  --color-clear-water-800: #2e484f;
  --color-clear-water-900: #20373d;
  --color-clear-water-950: #122226;
  --color-gothic: #728992;
  --color-gothic-50: #eaf8fd;
  --color-gothic-100: #deeef4;
  --color-gothic-200: #c8dae2;
  --color-gothic-300: #afc4cc;
  --color-gothic-400: #8ea5ae;
  --color-gothic-500: #728992;
  --color-gothic-600: #596f77;
  --color-gothic-700: #445860;
  --color-gothic-800: #33454c;
  --color-gothic-900: #26353b;
  --color-gothic-950: #162125;
  --color-winter-storm: #4c6e78;
  --color-winter-storm-50: #e6f9ff;
  --color-winter-storm-100: #d8eff6;
  --color-winter-storm-200: #c0dce4;
  --color-winter-storm-300: #a6c5ce;
  --color-winter-storm-400: #83a5b0;
  --color-winter-storm-500: #668994;
  --color-winter-storm-600: #4c6e78;
  --color-winter-storm-700: #395760;
  --color-winter-storm-800: #2a454c;
  --color-winter-storm-900: #1f353b;
  --color-winter-storm-950: #112126;
  --color-ether: #9aafb7;
  --color-ether-50: #f0fbff;
  --color-ether-100: #e6f3f8;
  --color-ether-200: #d2e1e7;
  --color-ether-300: #bbccd3;
  --color-ether-400: #9aafb7;
  --color-ether-500: #7d9299;
  --color-ether-600: #62757d;
  --color-ether-700: #4b5d64;
  --color-ether-800: #38484e;
  --color-ether-900: #29373b;
  --color-ether-950: #182124;
}