Jazz to Bisque color palette

612C26Jazz 775430Chocolate Bells AD6E5AAmaretto CF7E88I Love You Pink F0A0BCPrism Pink FFE1C6Bisque

Open in generator Export PNG, PDF, ASE…

About this palette

Jazz to Bisque is a 6-color warm, vintage, gradient palette: #612C26 (Jazz), #775430 (Chocolate Bells), #AD6E5A (Amaretto), #CF7E88 (I Love You Pink), #F0A0BC (Prism Pink), #FFE1C6 (Bisque). It mixes brown, red, pink, orange tones and feels warm overall. The strongest text pairing is #612C26 on #FFE1C6 with a contrast ratio of 8.88:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jazz	rgb(97, 44, 38)	hsl(6, 44%, 26%)
Chocolate Bells	rgb(119, 84, 48)	hsl(30, 43%, 33%)
Amaretto	rgb(173, 110, 90)	hsl(14, 34%, 52%)
I Love You Pink	rgb(207, 126, 136)	hsl(353, 46%, 65%)
Prism Pink	rgb(240, 160, 188)	hsl(339, 73%, 78%)
Bisque	rgb(255, 225, 198)	hsl(28, 100%, 89%)

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.

Aa8.88:1 Very good#612C26 on #FFE1C6
Aa8.88:1 Very good#FFE1C6 on #612C26
Aa5.52:1 Good#612C26 on #F0A0BC
Aa5.52:1 Good#F0A0BC on #612C26
Aa5.44:1 Good#775430 on #FFE1C6
Aa5.44:1 Good#FFE1C6 on #775430
Aa3.69:1 Poor#612C26 on #CF7E88
Aa3.69:1 Poor#CF7E88 on #612C26

Color blindness preview

CSS variables

/* Jazz to Bisque — https://swatchly.xyz/palette/612c26-775430-ad6e5a-cf7e88-f0a0bc-ffe1c6 */
:root {
  --jazz: #612c26;
  --chocolate-bells: #775430;
  --amaretto: #ad6e5a;
  --i-love-you-pink: #cf7e88;
  --prism-pink: #f0a0bc;
  --bisque: #ffe1c6;
}

Tailwind CSS v4

/* Jazz to Bisque — https://swatchly.xyz/palette/612c26-775430-ad6e5a-cf7e88-f0a0bc-ffe1c6 */
@theme {
  --color-jazz: #612c26;
  --color-jazz-50: #fff2f0;
  --color-jazz-100: #ffe4e0;
  --color-jazz-200: #fccac2;
  --color-jazz-300: #e8b0a8;
  --color-jazz-400: #cb8e86;
  --color-jazz-500: #ae7269;
  --color-jazz-600: #905750;
  --color-jazz-700: #74423b;
  --color-jazz-800: #612c26;
  --color-jazz-900: #48241f;
  --color-jazz-950: #2e1411;
  --color-chocolate-bells: #775430;
  --color-chocolate-bells-50: #fff3e7;
  --color-chocolate-bells-100: #ffe6cf;
  --color-chocolate-bells-200: #f1d3b6;
  --color-chocolate-bells-300: #debd9c;
  --color-chocolate-bells-400: #c29e7a;
  --color-chocolate-bells-500: #a8835e;
  --color-chocolate-bells-600: #8e6a46;
  --color-chocolate-bells-700: #775430;
  --color-chocolate-bells-800: #5e4123;
  --color-chocolate-bells-900: #4a3117;
  --color-chocolate-bells-950: #301e0b;
  --color-amaretto: #ad6e5a;
  --color-amaretto-50: #fff1ec;
  --color-amaretto-100: #ffe2d9;
  --color-amaretto-200: #fcc6b5;
  --color-amaretto-300: #e8ad9a;
  --color-amaretto-400: #ca8b76;
  --color-amaretto-500: #ad6e5a;
  --color-amaretto-600: #905543;
  --color-amaretto-700: #764130;
  --color-amaretto-800: #5f3123;
  --color-amaretto-900: #4c2518;
  --color-amaretto-950: #32150c;
  --color-i-love-you-pink: #cf7e88;
  --color-i-love-you-pink-50: #ffedee;
  --color-i-love-you-pink-100: #ffdde0;
  --color-i-love-you-pink-200: #ffbdc4;
  --color-i-love-you-pink-300: #eda2aa;
  --color-i-love-you-pink-400: #cf7e88;
  --color-i-love-you-pink-500: #b3646f;
  --color-i-love-you-pink-600: #964d57;
  --color-i-love-you-pink-700: #7b3a44;
  --color-i-love-you-pink-800: #642b34;
  --color-i-love-you-pink-900: #501f27;
  --color-i-love-you-pink-950: #361218;
  --color-prism-pink: #f0a0bc;
  --color-prism-pink-50: #ffedf2;
  --color-prism-pink-100: #ffdde7;
  --color-prism-pink-200: #fdbed3;
  --color-prism-pink-300: #f0a0bc;
  --color-prism-pink-400: #ce839e;
  --color-prism-pink-500: #b26883;
  --color-prism-pink-600: #964f6a;
  --color-prism-pink-700: #7b3c54;
  --color-prism-pink-800: #642c42;
  --color-prism-pink-900: #502033;
  --color-prism-pink-950: #341220;
  --color-bisque: #ffe1c6;
  --color-bisque-50: #ffeee0;
  --color-bisque-100: #ffe1c6;
  --color-bisque-200: #e6d0bb;
  --color-bisque-300: #d2b9a3;
  --color-bisque-400: #b59a82;
  --color-bisque-500: #9a7f66;
  --color-bisque-600: #7f664e;
  --color-bisque-700: #67503b;
  --color-bisque-800: #523e2b;
  --color-bisque-900: #402f1f;
  --color-bisque-950: #291c11;
}