Lost at Sea to Coco’s Black Color Palette

About this palette

Lost at Sea to Coco’s Black is a 4-color muted palette: #879CA3 (Lost at Sea), #734E50 (Veil of Cinder), #F7D7D9 (Lucky You), #161E19 (Coco’s Black). It mixes gray, red, pink tones and feels warm overall. The strongest text pairing is #F7D7D9 on #161E19 with a contrast ratio of 12.71:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Lost at Sea	rgb(135, 156, 163)	hsl(195, 13%, 58%)
Veil of Cinder	rgb(115, 78, 80)	hsl(357, 19%, 38%)
Lucky You	rgb(247, 215, 217)	hsl(356, 67%, 91%)
Coco’s Black	rgb(22, 30, 25)	hsl(142, 15%, 10%)

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.

Aa12.71:1 Super#F7D7D9 on #161E19
Aa12.71:1 Super#161E19 on #F7D7D9
Aa5.93:1 Good#879CA3 on #161E19
Aa5.93:1 Good#161E19 on #879CA3
Aa5.34:1 Good#734E50 on #F7D7D9
Aa5.34:1 Good#F7D7D9 on #734E50

Color blindness preview

CSS variables

/* Lost at Sea to Coco’s Black — https://swatchly.xyz/palette/879ca3-734e50-f7d7d9-161e19 */
:root {
  --lost-at-sea: #879ca3;
  --veil-of-cinder: #734e50;
  --lucky-you: #f7d7d9;
  --coco-s-black: #161e19;
}

Tailwind CSS v4

/* Lost at Sea to Coco’s Black — https://swatchly.xyz/palette/879ca3-734e50-f7d7d9-161e19 */
@theme {
  --color-lost-at-sea: #879ca3;
  --color-lost-at-sea-50: #e7f4f9;
  --color-lost-at-sea-100: #dae9ee;
  --color-lost-at-sea-200: #c3d4da;
  --color-lost-at-sea-300: #a9bcc3;
  --color-lost-at-sea-400: #879ca3;
  --color-lost-at-sea-500: #6e8289;
  --color-lost-at-sea-600: #566a70;
  --color-lost-at-sea-700: #43545a;
  --color-lost-at-sea-800: #334247;
  --color-lost-at-sea-900: #273438;
  --color-lost-at-sea-950: #182124;
  --color-veil-of-cinder: #734e50;
  --color-veil-of-cinder-50: #fff1f2;
  --color-veil-of-cinder-100: #ffe4e4;
  --color-veil-of-cinder-200: #f0cfd0;
  --color-veil-of-cinder-300: #ddb8b9;
  --color-veil-of-cinder-400: #c0989a;
  --color-veil-of-cinder-500: #a57d7f;
  --color-veil-of-cinder-600: #8a6466;
  --color-veil-of-cinder-700: #734e50;
  --color-veil-of-cinder-800: #5b3c3e;
  --color-veil-of-cinder-900: #472d2f;
  --color-veil-of-cinder-950: #2e1b1c;
  --color-lucky-you: #f7d7d9;
  --color-lucky-you-50: #fff9fa;
  --color-lucky-you-100: #ffeeef;
  --color-lucky-you-200: #f7d7d9;
  --color-lucky-you-300: #dac1c2;
  --color-lucky-you-400: #bb9fa1;
  --color-lucky-you-500: #9f8284;
  --color-lucky-you-600: #826668;
  --color-lucky-you-700: #684f51;
  --color-lucky-you-800: #513c3e;
  --color-lucky-you-900: #3f2d2f;
  --color-lucky-you-950: #281b1c;
  --color-coco-s-black: #161e19;
  --color-coco-s-black-50: #f1f7f3;
  --color-coco-s-black-100: #e6ede9;
  --color-coco-s-black-200: #d2dad5;
  --color-coco-s-black-300: #bac4be;
  --color-coco-s-black-400: #9aa49e;
  --color-coco-s-black-500: #7e8882;
  --color-coco-s-black-600: #646d67;
  --color-coco-s-black-700: #4d5650;
  --color-coco-s-black-800: #3b423d;
  --color-coco-s-black-900: #2b312e;
  --color-coco-s-black-950: #161e19;
}