Beach Glass to Solar Color Palette

About this palette

Beach Glass to Solar is a 5-color pastel, light, cool palette: #91E3CF (Beach Glass), #BBC9F4 (Frost Fairy), #EFD8F6 (Scented Spring), #C6EDDF (Fresh Breeze), #FCEAB9 (Solar). It mixes turquoise, blue, purple, yellow tones and feels cool overall. The strongest text pairing is #BBC9F4 on #FCEAB9 with a contrast ratio of 1.38:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Beach Glass	rgb(145, 227, 207)	hsl(165, 59%, 73%)
Frost Fairy	rgb(187, 201, 244)	hsl(225, 72%, 85%)
Scented Spring	rgb(239, 216, 246)	hsl(286, 63%, 91%)
Fresh Breeze	rgb(198, 237, 223)	hsl(158, 52%, 85%)
Solar	rgb(252, 234, 185)	hsl(44, 92%, 86%)

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 Solar — https://swatchly.xyz/palette/91e3cf-bbc9f4-efd8f6-c6eddf-fceab9 */
:root {
  --beach-glass: #91e3cf;
  --frost-fairy: #bbc9f4;
  --scented-spring: #efd8f6;
  --fresh-breeze: #c6eddf;
  --solar: #fceab9;
}

Tailwind CSS v4

/* Beach Glass to Solar — https://swatchly.xyz/palette/91e3cf-bbc9f4-efd8f6-c6eddf-fceab9 */
@theme {
  --color-beach-glass: #91e3cf;
  --color-beach-glass-50: #cefcef;
  --color-beach-glass-100: #bef2e4;
  --color-beach-glass-200: #91e3cf;
  --color-beach-glass-300: #85cbba;
  --color-beach-glass-400: #5fae9c;
  --color-beach-glass-500: #419482;
  --color-beach-glass-600: #257969;
  --color-beach-glass-700: #0d6253;
  --color-beach-glass-800: #004e42;
  --color-beach-glass-900: #003c32;
  --color-beach-glass-950: #00261f;
  --color-frost-fairy: #bbc9f4;
  --color-frost-fairy-50: #f8faff;
  --color-frost-fairy-100: #edf1ff;
  --color-frost-fairy-200: #d5dffd;
  --color-frost-fairy-300: #bbc9f4;
  --color-frost-fairy-400: #9ba8cf;
  --color-frost-fairy-500: #7e8bb2;
  --color-frost-fairy-600: #626e95;
  --color-frost-fairy-700: #4c5679;
  --color-frost-fairy-800: #394260;
  --color-frost-fairy-900: #2a314b;
  --color-frost-fairy-950: #191e30;
  --color-scented-spring: #efd8f6;
  --color-scented-spring-50: #fefaff;
  --color-scented-spring-100: #fbeeff;
  --color-scented-spring-200: #efd8f6;
  --color-scented-spring-300: #d4c1d9;
  --color-scented-spring-400: #b49fba;
  --color-scented-spring-500: #97829d;
  --color-scented-spring-600: #7a6680;
  --color-scented-spring-700: #614f67;
  --color-scented-spring-800: #4b3c50;
  --color-scented-spring-900: #3a2d3e;
  --color-scented-spring-950: #251b28;
  --color-fresh-breeze: #c6eddf;
  --color-fresh-breeze-50: #ddf4ec;
  --color-fresh-breeze-100: #c6eddf;
  --color-fresh-breeze-200: #bbd8ce;
  --color-fresh-breeze-300: #a3c4b8;
  --color-fresh-breeze-400: #83a79a;
  --color-fresh-breeze-500: #698d80;
  --color-fresh-breeze-600: #507367;
  --color-fresh-breeze-700: #3d5d52;
  --color-fresh-breeze-800: #2d4940;
  --color-fresh-breeze-900: #213831;
  --color-fresh-breeze-950: #12231e;
  --color-solar: #fceab9;
  --color-solar-50: #fef5da;
  --color-solar-100: #fceab9;
  --color-solar-200: #e4d7b3;
  --color-solar-300: #cfc098;
  --color-solar-400: #b1a074;
  --color-solar-500: #958557;
  --color-solar-600: #7a6a3e;
  --color-solar-700: #62542b;
  --color-solar-800: #4e411d;
  --color-solar-900: #3c3213;
  --color-solar-950: #261e08;
}