Sun-Kissed Beach to Shadow Play color palette

E1AB94Sun-Kissed Beach 8F517AGrape Candy 00553FEvergreen 0094ABMunsell Blue FEB5F8Strawberry Buttercream 2D0E06Shadow Play

Open in generator Export PNG, PDF, ASE…

About this palette

Sun-Kissed Beach to Shadow Play is a 6-color vintage palette: #E1AB94 (Sun-Kissed Beach), #8F517A (Grape Candy), #00553F (Evergreen), #0094AB (Munsell Blue), #FEB5F8 (Strawberry Buttercream), #2D0E06 (Shadow Play). It mixes orange, red, turquoise, pink, brown tones and feels balanced overall. The strongest text pairing is #FEB5F8 on #2D0E06 with a contrast ratio of 11.20:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sun-Kissed Beach	rgb(225, 171, 148)	hsl(18, 56%, 73%)
Grape Candy	rgb(143, 81, 122)	hsl(320, 28%, 44%)
Evergreen	rgb(0, 85, 63)	hsl(164, 100%, 17%)
Munsell Blue	rgb(0, 148, 171)	hsl(188, 100%, 34%)
Strawberry Buttercream	rgb(254, 181, 248)	hsl(305, 97%, 85%)
Shadow Play	rgb(45, 14, 6)	hsl(12, 76%, 10%)

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.20:1 Very good#FEB5F8 on #2D0E06
Aa11.20:1 Very good#2D0E06 on #FEB5F8
Aa8.88:1 Very good#E1AB94 on #2D0E06
Aa8.88:1 Very good#2D0E06 on #E1AB94
Aa5.56:1 Good#00553F on #FEB5F8
Aa5.56:1 Good#FEB5F8 on #00553F
Aa4.95:1 Good#0094AB on #2D0E06
Aa4.95:1 Good#2D0E06 on #0094AB

Color blindness preview

CSS variables

/* Sun-Kissed Beach to Shadow Play — https://swatchly.xyz/palette/e1ab94-8f517a-00553f-0094ab-feb5f8-2d0e06 */
:root {
  --sun-kissed-beach: #e1ab94;
  --grape-candy: #8f517a;
  --evergreen: #00553f;
  --munsell-blue: #0094ab;
  --strawberry-buttercream: #feb5f8;
  --shadow-play: #2d0e06;
}

Tailwind CSS v4

/* Sun-Kissed Beach to Shadow Play — https://swatchly.xyz/palette/e1ab94-8f517a-00553f-0094ab-feb5f8-2d0e06 */
@theme {
  --color-sun-kissed-beach: #e1ab94;
  --color-sun-kissed-beach-50: #ffede5;
  --color-sun-kissed-beach-100: #ffded0;
  --color-sun-kissed-beach-200: #f1c6b4;
  --color-sun-kissed-beach-300: #e1ab94;
  --color-sun-kissed-beach-400: #c08e78;
  --color-sun-kissed-beach-500: #a6745e;
  --color-sun-kissed-beach-600: #8a5b47;
  --color-sun-kissed-beach-700: #714734;
  --color-sun-kissed-beach-800: #5c3626;
  --color-sun-kissed-beach-900: #492a1c;
  --color-sun-kissed-beach-950: #2f190f;
  --color-grape-candy: #8f517a;
  --color-grape-candy-50: #fff0f9;
  --color-grape-candy-100: #ffe0f3;
  --color-grape-candy-200: #f9c4e5;
  --color-grape-candy-300: #e6aad0;
  --color-grape-candy-400: #c888b1;
  --color-grape-candy-500: #ac6c95;
  --color-grape-candy-600: #8f517a;
  --color-grape-candy-700: #743d62;
  --color-grape-candy-800: #5d2e4e;
  --color-grape-candy-900: #49213c;
  --color-grape-candy-950: #301326;
  --color-evergreen: #00553f;
  --color-evergreen-50: #dbfff0;
  --color-evergreen-100: #ccf7e5;
  --color-evergreen-200: #b2e5d0;
  --color-evergreen-300: #96d1b9;
  --color-evergreen-400: #72b39a;
  --color-evergreen-500: #549980;
  --color-evergreen-600: #3a7e67;
  --color-evergreen-700: #256751;
  --color-evergreen-800: #00553f;
  --color-evergreen-900: #0a4131;
  --color-evergreen-950: #032a1e;
  --color-munsell-blue: #0094ab;
  --color-munsell-blue-50: #e3faff;
  --color-munsell-blue-100: #c5f4ff;
  --color-munsell-blue-200: #97e5f7;
  --color-munsell-blue-300: #73cfe4;
  --color-munsell-blue-400: #41b0c7;
  --color-munsell-blue-500: #0094ab;
  --color-munsell-blue-600: #00778a;
  --color-munsell-blue-700: #005f6e;
  --color-munsell-blue-800: #004a57;
  --color-munsell-blue-900: #003943;
  --color-munsell-blue-950: #00242b;
  --color-strawberry-buttercream: #feb5f8;
  --color-strawberry-buttercream-50: #ffe9fd;
  --color-strawberry-buttercream-100: #ffd8fb;
  --color-strawberry-buttercream-200: #feb5f8;
  --color-strawberry-buttercream-300: #e2a4dd;
  --color-strawberry-buttercream-400: #c683c1;
  --color-strawberry-buttercream-500: #ab67a6;
  --color-strawberry-buttercream-600: #8f4f8b;
  --color-strawberry-buttercream-700: #753b72;
  --color-strawberry-buttercream-800: #5f2c5c;
  --color-strawberry-buttercream-900: #4b1f48;
  --color-strawberry-buttercream-950: #30112f;
  --color-shadow-play: #2d0e06;
  --color-shadow-play-50: #fff2ee;
  --color-shadow-play-100: #ffe5dd;
  --color-shadow-play-200: #f0cfc6;
  --color-shadow-play-300: #ddb7ad;
  --color-shadow-play-400: #bf978b;
  --color-shadow-play-500: #a27a6e;
  --color-shadow-play-600: #855f54;
  --color-shadow-play-700: #6a483f;
  --color-shadow-play-800: #52352d;
  --color-shadow-play-900: #3e2620;
  --color-shadow-play-950: #2d0e06;
}