Ether to Secret Path Color Palette

About this palette

Ether to Secret Path is a 5-color muted palette: #9BB2B6 (Ether), #F5DDEE (Grape Taffy), #594055 (Black Magic), #27251B (Nero), #7A7152 (Secret Path). It mixes gray, purple, brown tones and feels warm overall. The strongest text pairing is #F5DDEE on #27251B with a contrast ratio of 12.04:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ether	rgb(155, 178, 182)	hsl(189, 16%, 66%)
Grape Taffy	rgb(245, 221, 238)	hsl(318, 55%, 91%)
Black Magic	rgb(89, 64, 85)	hsl(310, 16%, 30%)
Nero	rgb(39, 37, 27)	hsl(50, 18%, 13%)
Secret Path	rgb(122, 113, 82)	hsl(46, 20%, 40%)

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.

Aa12.04:1 Super#F5DDEE on #27251B
Aa12.04:1 Super#27251B on #F5DDEE
Aa7.19:1 Very good#F5DDEE on #594055
Aa7.19:1 Very good#594055 on #F5DDEE
Aa6.91:1 Good#9BB2B6 on #27251B
Aa6.91:1 Good#27251B on #9BB2B6
Aa4.12:1 Poor#9BB2B6 on #594055
Aa4.12:1 Poor#594055 on #9BB2B6

Color blindness preview

CSS variables

/* Ether to Secret Path — https://swatchly.xyz/palette/9bb2b6-f5ddee-594055-27251b-7a7152 */
:root {
  --ether: #9bb2b6;
  --grape-taffy: #f5ddee;
  --black-magic: #594055;
  --nero: #27251b;
  --secret-path: #7a7152;
}

Tailwind CSS v4

/* Ether to Secret Path — https://swatchly.xyz/palette/9bb2b6-f5ddee-594055-27251b-7a7152 */
@theme {
  --color-ether: #9bb2b6;
  --color-ether-50: #f0fcfe;
  --color-ether-100: #e7f4f7;
  --color-ether-200: #d3e3e6;
  --color-ether-300: #bccfd2;
  --color-ether-400: #9bb2b6;
  --color-ether-500: #7e9498;
  --color-ether-600: #62777b;
  --color-ether-700: #4b5e62;
  --color-ether-800: #38494c;
  --color-ether-900: #29373a;
  --color-ether-950: #172123;
  --color-grape-taffy: #f5ddee;
  --color-grape-taffy-50: #f9ebf5;
  --color-grape-taffy-100: #f5ddee;
  --color-grape-taffy-200: #dfccd9;
  --color-grape-taffy-300: #cab6c4;
  --color-grape-taffy-400: #ad97a7;
  --color-grape-taffy-500: #927d8c;
  --color-grape-taffy-600: #786472;
  --color-grape-taffy-700: #614f5c;
  --color-grape-taffy-800: #4d3d48;
  --color-grape-taffy-900: #3b2e38;
  --color-grape-taffy-950: #251c23;
  --color-black-magic: #594055;
  --color-black-magic-50: #fff0fc;
  --color-black-magic-100: #f8e4f4;
  --color-black-magic-200: #e6cfe2;
  --color-black-magic-300: #d3b9ce;
  --color-black-magic-400: #b69ab1;
  --color-black-magic-500: #9c8097;
  --color-black-magic-600: #82677d;
  --color-black-magic-700: #6b5267;
  --color-black-magic-800: #594055;
  --color-black-magic-900: #443141;
  --color-black-magic-950: #2c1e2a;
  --color-nero: #27251b;
  --color-nero-50: #f7f5ee;
  --color-nero-100: #edebe3;
  --color-nero-200: #dad8ce;
  --color-nero-300: #c3c1b6;
  --color-nero-400: #a4a296;
  --color-nero-500: #8a887b;
  --color-nero-600: #716e63;
  --color-nero-700: #5b594e;
  --color-nero-800: #49473d;
  --color-nero-900: #3a3830;
  --color-nero-950: #27251b;
  --color-secret-path: #7a7152;
  --color-secret-path-50: #fbf5e2;
  --color-secret-path-100: #f2ecd7;
  --color-secret-path-200: #e1dac1;
  --color-secret-path-300: #ccc4a8;
  --color-secret-path-400: #aea586;
  --color-secret-path-500: #948b6b;
  --color-secret-path-600: #7a7152;
  --color-secret-path-700: #62593d;
  --color-secret-path-800: #4d452d;
  --color-secret-path-900: #3b3520;
  --color-secret-path-950: #252111;
}