Castaway Beach to Botanical Night color palette

D2C5A1Castaway Beach D0A5ADYoung at Heart AE797ENipple 54587DDeep Indigo 193A34Botanical Night

About this palette

Castaway Beach to Botanical Night is a 5-color muted, warm, vintage palette: #D2C5A1 (Castaway Beach), #D0A5AD (Young at Heart), #AE797E (Nipple), #54587D (Deep Indigo), #193A34 (Botanical Night). It mixes yellow, pink, red, purple, turquoise tones and feels warm overall. The strongest text pairing is #D2C5A1 on #193A34 with a contrast ratio of 7.22:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Castaway Beach	rgb(210, 197, 161)	hsl(44, 35%, 73%)
Young at Heart	rgb(208, 165, 173)	hsl(349, 31%, 73%)
Nipple	rgb(174, 121, 126)	hsl(354, 25%, 58%)
Deep Indigo	rgb(84, 88, 125)	hsl(234, 20%, 41%)
Botanical Night	rgb(25, 58, 52)	hsl(169, 40%, 16%)

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.

Aa7.22:1 Very good#D2C5A1 on #193A34
Aa7.22:1 Very good#193A34 on #D2C5A1
Aa5.70:1 Good#D0A5AD on #193A34
Aa5.70:1 Good#193A34 on #D0A5AD
Aa3.99:1 Poor#D2C5A1 on #54587D
Aa3.99:1 Poor#54587D on #D2C5A1
Aa3.44:1 Poor#AE797E on #193A34
Aa3.44:1 Poor#193A34 on #AE797E

Color blindness preview

CSS variables

/* Castaway Beach to Botanical Night — https://swatchly.xyz/palette/d2c5a1-d0a5ad-ae797e-54587d-193a34 */
:root {
  --castaway-beach: #d2c5a1;
  --young-at-heart: #d0a5ad;
  --nipple: #ae797e;
  --deep-indigo: #54587d;
  --botanical-night: #193a34;
}

Tailwind CSS v4

/* Castaway Beach to Botanical Night — https://swatchly.xyz/palette/d2c5a1-d0a5ad-ae797e-54587d-193a34 */
@theme {
  --color-castaway-beach: #d2c5a1;
  --color-castaway-beach-50: #fef7e4;
  --color-castaway-beach-100: #f6eed8;
  --color-castaway-beach-200: #e4dbc1;
  --color-castaway-beach-300: #d2c5a1;
  --color-castaway-beach-400: #b1a583;
  --color-castaway-beach-500: #958866;
  --color-castaway-beach-600: #796d4c;
  --color-castaway-beach-700: #615638;
  --color-castaway-beach-800: #4c4228;
  --color-castaway-beach-900: #3a321c;
  --color-castaway-beach-950: #241f0f;
  --color-young-at-heart: #d0a5ad;
  --color-young-at-heart-50: #ffe6ea;
  --color-young-at-heart-100: #f7d8dd;
  --color-young-at-heart-200: #e4c0c7;
  --color-young-at-heart-300: #d0a5ad;
  --color-young-at-heart-400: #b28991;
  --color-young-at-heart-500: #987078;
  --color-young-at-heart-600: #7f5961;
  --color-young-at-heart-700: #68464d;
  --color-young-at-heart-800: #54373d;
  --color-young-at-heart-900: #442b30;
  --color-young-at-heart-950: #2b191d;
  --color-nipple: #ae797e;
  --color-nipple-50: #fff2f3;
  --color-nipple-100: #ffe5e7;
  --color-nipple-200: #f8cdd0;
  --color-nipple-300: #e5b5b9;
  --color-nipple-400: #c99499;
  --color-nipple-500: #ae797e;
  --color-nipple-600: #915e64;
  --color-nipple-700: #76494d;
  --color-nipple-800: #5e373b;
  --color-nipple-900: #4a292c;
  --color-nipple-950: #2f181a;
  --color-deep-indigo: #54587d;
  --color-deep-indigo-50: #f3f4ff;
  --color-deep-indigo-100: #e6eaff;
  --color-deep-indigo-200: #d2d6f6;
  --color-deep-indigo-300: #bcc1e4;
  --color-deep-indigo-400: #9da2c9;
  --color-deep-indigo-500: #8287af;
  --color-deep-indigo-600: #696e94;
  --color-deep-indigo-700: #54587d;
  --color-deep-indigo-800: #414463;
  --color-deep-indigo-900: #31344e;
  --color-deep-indigo-950: #1e2033;
  --color-botanical-night: #193a34;
  --color-botanical-night-50: #e6faf6;
  --color-botanical-night-100: #daf1ec;
  --color-botanical-night-200: #c3ded8;
  --color-botanical-night-300: #aac9c2;
  --color-botanical-night-400: #88aaa2;
  --color-botanical-night-500: #6c8f87;
  --color-botanical-night-600: #53746d;
  --color-botanical-night-700: #3e5d56;
  --color-botanical-night-800: #2e4943;
  --color-botanical-night-900: #193a34;
  --color-botanical-night-950: #132320;
}