Castaway Beach to Calm Waters Color Palette

About this palette

Castaway Beach to Calm Waters is a 5-color pastel, light palette: #D3BF9A (Castaway Beach), #B3D7E2 (Light Blue), #EDD9A1 (Pie Crust), #D2F6D5 (Snowy Mint), #E2FBFF (Calm Waters). It mixes yellow, blue, green, white tones and feels balanced overall. The strongest text pairing is #D3BF9A on #E2FBFF with a contrast ratio of 1.67:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castaway Beach	rgb(211, 191, 154)	hsl(39, 39%, 72%)
Light Blue	rgb(179, 215, 226)	hsl(194, 45%, 79%)
Pie Crust	rgb(237, 217, 161)	hsl(44, 68%, 78%)
Snowy Mint	rgb(210, 246, 213)	hsl(125, 67%, 89%)
Calm Waters	rgb(226, 251, 255)	hsl(188, 100%, 94%)

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 Calm Waters — https://swatchly.xyz/palette/d3bf9a-b3d7e2-edd9a1-d2f6d5-e2fbff */
:root {
  --castaway-beach: #d3bf9a;
  --light-blue: #b3d7e2;
  --pie-crust: #edd9a1;
  --snowy-mint: #d2f6d5;
  --calm-waters: #e2fbff;
}

Tailwind CSS v4

/* Castaway Beach to Calm Waters — https://swatchly.xyz/palette/d3bf9a-b3d7e2-edd9a1-d2f6d5-e2fbff */
@theme {
  --color-castaway-beach: #d3bf9a;
  --color-castaway-beach-50: #fff4e0;
  --color-castaway-beach-100: #f7ead3;
  --color-castaway-beach-200: #e5d6bb;
  --color-castaway-beach-300: #d3bf9a;
  --color-castaway-beach-400: #b2a07d;
  --color-castaway-beach-500: #978461;
  --color-castaway-beach-600: #7b6948;
  --color-castaway-beach-700: #635334;
  --color-castaway-beach-800: #4e4025;
  --color-castaway-beach-900: #3d311a;
  --color-castaway-beach-950: #261e0d;
  --color-light-blue: #b3d7e2;
  --color-light-blue-50: #dff4fb;
  --color-light-blue-100: #d2eaf1;
  --color-light-blue-200: #b3d7e2;
  --color-light-blue-300: #a2c1ca;
  --color-light-blue-400: #82a3ad;
  --color-light-blue-500: #678993;
  --color-light-blue-600: #4f7079;
  --color-light-blue-700: #3c5a62;
  --color-light-blue-800: #2d474f;
  --color-light-blue-900: #20373d;
  --color-light-blue-950: #122227;
  --color-pie-crust: #edd9a1;
  --color-pie-crust-50: #fff7df;
  --color-pie-crust-100: #f9edcc;
  --color-pie-crust-200: #edd9a1;
  --color-pie-crust-300: #d3c294;
  --color-pie-crust-400: #b4a26e;
  --color-pie-crust-500: #998651;
  --color-pie-crust-600: #7d6b37;
  --color-pie-crust-700: #645423;
  --color-pie-crust-800: #4f4115;
  --color-pie-crust-900: #3e310c;
  --color-pie-crust-950: #271e04;
  --color-snowy-mint: #d2f6d5;
  --color-snowy-mint-50: #e7fbe9;
  --color-snowy-mint-100: #d2f6d5;
  --color-snowy-mint-200: #c5dfc7;
  --color-snowy-mint-300: #accaaf;
  --color-snowy-mint-400: #8bab8e;
  --color-snowy-mint-500: #6f9072;
  --color-snowy-mint-600: #567559;
  --color-snowy-mint-700: #415e44;
  --color-snowy-mint-800: #304a33;
  --color-snowy-mint-900: #243926;
  --color-snowy-mint-950: #142416;
  --color-calm-waters: #e2fbff;
  --color-calm-waters-50: #e2fbff;
  --color-calm-waters-100: #e0eff1;
  --color-calm-waters-200: #cadcdf;
  --color-calm-waters-300: #b1c6c9;
  --color-calm-waters-400: #90a6aa;
  --color-calm-waters-500: #748b8f;
  --color-calm-waters-600: #5b7074;
  --color-calm-waters-700: #46595c;
  --color-calm-waters-800: #354649;
  --color-calm-waters-900: #273638;
  --color-calm-waters-950: #172123;
}