Old World to Satin Deep Black color palette

97AAC4Old World B5CBE9Featherbed 616C7DAshen Whisper 46515ENightfall 151B22Satin Deep Black

About this palette

Old World to Satin Deep Black is a 5-color muted palette: #97AAC4 (Old World), #B5CBE9 (Featherbed), #616C7D (Ashen Whisper), #46515E (Nightfall), #151B22 (Satin Deep Black). It mixes blue, gray, black tones and feels cool overall. The strongest text pairing is #B5CBE9 on #151B22 with a contrast ratio of 10.47:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Old World	rgb(151, 170, 196)	hsl(215, 28%, 68%)
Featherbed	rgb(181, 203, 233)	hsl(215, 54%, 81%)
Ashen Whisper	rgb(97, 108, 125)	hsl(216, 13%, 44%)
Nightfall	rgb(70, 81, 94)	hsl(213, 15%, 32%)
Satin Deep Black	rgb(21, 27, 34)	hsl(212, 24%, 11%)

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.47:1 Very good#B5CBE9 on #151B22
Aa10.47:1 Very good#151B22 on #B5CBE9
Aa7.31:1 Very good#97AAC4 on #151B22
Aa7.31:1 Very good#151B22 on #97AAC4
Aa4.88:1 Good#B5CBE9 on #46515E
Aa4.88:1 Good#46515E on #B5CBE9
Aa3.41:1 Poor#97AAC4 on #46515E
Aa3.41:1 Poor#46515E on #97AAC4

Color blindness preview

CSS variables

/* Old World to Satin Deep Black — https://swatchly.xyz/palette/97aac4-b5cbe9-616c7d-46515e-151b22 */
:root {
  --old-world: #97aac4;
  --featherbed: #b5cbe9;
  --ashen-whisper: #616c7d;
  --nightfall: #46515e;
  --satin-deep-black: #151b22;
}

Tailwind CSS v4

/* Old World to Satin Deep Black — https://swatchly.xyz/palette/97aac4-b5cbe9-616c7d-46515e-151b22 */
@theme {
  --color-old-world: #97aac4;
  --color-old-world-50: #f3f8ff;
  --color-old-world-100: #e5f0ff;
  --color-old-world-200: #cfdef1;
  --color-old-world-300: #b8c8df;
  --color-old-world-400: #97aac4;
  --color-old-world-500: #7b8da6;
  --color-old-world-600: #607189;
  --color-old-world-700: #4a596f;
  --color-old-world-800: #374558;
  --color-old-world-900: #293544;
  --color-old-world-950: #18202b;
  --color-featherbed: #b5cbe9;
  --color-featherbed-50: #f6faff;
  --color-featherbed-100: #e8f2ff;
  --color-featherbed-200: #d0e0f5;
  --color-featherbed-300: #b5cbe9;
  --color-featherbed-400: #96aac5;
  --color-featherbed-500: #788da9;
  --color-featherbed-600: #5d718c;
  --color-featherbed-700: #475971;
  --color-featherbed-800: #354459;
  --color-featherbed-900: #273445;
  --color-featherbed-950: #17202c;
  --color-ashen-whisper: #616c7d;
  --color-ashen-whisper-50: #eff6ff;
  --color-ashen-whisper-100: #e4ecf8;
  --color-ashen-whisper-200: #cfd8e6;
  --color-ashen-whisper-300: #b7c1d2;
  --color-ashen-whisper-400: #97a2b4;
  --color-ashen-whisper-500: #7b8798;
  --color-ashen-whisper-600: #616c7d;
  --color-ashen-whisper-700: #4c5565;
  --color-ashen-whisper-800: #3a4350;
  --color-ashen-whisper-900: #2c333e;
  --color-ashen-whisper-950: #1a1f27;
  --color-nightfall: #46515e;
  --color-nightfall-50: #eff6ff;
  --color-nightfall-100: #e4ecf6;
  --color-nightfall-200: #ced7e3;
  --color-nightfall-300: #b5c0cd;
  --color-nightfall-400: #94a0ae;
  --color-nightfall-500: #788492;
  --color-nightfall-600: #5d6876;
  --color-nightfall-700: #46515e;
  --color-nightfall-800: #363f49;
  --color-nightfall-900: #293039;
  --color-nightfall-950: #181d24;
  --color-satin-deep-black: #151b22;
  --color-satin-deep-black-50: #f1f6fb;
  --color-satin-deep-black-100: #e6ecf2;
  --color-satin-deep-black-200: #d2d8df;
  --color-satin-deep-black-300: #bbc2ca;
  --color-satin-deep-black-400: #9ba2ab;
  --color-satin-deep-black-500: #7e868f;
  --color-satin-deep-black-600: #636b73;
  --color-satin-deep-black-700: #4d535b;
  --color-satin-deep-black-800: #3a3f46;
  --color-satin-deep-black-900: #2a2f34;
  --color-satin-deep-black-950: #151b22;
}