Medium Roast to Salty Ice Color Palette

About this palette

Medium Roast to Salty Ice is a 5-color warm, earthy palette: #3A2200 (Medium Roast), #6C4800 (Very Coffee), #3D83D9 (Soothing Sapphire), #EB9900 (Cheddar), #C5E7FF (Salty Ice). It mixes brown, blue, orange tones and feels warm overall. The strongest text pairing is #3A2200 on #C5E7FF with a contrast ratio of 11.53:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Medium Roast	rgb(58, 34, 0)	hsl(35, 100%, 11%)
Very Coffee	rgb(108, 72, 0)	hsl(40, 100%, 21%)
Soothing Sapphire	rgb(61, 131, 217)	hsl(213, 67%, 55%)
Cheddar	rgb(235, 153, 0)	hsl(39, 100%, 46%)
Salty Ice	rgb(197, 231, 255)	hsl(205, 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.

Aa11.53:1 Very good#3A2200 on #C5E7FF
Aa11.53:1 Very good#C5E7FF on #3A2200
Aa6.45:1 Good#3A2200 on #EB9900
Aa6.45:1 Good#EB9900 on #3A2200
Aa6.34:1 Good#6C4800 on #C5E7FF
Aa6.34:1 Good#C5E7FF on #6C4800
Aa3.87:1 Poor#3A2200 on #3D83D9
Aa3.87:1 Poor#3D83D9 on #3A2200

Color blindness preview

CSS variables

/* Medium Roast to Salty Ice — https://swatchly.xyz/palette/3a2200-6c4800-3d83d9-eb9900-c5e7ff */
:root {
  --medium-roast: #3a2200;
  --very-coffee: #6c4800;
  --soothing-sapphire: #3d83d9;
  --cheddar: #eb9900;
  --salty-ice: #c5e7ff;
}

Tailwind CSS v4

/* Medium Roast to Salty Ice — https://swatchly.xyz/palette/3a2200-6c4800-3d83d9-eb9900-c5e7ff */
@theme {
  --color-medium-roast: #3a2200;
  --color-medium-roast-50: #fff3e6;
  --color-medium-roast-100: #fbe8d1;
  --color-medium-roast-200: #ebd3b9;
  --color-medium-roast-300: #d6bc9e;
  --color-medium-roast-400: #b99c7b;
  --color-medium-roast-500: #9f8260;
  --color-medium-roast-600: #856a49;
  --color-medium-roast-700: #6e5536;
  --color-medium-roast-800: #5b4428;
  --color-medium-roast-900: #4a361e;
  --color-medium-roast-950: #3a2200;
  --color-very-coffee: #6c4800;
  --color-very-coffee-50: #fff3e3;
  --color-very-coffee-100: #ffe7c6;
  --color-very-coffee-200: #f0d1a5;
  --color-very-coffee-300: #dcb986;
  --color-very-coffee-400: #be975f;
  --color-very-coffee-500: #a17b40;
  --color-very-coffee-600: #846025;
  --color-very-coffee-700: #6c4800;
  --color-very-coffee-800: #543804;
  --color-very-coffee-900: #422a00;
  --color-very-coffee-950: #2a1900;
  --color-soothing-sapphire: #3d83d9;
  --color-soothing-sapphire-50: #eef5ff;
  --color-soothing-sapphire-100: #dcebff;
  --color-soothing-sapphire-200: #bad8ff;
  --color-soothing-sapphire-300: #92c1ff;
  --color-soothing-sapphire-400: #5ca0f6;
  --color-soothing-sapphire-500: #3d83d9;
  --color-soothing-sapphire-600: #2368ba;
  --color-soothing-sapphire-700: #0e529c;
  --color-soothing-sapphire-800: #003f80;
  --color-soothing-sapphire-900: #003065;
  --color-soothing-sapphire-950: #001e43;
  --color-cheddar: #eb9900;
  --color-cheddar-50: #fff8f0;
  --color-cheddar-100: #ffefdc;
  --color-cheddar-200: #ffd8ab;
  --color-cheddar-300: #ffbc67;
  --color-cheddar-400: #eb9900;
  --color-cheddar-500: #c47f00;
  --color-cheddar-600: #9e6500;
  --color-cheddar-700: #7d4f00;
  --color-cheddar-800: #613d00;
  --color-cheddar-900: #4a2d00;
  --color-cheddar-950: #2e1a00;
  --color-salty-ice: #c5e7ff;
  --color-salty-ice-50: #dcf0ff;
  --color-salty-ice-100: #c5e7ff;
  --color-salty-ice-200: #bad4e6;
  --color-salty-ice-300: #a2bfd4;
  --color-salty-ice-400: #83a2b8;
  --color-salty-ice-500: #68889e;
  --color-salty-ice-600: #516f83;
  --color-salty-ice-700: #3e596c;
  --color-salty-ice-800: #2e4656;
  --color-salty-ice-900: #213643;
  --color-salty-ice-950: #12212b;
}