Salty Ice to Jazz Color Palette

About this palette

Salty Ice to Jazz is a 5-color warm, vintage palette: #C7E7FF (Salty Ice), #90BFDF (Double Denim), #A07936 (Chai Tea), #8E4F4C (Annatto), #5A292D (Jazz). It mixes blue, yellow, red, brown tones and feels warm overall. The strongest text pairing is #C7E7FF on #5A292D with a contrast ratio of 9.11:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Salty Ice	rgb(199, 231, 255)	hsl(206, 100%, 89%)
Double Denim	rgb(144, 191, 223)	hsl(204, 55%, 72%)
Chai Tea	rgb(160, 121, 54)	hsl(38, 50%, 42%)
Annatto	rgb(142, 79, 76)	hsl(3, 30%, 43%)
Jazz	rgb(90, 41, 45)	hsl(355, 37%, 26%)

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.

Aa9.11:1 Very good#C7E7FF on #5A292D
Aa9.11:1 Very good#5A292D on #C7E7FF
Aa5.98:1 Good#90BFDF on #5A292D
Aa5.98:1 Good#5A292D on #90BFDF
Aa4.83:1 Good#C7E7FF on #8E4F4C
Aa4.83:1 Good#8E4F4C on #C7E7FF
Aa3.17:1 Poor#90BFDF on #8E4F4C
Aa3.17:1 Poor#8E4F4C on #90BFDF

Color blindness preview

CSS variables

/* Salty Ice to Jazz — https://swatchly.xyz/palette/c7e7ff-90bfdf-a07936-8e4f4c-5a292d */
:root {
  --salty-ice: #c7e7ff;
  --double-denim: #90bfdf;
  --chai-tea: #a07936;
  --annatto: #8e4f4c;
  --jazz: #5a292d;
}

Tailwind CSS v4

/* Salty Ice to Jazz — https://swatchly.xyz/palette/c7e7ff-90bfdf-a07936-8e4f4c-5a292d */
@theme {
  --color-salty-ice: #c7e7ff;
  --color-salty-ice-50: #ddf1ff;
  --color-salty-ice-100: #c7e7ff;
  --color-salty-ice-200: #bbd4e6;
  --color-salty-ice-300: #a4bfd4;
  --color-salty-ice-400: #84a2b7;
  --color-salty-ice-500: #6a889d;
  --color-salty-ice-600: #526e83;
  --color-salty-ice-700: #3f596b;
  --color-salty-ice-800: #2f4556;
  --color-salty-ice-900: #223543;
  --color-salty-ice-950: #13212b;
  --color-double-denim: #90bfdf;
  --color-double-denim-50: #e3f3ff;
  --color-double-denim-100: #cceaff;
  --color-double-denim-200: #b1d6ef;
  --color-double-denim-300: #90bfdf;
  --color-double-denim-400: #74a1bf;
  --color-double-denim-500: #5a87a5;
  --color-double-denim-600: #426d8a;
  --color-double-denim-700: #305871;
  --color-double-denim-800: #22455c;
  --color-double-denim-900: #183649;
  --color-double-denim-950: #0b222f;
  --color-chai-tea: #a07936;
  --color-chai-tea-50: #fff2df;
  --color-chai-tea-100: #ffe5bd;
  --color-chai-tea-200: #efcf9e;
  --color-chai-tea-300: #dbb77e;
  --color-chai-tea-400: #bd9656;
  --color-chai-tea-500: #a07936;
  --color-chai-tea-600: #85601c;
  --color-chai-tea-700: #6c4b05;
  --color-chai-tea-800: #563a00;
  --color-chai-tea-900: #432c00;
  --color-chai-tea-950: #2b1b00;
  --color-annatto: #8e4f4c;
  --color-annatto-50: #fff2f0;
  --color-annatto-100: #ffe2df;
  --color-annatto-200: #fcc4c0;
  --color-annatto-300: #e9aaa6;
  --color-annatto-400: #ca8783;
  --color-annatto-500: #ac6a67;
  --color-annatto-600: #8e4f4c;
  --color-annatto-700: #733d3a;
  --color-annatto-800: #5d2d2c;
  --color-annatto-900: #492220;
  --color-annatto-950: #301312;
  --color-jazz: #5a292d;
  --color-jazz-50: #fff1f2;
  --color-jazz-100: #ffe4e4;
  --color-jazz-200: #f9cacb;
  --color-jazz-300: #e6b1b3;
  --color-jazz-400: #cb9294;
  --color-jazz-500: #b0777a;
  --color-jazz-600: #955f61;
  --color-jazz-700: #7c4b4d;
  --color-jazz-800: #673a3d;
  --color-jazz-900: #5a292d;
  --color-jazz-950: #381b1d;
}