Noir Mystique to Fresh Gum Color Palette

About this palette

Noir Mystique to Fresh Gum is a 5-color warm, vintage palette: #221902 (Noir Mystique), #614A00 (Very Coffee), #008B99 (Waikiki), #00BEE8 (Blue Bikini), #FFADE7 (Fresh Gum). It mixes brown, turquoise, blue, pink tones and feels warm overall. The strongest text pairing is #221902 on #FFADE7 with a contrast ratio of 10.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Noir Mystique	rgb(34, 25, 2)	hsl(43, 89%, 7%)
Very Coffee	rgb(97, 74, 0)	hsl(46, 100%, 19%)
Waikiki	rgb(0, 139, 153)	hsl(185, 100%, 30%)
Blue Bikini	rgb(0, 190, 232)	hsl(191, 100%, 45%)
Fresh Gum	rgb(255, 173, 231)	hsl(318, 100%, 84%)

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.

Aa10.25:1 Very good#221902 on #FFADE7
Aa10.25:1 Very good#FFADE7 on #221902
Aa7.89:1 Very good#221902 on #00BEE8
Aa7.89:1 Very good#00BEE8 on #221902
Aa4.98:1 Good#614A00 on #FFADE7
Aa4.98:1 Good#FFADE7 on #614A00
Aa4.27:1 Poor#221902 on #008B99
Aa4.27:1 Poor#008B99 on #221902

Color blindness preview

CSS variables

/* Noir Mystique to Fresh Gum — https://swatchly.xyz/palette/221902-614a00-008b99-00bee8-ffade7 */
:root {
  --noir-mystique: #221902;
  --very-coffee: #614a00;
  --waikiki: #008b99;
  --blue-bikini: #00bee8;
  --fresh-gum: #ffade7;
}

Tailwind CSS v4

/* Noir Mystique to Fresh Gum — https://swatchly.xyz/palette/221902-614a00-008b99-00bee8-ffade7 */
@theme {
  --color-noir-mystique: #221902;
  --color-noir-mystique-50: #fbf5e4;
  --color-noir-mystique-100: #f2ebd8;
  --color-noir-mystique-200: #e0d7c1;
  --color-noir-mystique-300: #cac0a8;
  --color-noir-mystique-400: #aba186;
  --color-noir-mystique-500: #8f8469;
  --color-noir-mystique-600: #73694f;
  --color-noir-mystique-700: #5b523a;
  --color-noir-mystique-800: #463e2a;
  --color-noir-mystique-900: #342e1d;
  --color-noir-mystique-950: #221902;
  --color-very-coffee: #614a00;
  --color-very-coffee-50: #fff4db;
  --color-very-coffee-100: #faeac3;
  --color-very-coffee-200: #e8d4a6;
  --color-very-coffee-300: #d2bc86;
  --color-very-coffee-400: #b39a5f;
  --color-very-coffee-500: #967e40;
  --color-very-coffee-600: #796225;
  --color-very-coffee-700: #614a00;
  --color-very-coffee-800: #4b3a05;
  --color-very-coffee-900: #3b2c01;
  --color-very-coffee-950: #251a00;
  --color-waikiki: #008b99;
  --color-waikiki-50: #d9faff;
  --color-waikiki-100: #b5f4fd;
  --color-waikiki-200: #93e0eb;
  --color-waikiki-300: #6ec9d6;
  --color-waikiki-400: #3da9b7;
  --color-waikiki-500: #008b99;
  --color-waikiki-600: #00707c;
  --color-waikiki-700: #005963;
  --color-waikiki-800: #00464e;
  --color-waikiki-900: #00373d;
  --color-waikiki-950: #002327;
  --color-blue-bikini: #00bee8;
  --color-blue-bikini-50: #f0fbff;
  --color-blue-bikini-100: #dcf6ff;
  --color-blue-bikini-200: #aceaff;
  --color-blue-bikini-300: #6ddafd;
  --color-blue-bikini-400: #00bee8;
  --color-blue-bikini-500: #009ec1;
  --color-blue-bikini-600: #007f9c;
  --color-blue-bikini-700: #00647c;
  --color-blue-bikini-800: #004d60;
  --color-blue-bikini-900: #003b4a;
  --color-blue-bikini-950: #00242e;
  --color-fresh-gum: #ffade7;
  --color-fresh-gum-50: #fff9fd;
  --color-fresh-gum-100: #ffecf9;
  --color-fresh-gum-200: #ffd0f0;
  --color-fresh-gum-300: #ffade7;
  --color-fresh-gum-400: #d88ec3;
  --color-fresh-gum-500: #bb6fa6;
  --color-fresh-gum-600: #9c5389;
  --color-fresh-gum-700: #7f3c6e;
  --color-fresh-gum-800: #652b56;
  --color-fresh-gum-900: #4e1e42;
  --color-fresh-gum-950: #33102a;
}