Summer Crush to Dark Orchestra Color Palette

About this palette

Summer Crush to Dark Orchestra is a 5-color muted, gradient palette: #F5D7DC (Summer Crush), #BCA581 (Taupe), #3D7C6E (Pearl Green), #4C5166 (Intergalactic), #281B1E (Dark Orchestra). It mixes gray, yellow, turquoise, blue tones and feels cool overall. The strongest text pairing is #F5D7DC on #281B1E with a contrast ratio of 12.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Summer Crush	rgb(245, 215, 220)	hsl(350, 60%, 90%)
Taupe	rgb(188, 165, 129)	hsl(37, 31%, 62%)
Pearl Green	rgb(61, 124, 110)	hsl(167, 34%, 36%)
Intergalactic	rgb(76, 81, 102)	hsl(228, 15%, 35%)
Dark Orchestra	rgb(40, 27, 30)	hsl(346, 19%, 13%)

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.

Aa12.35:1 Super#F5D7DC on #281B1E
Aa12.35:1 Super#281B1E on #F5D7DC
Aa6.98:1 Good#BCA581 on #281B1E
Aa6.98:1 Good#281B1E on #BCA581
Aa5.84:1 Good#F5D7DC on #4C5166
Aa5.84:1 Good#4C5166 on #F5D7DC
Aa3.63:1 Poor#F5D7DC on #3D7C6E
Aa3.63:1 Poor#3D7C6E on #F5D7DC

Color blindness preview

CSS variables

/* Summer Crush to Dark Orchestra — https://swatchly.xyz/palette/f5d7dc-bca581-3d7c6e-4c5166-281b1e */
:root {
  --summer-crush: #f5d7dc;
  --taupe: #bca581;
  --pearl-green: #3d7c6e;
  --intergalactic: #4c5166;
  --dark-orchestra: #281b1e;
}

Tailwind CSS v4

/* Summer Crush to Dark Orchestra — https://swatchly.xyz/palette/f5d7dc-bca581-3d7c6e-4c5166-281b1e */
@theme {
  --color-summer-crush: #f5d7dc;
  --color-summer-crush-50: #fff9fa;
  --color-summer-crush-100: #ffedf0;
  --color-summer-crush-200: #f5d7dc;
  --color-summer-crush-300: #d9c1c5;
  --color-summer-crush-400: #ba9fa3;
  --color-summer-crush-500: #9d8287;
  --color-summer-crush-600: #80666b;
  --color-summer-crush-700: #664f53;
  --color-summer-crush-800: #503c40;
  --color-summer-crush-900: #3e2e31;
  --color-summer-crush-950: #281b1e;
  --color-taupe: #bca581;
  --color-taupe-50: #fff6e9;
  --color-taupe-100: #fbedd7;
  --color-taupe-200: #ebdac0;
  --color-taupe-300: #d8c4a6;
  --color-taupe-400: #bca581;
  --color-taupe-500: #9e8865;
  --color-taupe-600: #826d4b;
  --color-taupe-700: #685536;
  --color-taupe-800: #524126;
  --color-taupe-900: #3f311a;
  --color-taupe-950: #271d0d;
  --color-pearl-green: #3d7c6e;
  --color-pearl-green-50: #dbfef5;
  --color-pearl-green-100: #cff6eb;
  --color-pearl-green-200: #b6e4d8;
  --color-pearl-green-300: #9acfc2;
  --color-pearl-green-400: #76b2a3;
  --color-pearl-green-500: #589788;
  --color-pearl-green-600: #3d7c6e;
  --color-pearl-green-700: #296357;
  --color-pearl-green-800: #194e44;
  --color-pearl-green-900: #0e3d34;
  --color-pearl-green-950: #052620;
  --color-intergalactic: #4c5166;
  --color-intergalactic-50: #f2f5ff;
  --color-intergalactic-100: #e6eafa;
  --color-intergalactic-200: #d1d6e9;
  --color-intergalactic-300: #b9bfd4;
  --color-intergalactic-400: #999fb6;
  --color-intergalactic-500: #7d839a;
  --color-intergalactic-600: #63687d;
  --color-intergalactic-700: #4c5166;
  --color-intergalactic-800: #3b3f50;
  --color-intergalactic-900: #2d303e;
  --color-intergalactic-950: #1b1d27;
  --color-dark-orchestra: #281b1e;
  --color-dark-orchestra-50: #fdf2f4;
  --color-dark-orchestra-100: #f3e8ea;
  --color-dark-orchestra-200: #e1d3d6;
  --color-dark-orchestra-300: #ccbcbf;
  --color-dark-orchestra-400: #ad9ca0;
  --color-dark-orchestra-500: #928185;
  --color-dark-orchestra-600: #77676a;
  --color-dark-orchestra-700: #5f5154;
  --color-dark-orchestra-800: #4b3e41;
  --color-dark-orchestra-900: #3a3032;
  --color-dark-orchestra-950: #281b1e;
}