Genie to Nylon Color Palette

About this palette

Genie to Nylon is a 5-color muted, warm, earthy, vintage palette: #433F5B (Genie), #6F7056 (Secret Path), #928B67 (Paid in Full), #C5BFDB (New Love), #E7E6C9 (Nylon). It mixes purple, brown, yellow tones and feels warm overall. The strongest text pairing is #433F5B on #E7E6C9 with a contrast ratio of 7.88:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Genie	rgb(67, 63, 91)	hsl(249, 18%, 30%)
Secret Path	rgb(111, 112, 86)	hsl(62, 13%, 39%)
Paid in Full	rgb(146, 139, 103)	hsl(50, 17%, 49%)
New Love	rgb(197, 191, 219)	hsl(253, 28%, 80%)
Nylon	rgb(231, 230, 201)	hsl(58, 38%, 85%)

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.88:1 Very good#433F5B on #E7E6C9
Aa7.88:1 Very good#E7E6C9 on #433F5B
Aa5.64:1 Good#433F5B on #C5BFDB
Aa5.64:1 Good#C5BFDB on #433F5B
Aa4.01:1 Poor#6F7056 on #E7E6C9
Aa4.01:1 Poor#E7E6C9 on #6F7056

Color blindness preview

CSS variables

/* Genie to Nylon — https://swatchly.xyz/palette/433f5b-6f7056-928b67-c5bfdb-e7e6c9 */
:root {
  --genie: #433f5b;
  --secret-path: #6f7056;
  --paid-in-full: #928b67;
  --new-love: #c5bfdb;
  --nylon: #e7e6c9;
}

Tailwind CSS v4

/* Genie to Nylon — https://swatchly.xyz/palette/433f5b-6f7056-928b67-c5bfdb-e7e6c9 */
@theme {
  --color-genie: #433f5b;
  --color-genie-50: #f5f4ff;
  --color-genie-100: #eae8fe;
  --color-genie-200: #d7d4ee;
  --color-genie-300: #c0bdda;
  --color-genie-400: #a19dbd;
  --color-genie-500: #8682a2;
  --color-genie-600: #6c6886;
  --color-genie-700: #56526d;
  --color-genie-800: #433f5b;
  --color-genie-900: #333145;
  --color-genie-950: #201e2c;
  --color-secret-path: #6f7056;
  --color-secret-path-50: #f6f7e7;
  --color-secret-path-100: #eceddb;
  --color-secret-path-200: #d9dac5;
  --color-secret-path-300: #c3c4ac;
  --color-secret-path-400: #a4a58b;
  --color-secret-path-500: #898a6f;
  --color-secret-path-600: #6f7056;
  --color-secret-path-700: #585941;
  --color-secret-path-800: #454531;
  --color-secret-path-900: #353524;
  --color-secret-path-950: #202114;
  --color-paid-in-full: #928b67;
  --color-paid-in-full-50: #faf7e2;
  --color-paid-in-full-100: #f2edd6;
  --color-paid-in-full-200: #e0dbbf;
  --color-paid-in-full-300: #cbc5a5;
  --color-paid-in-full-400: #ada683;
  --color-paid-in-full-500: #928b67;
  --color-paid-in-full-600: #76704d;
  --color-paid-in-full-700: #5f5839;
  --color-paid-in-full-800: #4a4529;
  --color-paid-in-full-900: #39341d;
  --color-paid-in-full-950: #23200f;
  --color-new-love: #c5bfdb;
  --color-new-love-50: #f7f5ff;
  --color-new-love-100: #eeeafc;
  --color-new-love-200: #dbd6eb;
  --color-new-love-300: #c5bfdb;
  --color-new-love-400: #a59fb9;
  --color-new-love-500: #89839e;
  --color-new-love-600: #6e6982;
  --color-new-love-700: #575269;
  --color-new-love-800: #443f53;
  --color-new-love-900: #343040;
  --color-new-love-950: #201d29;
  --color-nylon: #e7e6c9;
  --color-nylon-50: #f1f0df;
  --color-nylon-100: #e7e6c9;
  --color-nylon-200: #d4d3bd;
  --color-nylon-300: #bfbea6;
  --color-nylon-400: #a1a086;
  --color-nylon-500: #87866b;
  --color-nylon-600: #6d6c53;
  --color-nylon-700: #585740;
  --color-nylon-800: #454430;
  --color-nylon-900: #353423;
  --color-nylon-950: #212014;
}