Cold Canada to Cold Press Coffee color palette

E0FCFFCold Canada 56DDF1Splashing Wave 5B89E9Olympic Blue 964F00Warm Brown 6B2F05Cold Press Coffee

About this palette

Cold Canada to Cold Press Coffee is a 5-color palette: #E0FCFF (Cold Canada), #56DDF1 (Splashing Wave), #5B89E9 (Olympic Blue), #964F00 (Warm Brown), #6B2F05 (Cold Press Coffee). It mixes white, turquoise, blue, brown tones and feels balanced overall. The strongest text pairing is #E0FCFF on #6B2F05 with a contrast ratio of 9.61:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cold Canada	rgb(224, 252, 255)	hsl(186, 100%, 94%)
Splashing Wave	rgb(86, 221, 241)	hsl(188, 85%, 64%)
Olympic Blue	rgb(91, 137, 233)	hsl(221, 76%, 64%)
Warm Brown	rgb(150, 79, 0)	hsl(32, 100%, 29%)
Cold Press Coffee	rgb(107, 47, 5)	hsl(25, 91%, 22%)

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.61:1 Very good#E0FCFF on #6B2F05
Aa9.61:1 Very good#6B2F05 on #E0FCFF
Aa6.40:1 Good#56DDF1 on #6B2F05
Aa6.40:1 Good#6B2F05 on #56DDF1
Aa5.72:1 Good#E0FCFF on #964F00
Aa5.72:1 Good#964F00 on #E0FCFF
Aa3.81:1 Poor#56DDF1 on #964F00
Aa3.81:1 Poor#964F00 on #56DDF1

Color blindness preview

CSS variables

/* Cold Canada to Cold Press Coffee — https://swatchly.xyz/palette/e0fcff-56ddf1-5b89e9-964f00-6b2f05 */
:root {
  --cold-canada: #e0fcff;
  --splashing-wave: #56ddf1;
  --olympic-blue: #5b89e9;
  --warm-brown: #964f00;
  --cold-press-coffee: #6b2f05;
}

Tailwind CSS v4

/* Cold Canada to Cold Press Coffee — https://swatchly.xyz/palette/e0fcff-56ddf1-5b89e9-964f00-6b2f05 */
@theme {
  --color-cold-canada: #e0fcff;
  --color-cold-canada-50: #e0fcff;
  --color-cold-canada-100: #dfeff1;
  --color-cold-canada-200: #c8dcde;
  --color-cold-canada-300: #afc6c9;
  --color-cold-canada-400: #8ea7aa;
  --color-cold-canada-500: #728c8e;
  --color-cold-canada-600: #597174;
  --color-cold-canada-700: #445a5c;
  --color-cold-canada-800: #334648;
  --color-cold-canada-900: #263638;
  --color-cold-canada-950: #162223;
  --color-splashing-wave: #56ddf1;
  --color-splashing-wave-50: #ecfcff;
  --color-splashing-wave-100: #d1f8ff;
  --color-splashing-wave-200: #99edfb;
  --color-splashing-wave-300: #56ddf1;
  --color-splashing-wave-400: #37bacd;
  --color-splashing-wave-500: #009cae;
  --color-splashing-wave-600: #007d8c;
  --color-splashing-wave-700: #00636f;
  --color-splashing-wave-800: #004d56;
  --color-splashing-wave-900: #003a42;
  --color-splashing-wave-950: #00242a;
  --color-olympic-blue: #5b89e9;
  --color-olympic-blue-50: #f2f7ff;
  --color-olympic-blue-100: #e5eeff;
  --color-olympic-blue-200: #c9dcff;
  --color-olympic-blue-300: #a9c6ff;
  --color-olympic-blue-400: #79a5ff;
  --color-olympic-blue-500: #5b89e9;
  --color-olympic-blue-600: #416cc9;
  --color-olympic-blue-700: #2d54a9;
  --color-olympic-blue-800: #1e408a;
  --color-olympic-blue-900: #132f6f;
  --color-olympic-blue-950: #081c49;
  --color-warm-brown: #964f00;
  --color-warm-brown-50: #fff2ea;
  --color-warm-brown-100: #ffe4d1;
  --color-warm-brown-200: #ffc89f;
  --color-warm-brown-300: #f0ab77;
  --color-warm-brown-400: #d2884d;
  --color-warm-brown-500: #b56b2c;
  --color-warm-brown-600: #964f00;
  --color-warm-brown-700: #783e00;
  --color-warm-brown-800: #5f3000;
  --color-warm-brown-900: #4a2400;
  --color-warm-brown-950: #301500;
  --color-cold-press-coffee: #6b2f05;
  --color-cold-press-coffee-50: #fff2ec;
  --color-cold-press-coffee-100: #ffe5d8;
  --color-cold-press-coffee-200: #ffcbaf;
  --color-cold-press-coffee-300: #efb191;
  --color-cold-press-coffee-400: #d2906c;
  --color-cold-press-coffee-500: #b6744f;
  --color-cold-press-coffee-600: #995a36;
  --color-cold-press-coffee-700: #7e4423;
  --color-cold-press-coffee-800: #6b2f05;
  --color-cold-press-coffee-900: #50260c;
  --color-cold-press-coffee-950: #341604;
}