Blushing Coconut to Espresso color palette

F2D2CABlushing Coconut A0C1C2Wild Life 508C8FArctic 2F6777Ocean’s Embrace 52332AEspresso

About this palette

Blushing Coconut to Espresso is a 5-color muted, cool, vintage palette: #F2D2CA (Blushing Coconut), #A0C1C2 (Wild Life), #508C8F (Arctic), #2F6777 (Ocean’s Embrace), #52332A (Espresso). It mixes pink, turquoise, blue, brown tones and feels cool overall. The strongest text pairing is #F2D2CA on #52332A with a contrast ratio of 7.96:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blushing Coconut	rgb(242, 210, 202)	hsl(12, 61%, 87%)
Wild Life	rgb(160, 193, 194)	hsl(182, 22%, 69%)
Arctic	rgb(80, 140, 143)	hsl(183, 28%, 44%)
Ocean’s Embrace	rgb(47, 103, 119)	hsl(193, 43%, 33%)
Espresso	rgb(82, 51, 42)	hsl(14, 32%, 24%)

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.96:1 Very good#F2D2CA on #52332A
Aa7.96:1 Very good#52332A on #F2D2CA
Aa5.84:1 Good#A0C1C2 on #52332A
Aa5.84:1 Good#52332A on #A0C1C2
Aa4.46:1 Poor#F2D2CA on #2F6777
Aa4.46:1 Poor#2F6777 on #F2D2CA
Aa3.28:1 Poor#A0C1C2 on #2F6777
Aa3.28:1 Poor#2F6777 on #A0C1C2

Color blindness preview

CSS variables

/* Blushing Coconut to Espresso — https://swatchly.xyz/palette/f2d2ca-a0c1c2-508c8f-2f6777-52332a */
:root {
  --blushing-coconut: #f2d2ca;
  --wild-life: #a0c1c2;
  --arctic: #508c8f;
  --ocean-s-embrace: #2f6777;
  --espresso: #52332a;
}

Tailwind CSS v4

/* Blushing Coconut to Espresso — https://swatchly.xyz/palette/f2d2ca-a0c1c2-508c8f-2f6777-52332a */
@theme {
  --color-blushing-coconut: #f2d2ca;
  --color-blushing-coconut-50: #fff4f2;
  --color-blushing-coconut-100: #fce9e4;
  --color-blushing-coconut-200: #f2d2ca;
  --color-blushing-coconut-300: #d7bcb6;
  --color-blushing-coconut-400: #b99c95;
  --color-blushing-coconut-500: #9d8079;
  --color-blushing-coconut-600: #81655e;
  --color-blushing-coconut-700: #684f49;
  --color-blushing-coconut-800: #523c37;
  --color-blushing-coconut-900: #402e29;
  --color-blushing-coconut-950: #291c18;
  --color-wild-life: #a0c1c2;
  --color-wild-life-50: #e2f6f6;
  --color-wild-life-100: #d5ebec;
  --color-wild-life-200: #bdd7d8;
  --color-wild-life-300: #a0c1c2;
  --color-wild-life-400: #83a3a4;
  --color-wild-life-500: #698889;
  --color-wild-life-600: #516f70;
  --color-wild-life-700: #3e595a;
  --color-wild-life-800: #2e4647;
  --color-wild-life-900: #223738;
  --color-wild-life-950: #132223;
  --color-arctic: #508c8f;
  --color-arctic-50: #dafcfd;
  --color-arctic-100: #cbf2f3;
  --color-arctic-200: #b1dee0;
  --color-arctic-300: #94c8ca;
  --color-arctic-400: #6ea8ab;
  --color-arctic-500: #508c8f;
  --color-arctic-600: #377275;
  --color-arctic-700: #255b5e;
  --color-arctic-800: #17484a;
  --color-arctic-900: #0d383a;
  --color-arctic-950: #052325;
  --color-ocean-s-embrace: #2f6777;
  --color-ocean-s-embrace-50: #e6f9ff;
  --color-ocean-s-embrace-100: #cff2fd;
  --color-ocean-s-embrace-200: #b8e1ee;
  --color-ocean-s-embrace-300: #9ecddc;
  --color-ocean-s-embrace-400: #7bb0c1;
  --color-ocean-s-embrace-500: #5f96a7;
  --color-ocean-s-embrace-600: #467d8d;
  --color-ocean-s-embrace-700: #2f6777;
  --color-ocean-s-embrace-800: #21515e;
  --color-ocean-s-embrace-900: #153e4a;
  --color-ocean-s-embrace-950: #082830;
  --color-espresso: #52332a;
  --color-espresso-50: #fff2ee;
  --color-espresso-100: #fee5dd;
  --color-espresso-200: #eed0c7;
  --color-espresso-300: #d9b7ad;
  --color-espresso-400: #ba968b;
  --color-espresso-500: #9d796e;
  --color-espresso-600: #805e54;
  --color-espresso-700: #65483f;
  --color-espresso-800: #52332a;
  --color-espresso-900: #3d2822;
  --color-espresso-950: #261713;
}