Beach Glass to Venus Violet Color Palette

About this palette

Beach Glass to Venus Violet is a 5-color cool, vintage palette: #97E3CA (Beach Glass), #7E3360 (Pleasure), #2E2B09 (Secret Passage), #A199F5 (Cold Lips), #7A6DB9 (Venus Violet). It mixes turquoise, red, brown, purple tones and feels cool overall. The strongest text pairing is #97E3CA on #2E2B09 with a contrast ratio of 9.66:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beach Glass	rgb(151, 227, 202)	hsl(160, 58%, 74%)
Pleasure	rgb(126, 51, 96)	hsl(324, 42%, 35%)
Secret Passage	rgb(46, 43, 9)	hsl(55, 67%, 11%)
Cold Lips	rgb(161, 153, 245)	hsl(245, 82%, 78%)
Venus Violet	rgb(122, 109, 185)	hsl(250, 35%, 58%)

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.66:1 Very good#97E3CA on #2E2B09
Aa9.66:1 Very good#2E2B09 on #97E3CA
Aa5.72:1 Good#2E2B09 on #A199F5
Aa5.72:1 Good#A199F5 on #2E2B09
Aa5.60:1 Good#97E3CA on #7E3360
Aa5.60:1 Good#7E3360 on #97E3CA
Aa3.32:1 Poor#7E3360 on #A199F5
Aa3.32:1 Poor#A199F5 on #7E3360

Color blindness preview

CSS variables

/* Beach Glass to Venus Violet — https://swatchly.xyz/palette/97e3ca-7e3360-2e2b09-a199f5-7a6db9 */
:root {
  --beach-glass: #97e3ca;
  --pleasure: #7e3360;
  --secret-passage: #2e2b09;
  --cold-lips: #a199f5;
  --venus-violet: #7a6db9;
}

Tailwind CSS v4

/* Beach Glass to Venus Violet — https://swatchly.xyz/palette/97e3ca-7e3360-2e2b09-a199f5-7a6db9 */
@theme {
  --color-beach-glass: #97e3ca;
  --color-beach-glass-50: #d1fcec;
  --color-beach-glass-100: #c2f2e1;
  --color-beach-glass-200: #97e3ca;
  --color-beach-glass-300: #8acbb6;
  --color-beach-glass-400: #66ae97;
  --color-beach-glass-500: #48937d;
  --color-beach-glass-600: #2e7964;
  --color-beach-glass-700: #19624f;
  --color-beach-glass-800: #094e3e;
  --color-beach-glass-900: #013d2f;
  --color-beach-glass-950: #00261c;
  --color-pleasure: #7e3360;
  --color-pleasure-50: #fff0f8;
  --color-pleasure-100: #ffe2f0;
  --color-pleasure-200: #ffc2e2;
  --color-pleasure-300: #f0a5ce;
  --color-pleasure-400: #d282af;
  --color-pleasure-500: #b66593;
  --color-pleasure-600: #974b77;
  --color-pleasure-700: #7e3360;
  --color-pleasure-800: #63274b;
  --color-pleasure-900: #4e1c3a;
  --color-pleasure-950: #330f24;
  --color-secret-passage: #2e2b09;
  --color-secret-passage-50: #f8f7e1;
  --color-secret-passage-100: #eeedd5;
  --color-secret-passage-200: #dbd9bd;
  --color-secret-passage-300: #c5c3a3;
  --color-secret-passage-400: #a4a27f;
  --color-secret-passage-500: #878561;
  --color-secret-passage-600: #6b6847;
  --color-secret-passage-700: #535032;
  --color-secret-passage-800: #3e3c23;
  --color-secret-passage-900: #2e2b09;
  --color-secret-passage-950: #1a190b;
  --color-cold-lips: #a199f5;
  --color-cold-lips-50: #f6f6ff;
  --color-cold-lips-100: #ececff;
  --color-cold-lips-200: #d8d6ff;
  --color-cold-lips-300: #c0bdff;
  --color-cold-lips-400: #a199f5;
  --color-cold-lips-500: #857cd5;
  --color-cold-lips-600: #6b61b6;
  --color-cold-lips-700: #544a98;
  --color-cold-lips-800: #41377b;
  --color-cold-lips-900: #312962;
  --color-cold-lips-950: #1e1740;
  --color-venus-violet: #7a6db9;
  --color-venus-violet-50: #f2f1ff;
  --color-venus-violet-100: #e6e3ff;
  --color-venus-violet-200: #d0c9ff;
  --color-venus-violet-300: #b7adf6;
  --color-venus-violet-400: #978bd8;
  --color-venus-violet-500: #7a6db9;
  --color-venus-violet-600: #62559c;
  --color-venus-violet-700: #4e4282;
  --color-venus-violet-800: #3d326a;
  --color-venus-violet-900: #302655;
  --color-venus-violet-950: #1e1739;
}