Sand Dune to Into the Night color palette

E8CEBCSand Dune B7A0D9Violet Velvet 487DA5Into the Blue 575A40Cypress 203645Into the Night

About this palette

Sand Dune to Into the Night is a 5-color muted, cool, vintage palette: #E8CEBC (Sand Dune), #B7A0D9 (Violet Velvet), #487DA5 (Into the Blue), #575A40 (Cypress), #203645 (Into the Night). It mixes orange, purple, blue, green tones and feels cool overall. The strongest text pairing is #E8CEBC on #203645 with a contrast ratio of 8.35:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Sand Dune	rgb(232, 206, 188)	hsl(25, 49%, 82%)
Violet Velvet	rgb(183, 160, 217)	hsl(264, 43%, 74%)
Into the Blue	rgb(72, 125, 165)	hsl(206, 39%, 46%)
Cypress	rgb(87, 90, 64)	hsl(67, 17%, 30%)
Into the Night	rgb(32, 54, 69)	hsl(204, 37%, 20%)

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.

Aa8.35:1 Very good#E8CEBC on #203645
Aa8.35:1 Very good#203645 on #E8CEBC
Aa5.40:1 Good#B7A0D9 on #203645
Aa5.40:1 Good#203645 on #B7A0D9
Aa4.75:1 Good#E8CEBC on #575A40
Aa4.75:1 Good#575A40 on #E8CEBC
Aa3.07:1 Poor#B7A0D9 on #575A40
Aa3.07:1 Poor#575A40 on #B7A0D9

Color blindness preview

CSS variables

/* Sand Dune to Into the Night — https://swatchly.xyz/palette/e8cebc-b7a0d9-487da5-575a40-203645 */
:root {
  --sand-dune: #e8cebc;
  --violet-velvet: #b7a0d9;
  --into-the-blue: #487da5;
  --cypress: #575a40;
  --into-the-night: #203645;
}

Tailwind CSS v4

/* Sand Dune to Into the Night — https://swatchly.xyz/palette/e8cebc-b7a0d9-487da5-575a40-203645 */
@theme {
  --color-sand-dune: #e8cebc;
  --color-sand-dune-50: #ffefe5;
  --color-sand-dune-100: #f5e4d9;
  --color-sand-dune-200: #e8cebc;
  --color-sand-dune-300: #cfb9aa;
  --color-sand-dune-400: #b29a89;
  --color-sand-dune-500: #977f6e;
  --color-sand-dune-600: #7c6656;
  --color-sand-dune-700: #645042;
  --color-sand-dune-800: #503e32;
  --color-sand-dune-900: #3e2f25;
  --color-sand-dune-950: #271d15;
  --color-violet-velvet: #b7a0d9;
  --color-violet-velvet-50: #faf8ff;
  --color-violet-velvet-100: #f4eeff;
  --color-violet-velvet-200: #e6d7ff;
  --color-violet-velvet-300: #d3c0f0;
  --color-violet-velvet-400: #b7a0d9;
  --color-violet-velvet-500: #9983b9;
  --color-violet-velvet-600: #7c669b;
  --color-violet-velvet-700: #634f7f;
  --color-violet-velvet-800: #4d3b65;
  --color-violet-velvet-900: #3b2c4f;
  --color-violet-velvet-950: #241932;
  --color-into-the-blue: #487da5;
  --color-into-the-blue-50: #edf7ff;
  --color-into-the-blue-100: #def0ff;
  --color-into-the-blue-200: #bce1ff;
  --color-into-the-blue-300: #a0cdf1;
  --color-into-the-blue-400: #7db0d8;
  --color-into-the-blue-500: #6196bf;
  --color-into-the-blue-600: #487da5;
  --color-into-the-blue-700: #316388;
  --color-into-the-blue-800: #204e6e;
  --color-into-the-blue-900: #143b57;
  --color-into-the-blue-950: #082539;
  --color-cypress: #575a40;
  --color-cypress-50: #f5f7e6;
  --color-cypress-100: #ebeddb;
  --color-cypress-200: #d7dac4;
  --color-cypress-300: #c1c5ac;
  --color-cypress-400: #a2a68a;
  --color-cypress-500: #878b6f;
  --color-cypress-600: #6d7056;
  --color-cypress-700: #575a40;
  --color-cypress-800: #444631;
  --color-cypress-900: #343624;
  --color-cypress-950: #202114;
  --color-into-the-night: #203645;
  --color-into-the-night-50: #ecf7ff;
  --color-into-the-night-100: #ddeefa;
  --color-into-the-night-200: #c7dbe9;
  --color-into-the-night-300: #aec4d4;
  --color-into-the-night-400: #8da5b7;
  --color-into-the-night-500: #728a9c;
  --color-into-the-night-600: #586f80;
  --color-into-the-night-700: #435968;
  --color-into-the-night-800: #334552;
  --color-into-the-night-900: #203645;
  --color-into-the-night-950: #162129;
}