Taupe to Blue Whale Color Palette

About this palette

Taupe to Blue Whale is a 5-color muted, cool, vintage palette: #B4A17C (Taupe), #5F70A9 (Twinkle Night), #EDDBBD (Clam Up), #464D6F (Intergalactic), #273143 (Blue Whale). It mixes yellow, blue tones and feels cool overall. The strongest text pairing is #EDDBBD on #273143 with a contrast ratio of 9.63:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Taupe	rgb(180, 161, 124)	hsl(40, 27%, 60%)
Twinkle Night	rgb(95, 112, 169)	hsl(226, 30%, 52%)
Clam Up	rgb(237, 219, 189)	hsl(37, 57%, 84%)
Intergalactic	rgb(70, 77, 111)	hsl(230, 23%, 35%)
Blue Whale	rgb(39, 49, 67)	hsl(219, 26%, 21%)

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.63:1 Very good#EDDBBD on #273143
Aa9.63:1 Very good#273143 on #EDDBBD
Aa6.06:1 Good#EDDBBD on #464D6F
Aa6.06:1 Good#464D6F on #EDDBBD
Aa5.18:1 Good#B4A17C on #273143
Aa5.18:1 Good#273143 on #B4A17C
Aa3.53:1 Poor#5F70A9 on #EDDBBD
Aa3.53:1 Poor#EDDBBD on #5F70A9

Color blindness preview

CSS variables

/* Taupe to Blue Whale — https://swatchly.xyz/palette/b4a17c-5f70a9-eddbbd-464d6f-273143 */
:root {
  --taupe: #b4a17c;
  --twinkle-night: #5f70a9;
  --clam-up: #eddbbd;
  --intergalactic: #464d6f;
  --blue-whale: #273143;
}

Tailwind CSS v4

/* Taupe to Blue Whale — https://swatchly.xyz/palette/b4a17c-5f70a9-eddbbd-464d6f-273143 */
@theme {
  --color-taupe: #b4a17c;
  --color-taupe-50: #fff5e1;
  --color-taupe-100: #f7ebd3;
  --color-taupe-200: #e6d7bb;
  --color-taupe-300: #d1c1a1;
  --color-taupe-400: #b4a17c;
  --color-taupe-500: #988561;
  --color-taupe-600: #7c6b48;
  --color-taupe-700: #645434;
  --color-taupe-800: #4f4125;
  --color-taupe-900: #3d311a;
  --color-taupe-950: #261e0d;
  --color-twinkle-night: #5f70a9;
  --color-twinkle-night-50: #f1f5ff;
  --color-twinkle-night-100: #e6ecff;
  --color-twinkle-night-200: #cdd9ff;
  --color-twinkle-night-300: #b2c3f8;
  --color-twinkle-night-400: #92a4de;
  --color-twinkle-night-500: #788ac4;
  --color-twinkle-night-600: #5f70a9;
  --color-twinkle-night-700: #49588c;
  --color-twinkle-night-800: #374471;
  --color-twinkle-night-900: #29335a;
  --color-twinkle-night-950: #181f3b;
  --color-clam-up: #eddbbd;
  --color-clam-up-50: #fff8ed;
  --color-clam-up-100: #f9efdd;
  --color-clam-up-200: #eddbbd;
  --color-clam-up-300: #d2c4ab;
  --color-clam-up-400: #b3a388;
  --color-clam-up-500: #97866b;
  --color-clam-up-600: #7b6b51;
  --color-clam-up-700: #62543c;
  --color-clam-up-800: #4d402b;
  --color-clam-up-900: #3c311f;
  --color-clam-up-950: #261e11;
  --color-intergalactic: #464d6f;
  --color-intergalactic-50: #f2f5ff;
  --color-intergalactic-100: #e5eaff;
  --color-intergalactic-200: #ced5f3;
  --color-intergalactic-300: #b5bddf;
  --color-intergalactic-400: #949cc1;
  --color-intergalactic-500: #7780a5;
  --color-intergalactic-600: #5d6487;
  --color-intergalactic-700: #464d6f;
  --color-intergalactic-800: #363c56;
  --color-intergalactic-900: #292e44;
  --color-intergalactic-950: #181c2b;
  --color-blue-whale: #273143;
  --color-blue-whale-50: #f0f5ff;
  --color-blue-whale-100: #e3ecfa;
  --color-blue-whale-200: #ced8e9;
  --color-blue-whale-300: #b6c1d5;
  --color-blue-whale-400: #96a2b7;
  --color-blue-whale-500: #7a869b;
  --color-blue-whale-600: #606b7f;
  --color-blue-whale-700: #4a5466;
  --color-blue-whale-800: #384151;
  --color-blue-whale-900: #273143;
  --color-blue-whale-950: #191e27;
}