Castaway Beach to Holographic Lavender Color Palette

About this palette

Castaway Beach to Holographic Lavender is a 4-color pastel, light, cool, gradient palette: #CEC099 (Castaway Beach), #B5DFD4 (Jade Sea), #C3FBCA (Toxic Steam), #EDE5FF (Holographic Lavender). It mixes yellow, turquoise, green, purple tones and feels cool overall. The strongest text pairing is #CEC099 on #C3FBCA with a contrast ratio of 1.55:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castaway Beach	rgb(206, 192, 153)	hsl(44, 35%, 70%)
Jade Sea	rgb(181, 223, 212)	hsl(164, 40%, 79%)
Toxic Steam	rgb(195, 251, 202)	hsl(128, 88%, 87%)
Holographic Lavender	rgb(237, 229, 255)	hsl(258, 100%, 95%)

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

/* Castaway Beach to Holographic Lavender — https://swatchly.xyz/palette/cec099-b5dfd4-c3fbca-ede5ff */
:root {
  --castaway-beach: #cec099;
  --jade-sea: #b5dfd4;
  --toxic-steam: #c3fbca;
  --holographic-lavender: #ede5ff;
}

Tailwind CSS v4

/* Castaway Beach to Holographic Lavender — https://swatchly.xyz/palette/cec099-b5dfd4-c3fbca-ede5ff */
@theme {
  --color-castaway-beach: #cec099;
  --color-castaway-beach-50: #fdf5df;
  --color-castaway-beach-100: #f4ebd2;
  --color-castaway-beach-200: #e1d7ba;
  --color-castaway-beach-300: #cec099;
  --color-castaway-beach-400: #aea17c;
  --color-castaway-beach-500: #928560;
  --color-castaway-beach-600: #776b47;
  --color-castaway-beach-700: #605434;
  --color-castaway-beach-800: #4c4125;
  --color-castaway-beach-900: #3b321a;
  --color-castaway-beach-950: #251f0d;
  --color-jade-sea: #b5dfd4;
  --color-jade-sea-50: #e2f9f3;
  --color-jade-sea-100: #d5efe8;
  --color-jade-sea-200: #b5dfd4;
  --color-jade-sea-300: #a4c7be;
  --color-jade-sea-400: #82a99f;
  --color-jade-sea-500: #678e84;
  --color-jade-sea-600: #4e746b;
  --color-jade-sea-700: #3a5d55;
  --color-jade-sea-800: #2b4942;
  --color-jade-sea-900: #1e3933;
  --color-jade-sea-950: #10231f;
  --color-toxic-steam: #c3fbca;
  --color-toxic-steam-50: #dffee3;
  --color-toxic-steam-100: #c3fbca;
  --color-toxic-steam-200: #bae3bf;
  --color-toxic-steam-300: #a0cea6;
  --color-toxic-steam-400: #7db084;
  --color-toxic-steam-500: #609468;
  --color-toxic-steam-600: #47794f;
  --color-toxic-steam-700: #33613b;
  --color-toxic-steam-800: #244d2b;
  --color-toxic-steam-900: #183c1f;
  --color-toxic-steam-950: #0c2611;
  --color-holographic-lavender: #ede5ff;
  --color-holographic-lavender-50: #f6f1ff;
  --color-holographic-lavender-100: #ede5ff;
  --color-holographic-lavender-200: #d9d3e6;
  --color-holographic-lavender-300: #c3bcd2;
  --color-holographic-lavender-400: #a49cb4;
  --color-holographic-lavender-500: #898199;
  --color-holographic-lavender-600: #6e677d;
  --color-holographic-lavender-700: #585165;
  --color-holographic-lavender-800: #453f50;
  --color-holographic-lavender-900: #35303f;
  --color-holographic-lavender-950: #211d28;
}