Beach Glass to Foundation White Color Palette

About this palette

Beach Glass to Foundation White is a 5-color pastel, light palette: #92E0CE (Beach Glass), #F5C68F (Honeyed Glow), #C4ECEB (Gentle Cold), #FFD5D5 (We Peep), #F3EFFF (Foundation White). It mixes turquoise, orange, pink, white tones and feels balanced overall. The strongest text pairing is #F5C68F on #F3EFFF with a contrast ratio of 1.39:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beach Glass	rgb(146, 224, 206)	hsl(166, 56%, 73%)
Honeyed Glow	rgb(245, 198, 143)	hsl(32, 84%, 76%)
Gentle Cold	rgb(196, 236, 235)	hsl(178, 51%, 85%)
We Peep	rgb(255, 213, 213)	hsl(0, 100%, 92%)
Foundation White	rgb(243, 239, 255)	hsl(255, 100%, 97%)

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.

Color blindness preview

CSS variables

/* Beach Glass to Foundation White — https://swatchly.xyz/palette/92e0ce-f5c68f-c4eceb-ffd5d5-f3efff */
:root {
  --beach-glass: #92e0ce;
  --honeyed-glow: #f5c68f;
  --gentle-cold: #c4eceb;
  --we-peep: #ffd5d5;
  --foundation-white: #f3efff;
}

Tailwind CSS v4

/* Beach Glass to Foundation White — https://swatchly.xyz/palette/92e0ce-f5c68f-c4eceb-ffd5d5-f3efff */
@theme {
  --color-beach-glass: #92e0ce;
  --color-beach-glass-50: #cdfaef;
  --color-beach-glass-100: #bdf0e3;
  --color-beach-glass-200: #92e0ce;
  --color-beach-glass-300: #86c9b9;
  --color-beach-glass-400: #61ac9b;
  --color-beach-glass-500: #449282;
  --color-beach-glass-600: #297869;
  --color-beach-glass-700: #146154;
  --color-beach-glass-800: #044e42;
  --color-beach-glass-900: #003c33;
  --color-beach-glass-950: #00261f;
  --color-honeyed-glow: #f5c68f;
  --color-honeyed-glow-50: #ffecd7;
  --color-honeyed-glow-100: #fedfba;
  --color-honeyed-glow-200: #f5c68f;
  --color-honeyed-glow-300: #dbb283;
  --color-honeyed-glow-400: #bf935f;
  --color-honeyed-glow-500: #a47944;
  --color-honeyed-glow-600: #89602b;
  --color-honeyed-glow-700: #704b19;
  --color-honeyed-glow-800: #5b3a0c;
  --color-honeyed-glow-900: #482c04;
  --color-honeyed-glow-950: #2e1a01;
  --color-gentle-cold: #c4eceb;
  --color-gentle-cold-50: #dcf4f3;
  --color-gentle-cold-100: #c4eceb;
  --color-gentle-cold-200: #b9d8d7;
  --color-gentle-cold-300: #a1c3c2;
  --color-gentle-cold-400: #81a6a5;
  --color-gentle-cold-500: #678c8b;
  --color-gentle-cold-600: #4e7272;
  --color-gentle-cold-700: #3b5c5c;
  --color-gentle-cold-800: #2b4848;
  --color-gentle-cold-900: #1f3838;
  --color-gentle-cold-950: #112323;
  --color-we-peep: #ffd5d5;
  --color-we-peep-50: #fffafa;
  --color-we-peep-100: #ffefee;
  --color-we-peep-200: #ffd5d5;
  --color-we-peep-300: #e1bfbf;
  --color-we-peep-400: #c29d9d;
  --color-we-peep-500: #a57f80;
  --color-we-peep-600: #886464;
  --color-we-peep-700: #6d4d4d;
  --color-we-peep-800: #563a3a;
  --color-we-peep-900: #432c2c;
  --color-we-peep-950: #2b1a1a;
  --color-foundation-white: #f3efff;
  --color-foundation-white-50: #f3efff;
  --color-foundation-white-100: #e9e7f1;
  --color-foundation-white-200: #d6d3df;
  --color-foundation-white-300: #c0bdca;
  --color-foundation-white-400: #a29eac;
  --color-foundation-white-500: #878391;
  --color-foundation-white-600: #6d6977;
  --color-foundation-white-700: #56535f;
  --color-foundation-white-800: #43404b;
  --color-foundation-white-900: #34313a;
  --color-foundation-white-950: #201e25;
}