Beauty and the Beach to Midnight Pie color palette

D2957FBeauty and the Beach 687E40Beyond the Pines 78D3DBWater Nymph 4D4664Nightly Walk 372746Midnight Pie

Open in generator Export PNG, PDF, ASE…

About this palette

Beauty and the Beach to Midnight Pie is a 5-color cool palette: #D2957F (Beauty and the Beach), #687E40 (Beyond the Pines), #78D3DB (Water Nymph), #4D4664 (Nightly Walk), #372746 (Midnight Pie). It mixes orange, green, turquoise, purple tones and feels cool overall. The strongest text pairing is #78D3DB on #372746 with a contrast ratio of 7.88:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beauty and the Beach	rgb(210, 149, 127)	hsl(16, 48%, 66%)
Beyond the Pines	rgb(104, 126, 64)	hsl(81, 33%, 37%)
Water Nymph	rgb(120, 211, 219)	hsl(185, 58%, 66%)
Nightly Walk	rgb(77, 70, 100)	hsl(254, 18%, 33%)
Midnight Pie	rgb(55, 39, 70)	hsl(271, 28%, 21%)

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.

Aa7.88:1 Very good#78D3DB on #372746
Aa7.88:1 Very good#372746 on #78D3DB
Aa5.42:1 Good#D2957F on #372746
Aa5.42:1 Good#372746 on #D2957F
Aa5.11:1 Good#78D3DB on #4D4664
Aa5.11:1 Good#4D4664 on #78D3DB
Aa3.51:1 Poor#D2957F on #4D4664
Aa3.51:1 Poor#4D4664 on #D2957F

Color blindness preview

CSS variables

/* Beauty and the Beach to Midnight Pie — https://swatchly.xyz/palette/d2957f-687e40-78d3db-4d4664-372746 */
:root {
  --beauty-and-the-beach: #d2957f;
  --beyond-the-pines: #687e40;
  --water-nymph: #78d3db;
  --nightly-walk: #4d4664;
  --midnight-pie: #372746;
}

Tailwind CSS v4

/* Beauty and the Beach to Midnight Pie — https://swatchly.xyz/palette/d2957f-687e40-78d3db-4d4664-372746 */
@theme {
  --color-beauty-and-the-beach: #d2957f;
  --color-beauty-and-the-beach-50: #fff4f0;
  --color-beauty-and-the-beach-100: #ffe8e0;
  --color-beauty-and-the-beach-200: #fecebe;
  --color-beauty-and-the-beach-300: #ecb7a4;
  --color-beauty-and-the-beach-400: #d2957f;
  --color-beauty-and-the-beach-500: #b47964;
  --color-beauty-and-the-beach-600: #965e4a;
  --color-beauty-and-the-beach-700: #7a4836;
  --color-beauty-and-the-beach-800: #623626;
  --color-beauty-and-the-beach-900: #4d281a;
  --color-beauty-and-the-beach-950: #31170d;
  --color-beyond-the-pines: #687e40;
  --color-beyond-the-pines-50: #edfcd7;
  --color-beyond-the-pines-100: #e4f4cc;
  --color-beyond-the-pines-200: #d0e3b4;
  --color-beyond-the-pines-300: #bacf99;
  --color-beyond-the-pines-400: #9bb276;
  --color-beyond-the-pines-500: #819859;
  --color-beyond-the-pines-600: #687e40;
  --color-beyond-the-pines-700: #51652b;
  --color-beyond-the-pines-800: #3e4f1b;
  --color-beyond-the-pines-900: #2e3d10;
  --color-beyond-the-pines-950: #1c2606;
  --color-water-nymph: #78d3db;
  --color-water-nymph-50: #defcff;
  --color-water-nymph-100: #c2f7fc;
  --color-water-nymph-200: #a6e6eb;
  --color-water-nymph-300: #78d3db;
  --color-water-nymph-400: #5bb2ba;
  --color-water-nymph-500: #38969e;
  --color-water-nymph-600: #137b82;
  --color-water-nymph-700: #006268;
  --color-water-nymph-800: #004c52;
  --color-water-nymph-900: #003b3f;
  --color-water-nymph-950: #002528;
  --color-nightly-walk: #4d4664;
  --color-nightly-walk-50: #f5f3ff;
  --color-nightly-walk-100: #ece8fe;
  --color-nightly-walk-200: #d9d3ee;
  --color-nightly-walk-300: #c4bedc;
  --color-nightly-walk-400: #a6a0c0;
  --color-nightly-walk-500: #8d86a7;
  --color-nightly-walk-600: #746d8d;
  --color-nightly-walk-700: #5f5876;
  --color-nightly-walk-800: #4d4664;
  --color-nightly-walk-900: #3b364d;
  --color-nightly-walk-950: #252232;
  --color-midnight-pie: #372746;
  --color-midnight-pie-50: #f8f2ff;
  --color-midnight-pie-100: #f1e5fe;
  --color-midnight-pie-200: #dfd1ee;
  --color-midnight-pie-300: #c9b9da;
  --color-midnight-pie-400: #aa98bc;
  --color-midnight-pie-500: #8e7ca0;
  --color-midnight-pie-600: #726184;
  --color-midnight-pie-700: #5a4b6a;
  --color-midnight-pie-800: #463953;
  --color-midnight-pie-900: #372746;
  --color-midnight-pie-950: #201928;
}