Castaway Beach to Herbal Vapours Color Palette

About this palette

Castaway Beach to Herbal Vapours is a 4-color pastel, light, gradient palette: #CBC19A (Castaway Beach), #D0DDAF (Zombie), #FADECB (Coral Kiss), #E3FBC4 (Herbal Vapours). It mixes yellow, green, orange tones and feels balanced overall. The strongest text pairing is #CBC19A on #E3FBC4 with a contrast ratio of 1.62:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castaway Beach	rgb(203, 193, 154)	hsl(48, 32%, 70%)
Zombie	rgb(208, 221, 175)	hsl(77, 40%, 78%)
Coral Kiss	rgb(250, 222, 203)	hsl(24, 82%, 89%)
Herbal Vapours	rgb(227, 251, 196)	hsl(86, 87%, 88%)

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 Herbal Vapours — https://swatchly.xyz/palette/cbc19a-d0ddaf-fadecb-e3fbc4 */
:root {
  --castaway-beach: #cbc19a;
  --zombie: #d0ddaf;
  --coral-kiss: #fadecb;
  --herbal-vapours: #e3fbc4;
}

Tailwind CSS v4

/* Castaway Beach to Herbal Vapours — https://swatchly.xyz/palette/cbc19a-d0ddaf-fadecb-e3fbc4 */
@theme {
  --color-castaway-beach: #cbc19a;
  --color-castaway-beach-50: #fbf5df;
  --color-castaway-beach-100: #f2ebd3;
  --color-castaway-beach-200: #dfd8ba;
  --color-castaway-beach-300: #cbc19a;
  --color-castaway-beach-400: #aba27d;
  --color-castaway-beach-500: #908661;
  --color-castaway-beach-600: #756c48;
  --color-castaway-beach-700: #5e5535;
  --color-castaway-beach-800: #4a4226;
  --color-castaway-beach-900: #39331a;
  --color-castaway-beach-950: #241f0e;
  --color-zombie: #d0ddaf;
  --color-zombie-50: #f1f8de;
  --color-zombie-100: #e6efd2;
  --color-zombie-200: #d0ddaf;
  --color-zombie-300: #bbc69f;
  --color-zombie-400: #9ba77d;
  --color-zombie-500: #808c61;
  --color-zombie-600: #667148;
  --color-zombie-700: #505a35;
  --color-zombie-800: #3e4726;
  --color-zombie-900: #2f361a;
  --color-zombie-950: #1d220e;
  --color-coral-kiss: #fadecb;
  --color-coral-kiss-50: #fcece0;
  --color-coral-kiss-100: #fadecb;
  --color-coral-kiss-200: #e2cdbf;
  --color-coral-kiss-300: #cfb7a7;
  --color-coral-kiss-400: #b29987;
  --color-coral-kiss-500: #977e6d;
  --color-coral-kiss-600: #7d6555;
  --color-coral-kiss-700: #665041;
  --color-coral-kiss-800: #513e31;
  --color-coral-kiss-900: #3f2f24;
  --color-coral-kiss-950: #281d15;
  --color-herbal-vapours: #e3fbc4;
  --color-herbal-vapours-50: #e3fbc4;
  --color-herbal-vapours-100: #dfeecb;
  --color-herbal-vapours-200: #cadcb4;
  --color-herbal-vapours-300: #b3c79a;
  --color-herbal-vapours-400: #94a977;
  --color-herbal-vapours-500: #798e5c;
  --color-herbal-vapours-600: #607443;
  --color-herbal-vapours-700: #4b5d30;
  --color-herbal-vapours-800: #394922;
  --color-herbal-vapours-900: #2b3817;
  --color-herbal-vapours-950: #1a230b;
}