Featherbed to Total Eclipse Color Palette

About this palette

Featherbed to Total Eclipse is a 4-color muted, gradient palette: #B6C9E4 (Featherbed), #8E9AA9 (Blank Stare), #566582 (Admiral Blue), #2F363F (Total Eclipse). It mixes blue, gray tones and feels cool overall. The strongest text pairing is #B6C9E4 on #2F363F with a contrast ratio of 7.25:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Featherbed	rgb(182, 201, 228)	hsl(215, 46%, 80%)
Blank Stare	rgb(142, 154, 169)	hsl(213, 14%, 61%)
Admiral Blue	rgb(86, 101, 130)	hsl(220, 20%, 42%)
Total Eclipse	rgb(47, 54, 63)	hsl(214, 15%, 22%)

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.25:1 Very good#B6C9E4 on #2F363F
Aa7.25:1 Very good#2F363F on #B6C9E4
Aa4.27:1 Poor#8E9AA9 on #2F363F
Aa4.27:1 Poor#2F363F on #8E9AA9
Aa3.48:1 Poor#B6C9E4 on #566582
Aa3.48:1 Poor#566582 on #B6C9E4

Color blindness preview

CSS variables

/* Featherbed to Total Eclipse — https://swatchly.xyz/palette/b6c9e4-8e9aa9-566582-2f363f */
:root {
  --featherbed: #b6c9e4;
  --blank-stare: #8e9aa9;
  --admiral-blue: #566582;
  --total-eclipse: #2f363f;
}

Tailwind CSS v4

/* Featherbed to Total Eclipse — https://swatchly.xyz/palette/b6c9e4-8e9aa9-566582-2f363f */
@theme {
  --color-featherbed: #b6c9e4;
  --color-featherbed-50: #f5f9ff;
  --color-featherbed-100: #e6f1ff;
  --color-featherbed-200: #d0def2;
  --color-featherbed-300: #b6c9e4;
  --color-featherbed-400: #97a8c1;
  --color-featherbed-500: #7a8ca5;
  --color-featherbed-600: #5f7088;
  --color-featherbed-700: #49586e;
  --color-featherbed-800: #374457;
  --color-featherbed-900: #283443;
  --color-featherbed-950: #18202b;
  --color-blank-stare: #8e9aa9;
  --color-blank-stare-50: #ebf3fc;
  --color-blank-stare-100: #dfe7f2;
  --color-blank-stare-200: #c9d2df;
  --color-blank-stare-300: #b0bbc8;
  --color-blank-stare-400: #8e9aa9;
  --color-blank-stare-500: #75808f;
  --color-blank-stare-600: #5d6775;
  --color-blank-stare-700: #49525f;
  --color-blank-stare-800: #38414b;
  --color-blank-stare-900: #2b323b;
  --color-blank-stare-950: #1a2026;
  --color-admiral-blue: #566582;
  --color-admiral-blue-50: #f0f5ff;
  --color-admiral-blue-100: #dfeaff;
  --color-admiral-blue-200: #c8d5ef;
  --color-admiral-blue-300: #afbeda;
  --color-admiral-blue-400: #8d9dbb;
  --color-admiral-blue-500: #71809f;
  --color-admiral-blue-600: #566582;
  --color-admiral-blue-700: #435069;
  --color-admiral-blue-800: #333e54;
  --color-admiral-blue-900: #263042;
  --color-admiral-blue-950: #171d2a;
  --color-total-eclipse: #2f363f;
  --color-total-eclipse-50: #f1f6fc;
  --color-total-eclipse-100: #e6ecf3;
  --color-total-eclipse-200: #d1d8e1;
  --color-total-eclipse-300: #bac2cb;
  --color-total-eclipse-400: #9ba3ad;
  --color-total-eclipse-500: #808893;
  --color-total-eclipse-600: #666e78;
  --color-total-eclipse-700: #515861;
  --color-total-eclipse-800: #3f454d;
  --color-total-eclipse-900: #2f363f;
  --color-total-eclipse-950: #1e2227;
}