Lost at Sea to Ashen Whisper color palette

8A99A5Lost at Sea 374A57Nocturne 141C23Satin Deep Black BCD1E0Delicate Ice 5C6A77Ashen Whisper

About this palette

Lost at Sea to Ashen Whisper is a 5-color muted palette: #8A99A5 (Lost at Sea), #374A57 (Nocturne), #141C23 (Satin Deep Black), #BCD1E0 (Delicate Ice), #5C6A77 (Ashen Whisper). It mixes gray tones and feels balanced overall. The strongest text pairing is #141C23 on #BCD1E0 with a contrast ratio of 10.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lost at Sea	rgb(138, 153, 165)	hsl(207, 13%, 59%)
Nocturne	rgb(55, 74, 87)	hsl(204, 23%, 28%)
Satin Deep Black	rgb(20, 28, 35)	hsl(208, 27%, 11%)
Delicate Ice	rgb(188, 209, 224)	hsl(205, 37%, 81%)
Ashen Whisper	rgb(92, 106, 119)	hsl(209, 13%, 41%)

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.93:1 Very good#141C23 on #BCD1E0
Aa10.93:1 Very good#BCD1E0 on #141C23
Aa5.89:1 Good#8A99A5 on #141C23
Aa5.89:1 Good#141C23 on #8A99A5
Aa5.85:1 Good#374A57 on #BCD1E0
Aa5.85:1 Good#BCD1E0 on #374A57
Aa3.52:1 Poor#BCD1E0 on #5C6A77
Aa3.52:1 Poor#5C6A77 on #BCD1E0

Color blindness preview

CSS variables

/* Lost at Sea to Ashen Whisper — https://swatchly.xyz/palette/8a99a5-374a57-141c23-bcd1e0-5c6a77 */
:root {
  --lost-at-sea: #8a99a5;
  --nocturne: #374a57;
  --satin-deep-black: #141c23;
  --delicate-ice: #bcd1e0;
  --ashen-whisper: #5c6a77;
}

Tailwind CSS v4

/* Lost at Sea to Ashen Whisper — https://swatchly.xyz/palette/8a99a5-374a57-141c23-bcd1e0-5c6a77 */
@theme {
  --color-lost-at-sea: #8a99a5;
  --color-lost-at-sea-50: #e9f3fa;
  --color-lost-at-sea-100: #dce7f0;
  --color-lost-at-sea-200: #c5d2dc;
  --color-lost-at-sea-300: #acbac5;
  --color-lost-at-sea-400: #8a99a5;
  --color-lost-at-sea-500: #71808b;
  --color-lost-at-sea-600: #596772;
  --color-lost-at-sea-700: #46525c;
  --color-lost-at-sea-800: #364149;
  --color-lost-at-sea-900: #2a333a;
  --color-lost-at-sea-950: #192025;
  --color-nocturne: #374a57;
  --color-nocturne-50: #ecf7ff;
  --color-nocturne-100: #dfedf7;
  --color-nocturne-200: #cadae6;
  --color-nocturne-300: #b2c5d2;
  --color-nocturne-400: #92a7b5;
  --color-nocturne-500: #778c9b;
  --color-nocturne-600: #5e7280;
  --color-nocturne-700: #4a5c69;
  --color-nocturne-800: #374a57;
  --color-nocturne-900: #2b3942;
  --color-nocturne-950: #19242b;
  --color-satin-deep-black: #141c23;
  --color-satin-deep-black-50: #f0f6fc;
  --color-satin-deep-black-100: #e5ecf2;
  --color-satin-deep-black-200: #d0d9e0;
  --color-satin-deep-black-300: #b9c2ca;
  --color-satin-deep-black-400: #99a3ac;
  --color-satin-deep-black-500: #7d8790;
  --color-satin-deep-black-600: #626b74;
  --color-satin-deep-black-700: #4b545c;
  --color-satin-deep-black-800: #394047;
  --color-satin-deep-black-900: #2a3035;
  --color-satin-deep-black-950: #141c23;
  --color-delicate-ice: #bcd1e0;
  --color-delicate-ice-50: #e4f0fa;
  --color-delicate-ice-100: #d7e5ef;
  --color-delicate-ice-200: #bcd1e0;
  --color-delicate-ice-300: #aabcc9;
  --color-delicate-ice-400: #8b9eac;
  --color-delicate-ice-500: #718592;
  --color-delicate-ice-600: #596c79;
  --color-delicate-ice-700: #465662;
  --color-delicate-ice-800: #36454f;
  --color-delicate-ice-900: #28353d;
  --color-delicate-ice-950: #182127;
  --color-ashen-whisper: #5c6a77;
  --color-ashen-whisper-50: #eef6ff;
  --color-ashen-whisper-100: #e2ecf5;
  --color-ashen-whisper-200: #ccd8e3;
  --color-ashen-whisper-300: #b3c1cd;
  --color-ashen-whisper-400: #92a1ae;
  --color-ashen-whisper-500: #768593;
  --color-ashen-whisper-600: #5c6a77;
  --color-ashen-whisper-700: #48545f;
  --color-ashen-whisper-800: #37424b;
  --color-ashen-whisper-900: #29323b;
  --color-ashen-whisper-950: #191f25;
}