Crystal to Madras Color Palette

About this palette

Crystal to Madras is a 4-color muted, warm, vintage palette: #ACD8E0 (Crystal), #9F7F9A (Amorous), #785B71 (Royal Fig), #453D1D (Madras). It mixes turquoise, pink, brown tones and feels warm overall. The strongest text pairing is #ACD8E0 on #453D1D with a contrast ratio of 7.04:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Crystal	rgb(172, 216, 224)	hsl(189, 46%, 78%)
Amorous	rgb(159, 127, 154)	hsl(309, 14%, 56%)
Royal Fig	rgb(120, 91, 113)	hsl(314, 14%, 41%)
Madras	rgb(69, 61, 29)	hsl(48, 41%, 19%)

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.04:1 Very good#ACD8E0 on #453D1D
Aa7.04:1 Very good#453D1D on #ACD8E0
Aa3.86:1 Poor#ACD8E0 on #785B71
Aa3.86:1 Poor#785B71 on #ACD8E0
Aa3.08:1 Poor#9F7F9A on #453D1D
Aa3.08:1 Poor#453D1D on #9F7F9A

Color blindness preview

CSS variables

/* Crystal to Madras — https://swatchly.xyz/palette/acd8e0-9f7f9a-785b71-453d1d */
:root {
  --crystal: #acd8e0;
  --amorous: #9f7f9a;
  --royal-fig: #785b71;
  --madras: #453d1d;
}

Tailwind CSS v4

/* Crystal to Madras — https://swatchly.xyz/palette/acd8e0-9f7f9a-785b71-453d1d */
@theme {
  --color-crystal: #acd8e0;
  --color-crystal-50: #dbf5fa;
  --color-crystal-100: #cdeaef;
  --color-crystal-200: #acd8e0;
  --color-crystal-300: #9cc2c9;
  --color-crystal-400: #7ba4ac;
  --color-crystal-500: #618a92;
  --color-crystal-600: #497178;
  --color-crystal-700: #365b61;
  --color-crystal-800: #27484e;
  --color-crystal-900: #1c383d;
  --color-crystal-950: #0f2326;
  --color-amorous: #9f7f9a;
  --color-amorous-50: #fff1fd;
  --color-amorous-100: #fbe5f7;
  --color-amorous-200: #ead1e6;
  --color-amorous-300: #d7bad2;
  --color-amorous-400: #ba9ab4;
  --color-amorous-500: #9f7f9a;
  --color-amorous-600: #83647e;
  --color-amorous-700: #694e65;
  --color-amorous-800: #533b50;
  --color-amorous-900: #412c3e;
  --color-amorous-950: #291a27;
  --color-royal-fig: #785b71;
  --color-royal-fig-50: #fff0fb;
  --color-royal-fig-100: #f8e3f2;
  --color-royal-fig-200: #e6ccdf;
  --color-royal-fig-300: #d0b3c9;
  --color-royal-fig-400: #b192a9;
  --color-royal-fig-500: #94768d;
  --color-royal-fig-600: #785b71;
  --color-royal-fig-700: #60475a;
  --color-royal-fig-800: #4c3647;
  --color-royal-fig-900: #3c2937;
  --color-royal-fig-950: #261923;
  --color-madras: #453d1d;
  --color-madras-50: #faf5e1;
  --color-madras-100: #f1ecd5;
  --color-madras-200: #dfd8bd;
  --color-madras-300: #c8c0a1;
  --color-madras-400: #a8a07e;
  --color-madras-500: #8c8361;
  --color-madras-600: #706848;
  --color-madras-700: #585134;
  --color-madras-800: #453d1d;
  --color-madras-900: #342f1a;
  --color-madras-950: #201c0d;
}