Smoky to Bangalore Color Palette

About this palette

Smoky to Bangalore is a 5-color muted palette: #585A6E (Smoky), #987577 (Opium), #CBEFEB (Spa), #0F2023 (Sunken Ship), #B6AE8A (Bangalore). It mixes gray, red, turquoise, yellow tones and feels warm overall. The strongest text pairing is #CBEFEB on #0F2023 with a contrast ratio of 13.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Smoky	rgb(88, 90, 110)	hsl(235, 11%, 39%)
Opium	rgb(152, 117, 119)	hsl(357, 15%, 53%)
Spa	rgb(203, 239, 235)	hsl(173, 53%, 87%)
Sunken Ship	rgb(15, 32, 35)	hsl(189, 40%, 10%)
Bangalore	rgb(182, 174, 138)	hsl(49, 23%, 63%)

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.

Aa13.66:1 Super#CBEFEB on #0F2023
Aa13.66:1 Super#0F2023 on #CBEFEB
Aa7.52:1 Very good#0F2023 on #B6AE8A
Aa7.52:1 Very good#B6AE8A on #0F2023
Aa5.51:1 Good#585A6E on #CBEFEB
Aa5.51:1 Good#CBEFEB on #585A6E
Aa4.11:1 Poor#987577 on #0F2023
Aa4.11:1 Poor#0F2023 on #987577

Color blindness preview

CSS variables

/* Smoky to Bangalore — https://swatchly.xyz/palette/585a6e-987577-cbefeb-0f2023-b6ae8a */
:root {
  --smoky: #585a6e;
  --opium: #987577;
  --spa: #cbefeb;
  --sunken-ship: #0f2023;
  --bangalore: #b6ae8a;
}

Tailwind CSS v4

/* Smoky to Bangalore — https://swatchly.xyz/palette/585a6e-987577-cbefeb-0f2023-b6ae8a */
@theme {
  --color-smoky: #585a6e;
  --color-smoky-50: #f3f4ff;
  --color-smoky-100: #e8eaf9;
  --color-smoky-200: #d5d7e9;
  --color-smoky-300: #c0c2d5;
  --color-smoky-400: #a1a3b9;
  --color-smoky-500: #87899f;
  --color-smoky-600: #6e7084;
  --color-smoky-700: #585a6e;
  --color-smoky-800: #444657;
  --color-smoky-900: #343644;
  --color-smoky-950: #20212b;
  --color-opium: #987577;
  --color-opium-50: #fff0f0;
  --color-opium-100: #fbe2e3;
  --color-opium-200: #e9cbcd;
  --color-opium-300: #d4b3b4;
  --color-opium-400: #b59193;
  --color-opium-500: #987577;
  --color-opium-600: #7d5d5f;
  --color-opium-700: #65484a;
  --color-opium-800: #513839;
  --color-opium-900: #402a2c;
  --color-opium-950: #291a1b;
  --color-spa: #cbefeb;
  --color-spa-50: #e2f6f4;
  --color-spa-100: #cbefeb;
  --color-spa-200: #bfdad7;
  --color-spa-300: #a7c5c2;
  --color-spa-400: #86a7a3;
  --color-spa-500: #6b8c89;
  --color-spa-600: #52726f;
  --color-spa-700: #3f5c59;
  --color-spa-800: #2e4846;
  --color-spa-900: #223835;
  --color-spa-950: #132321;
  --color-sunken-ship: #0f2023;
  --color-sunken-ship-50: #ecf8fa;
  --color-sunken-ship-100: #e1eef0;
  --color-sunken-ship-200: #cbdbde;
  --color-sunken-ship-300: #b3c5c8;
  --color-sunken-ship-400: #92a6a9;
  --color-sunken-ship-500: #768a8d;
  --color-sunken-ship-600: #5c6f72;
  --color-sunken-ship-700: #46575b;
  --color-sunken-ship-800: #354446;
  --color-sunken-ship-900: #273335;
  --color-sunken-ship-950: #0f2023;
  --color-bangalore: #b6ae8a;
  --color-bangalore-50: #fefae6;
  --color-bangalore-100: #f7f2dc;
  --color-bangalore-200: #e6e0c7;
  --color-bangalore-300: #d2ccae;
  --color-bangalore-400: #b6ae8a;
  --color-bangalore-500: #98906e;
  --color-bangalore-600: #7b7452;
  --color-bangalore-700: #625b3c;
  --color-bangalore-800: #4c462b;
  --color-bangalore-900: #3a351e;
  --color-bangalore-950: #231f0f;
}