Blushing Coconut to Sunken Ship Color Palette

About this palette

Blushing Coconut to Sunken Ship is a 4-color muted, gradient palette: #EDD3CB (Blushing Coconut), #83A2AD (Grauzone), #7F534A (Root Beer), #0E2427 (Sunken Ship). It mixes gray, blue, red tones and feels balanced overall. The strongest text pairing is #EDD3CB on #0E2427 with a contrast ratio of 11.37:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blushing Coconut	rgb(237, 211, 203)	hsl(14, 49%, 86%)
Grauzone	rgb(131, 162, 173)	hsl(196, 20%, 60%)
Root Beer	rgb(127, 83, 74)	hsl(10, 26%, 39%)
Sunken Ship	rgb(14, 36, 39)	hsl(187, 47%, 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.

Aa11.37:1 Very good#EDD3CB on #0E2427
Aa11.37:1 Very good#0E2427 on #EDD3CB
Aa5.95:1 Good#83A2AD on #0E2427
Aa5.95:1 Good#0E2427 on #83A2AD
Aa4.56:1 Good#EDD3CB on #7F534A
Aa4.56:1 Good#7F534A on #EDD3CB

Color blindness preview

CSS variables

/* Blushing Coconut to Sunken Ship — https://swatchly.xyz/palette/edd3cb-83a2ad-7f534a-0e2427 */
:root {
  --blushing-coconut: #edd3cb;
  --grauzone: #83a2ad;
  --root-beer: #7f534a;
  --sunken-ship: #0e2427;
}

Tailwind CSS v4

/* Blushing Coconut to Sunken Ship — https://swatchly.xyz/palette/edd3cb-83a2ad-7f534a-0e2427 */
@theme {
  --color-blushing-coconut: #edd3cb;
  --color-blushing-coconut-50: #fff4f0;
  --color-blushing-coconut-100: #f9e9e4;
  --color-blushing-coconut-200: #edd3cb;
  --color-blushing-coconut-300: #d3bdb7;
  --color-blushing-coconut-400: #b49d96;
  --color-blushing-coconut-500: #99817a;
  --color-blushing-coconut-600: #7d6760;
  --color-blushing-coconut-700: #64504a;
  --color-blushing-coconut-800: #4f3e38;
  --color-blushing-coconut-900: #3e2f2a;
  --color-blushing-coconut-950: #271c19;
  --color-grauzone: #83a2ad;
  --color-grauzone-50: #e5f7fe;
  --color-grauzone-100: #d8ecf4;
  --color-grauzone-200: #c0d9e1;
  --color-grauzone-300: #a6c2cc;
  --color-grauzone-400: #83a2ad;
  --color-grauzone-500: #698792;
  --color-grauzone-600: #516e78;
  --color-grauzone-700: #3d5861;
  --color-grauzone-800: #2e454d;
  --color-grauzone-900: #22353c;
  --color-grauzone-950: #132227;
  --color-root-beer: #7f534a;
  --color-root-beer-50: #fff2ef;
  --color-root-beer-100: #ffe4df;
  --color-root-beer-200: #f6d0c7;
  --color-root-beer-300: #e4bab1;
  --color-root-beer-400: #c99b91;
  --color-root-beer-500: #b08177;
  --color-root-beer-600: #95685f;
  --color-root-beer-700: #7f534a;
  --color-root-beer-800: #654038;
  --color-root-beer-900: #4f3029;
  --color-root-beer-950: #341d18;
  --color-sunken-ship: #0e2427;
  --color-sunken-ship-50: #eaf8fa;
  --color-sunken-ship-100: #deeff1;
  --color-sunken-ship-200: #c8dcde;
  --color-sunken-ship-300: #b0c6c9;
  --color-sunken-ship-400: #8fa7aa;
  --color-sunken-ship-500: #738c8f;
  --color-sunken-ship-600: #5a7174;
  --color-sunken-ship-700: #455a5d;
  --color-sunken-ship-800: #34474a;
  --color-sunken-ship-900: #273739;
  --color-sunken-ship-950: #0e2427;
}