Cola to Summer Crush Color Palette

About this palette

Cola to Summer Crush is a 4-color muted, gradient palette: #3F2D1E (Cola), #446D8A (Crashing Waves), #90B9B3 (Treetop), #F3D7DC (Summer Crush). It mixes brown, blue, turquoise, gray tones and feels cool overall. The strongest text pairing is #3F2D1E on #F3D7DC with a contrast ratio of 9.69:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cola	rgb(63, 45, 30)	hsl(27, 35%, 18%)
Crashing Waves	rgb(68, 109, 138)	hsl(205, 34%, 40%)
Treetop	rgb(144, 185, 179)	hsl(171, 23%, 65%)
Summer Crush	rgb(243, 215, 220)	hsl(349, 54%, 90%)

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.69:1 Very good#3F2D1E on #F3D7DC
Aa9.69:1 Very good#F3D7DC on #3F2D1E
Aa6.09:1 Good#3F2D1E on #90B9B3
Aa6.09:1 Good#90B9B3 on #3F2D1E
Aa4.10:1 Poor#446D8A on #F3D7DC
Aa4.10:1 Poor#F3D7DC on #446D8A

Color blindness preview

CSS variables

/* Cola to Summer Crush — https://swatchly.xyz/palette/3f2d1e-446d8a-90b9b3-f3d7dc */
:root {
  --cola: #3f2d1e;
  --crashing-waves: #446d8a;
  --treetop: #90b9b3;
  --summer-crush: #f3d7dc;
}

Tailwind CSS v4

/* Cola to Summer Crush — https://swatchly.xyz/palette/3f2d1e-446d8a-90b9b3-f3d7dc */
@theme {
  --color-cola: #3f2d1e;
  --color-cola-50: #fff3e9;
  --color-cola-100: #f7e8dc;
  --color-cola-200: #e5d4c6;
  --color-cola-300: #d0bdad;
  --color-cola-400: #b29d8c;
  --color-cola-500: #968170;
  --color-cola-600: #7b6656;
  --color-cola-700: #625041;
  --color-cola-800: #4d3d31;
  --color-cola-900: #3f2d1e;
  --color-cola-950: #251c14;
  --color-crashing-waves: #446d8a;
  --color-crashing-waves-50: #ecf7ff;
  --color-crashing-waves-100: #d8eeff;
  --color-crashing-waves-200: #badbf4;
  --color-crashing-waves-300: #9fc4e0;
  --color-crashing-waves-400: #7ba4c3;
  --color-crashing-waves-500: #5f88a6;
  --color-crashing-waves-600: #446d8a;
  --color-crashing-waves-700: #325770;
  --color-crashing-waves-800: #24445a;
  --color-crashing-waves-900: #193447;
  --color-crashing-waves-950: #0d202e;
  --color-treetop: #90b9b3;
  --color-treetop-50: #ebfffc;
  --color-treetop-100: #e1f8f5;
  --color-treetop-200: #cce8e4;
  --color-treetop-300: #b4d5d0;
  --color-treetop-400: #90b9b3;
  --color-treetop-500: #739a95;
  --color-treetop-600: #567d78;
  --color-treetop-700: #3f635f;
  --color-treetop-800: #2d4d49;
  --color-treetop-900: #1f3a37;
  --color-treetop-950: #102321;
  --color-summer-crush: #f3d7dc;
  --color-summer-crush-50: #fff8fa;
  --color-summer-crush-100: #fdedf0;
  --color-summer-crush-200: #f3d7dc;
  --color-summer-crush-300: #d7c1c5;
  --color-summer-crush-400: #b89fa3;
  --color-summer-crush-500: #9b8287;
  --color-summer-crush-600: #7f676b;
  --color-summer-crush-700: #655054;
  --color-summer-crush-800: #4f3d40;
  --color-summer-crush-900: #3e2e31;
  --color-summer-crush-950: #271c1e;
}