Graphite to Veil of Cinder color palette

33321AGraphite CFA2A1La Vie en Rose 488886Turkish Jade D6D4F0Icy Plains 7B5353Veil of Cinder

About this palette

Graphite to Veil of Cinder is a 5-color muted, warm, vintage palette: #33321A (Graphite), #CFA2A1 (La Vie en Rose), #488886 (Turkish Jade), #D6D4F0 (Icy Plains), #7B5353 (Veil of Cinder). It mixes brown, red, turquoise, purple tones and feels warm overall. The strongest text pairing is #33321A on #D6D4F0 with a contrast ratio of 9.02:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(51, 50, 26)	hsl(58, 32%, 15%)
La Vie en Rose	rgb(207, 162, 161)	hsl(1, 32%, 72%)
Turkish Jade	rgb(72, 136, 134)	hsl(178, 31%, 41%)
Icy Plains	rgb(214, 212, 240)	hsl(244, 48%, 89%)
Veil of Cinder	rgb(123, 83, 83)	hsl(0, 19%, 40%)

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.

Aa9.02:1 Very good#33321A on #D6D4F0
Aa9.02:1 Very good#D6D4F0 on #33321A
Aa5.79:1 Good#33321A on #CFA2A1
Aa5.79:1 Good#CFA2A1 on #33321A
Aa4.54:1 Good#D6D4F0 on #7B5353
Aa4.54:1 Good#7B5353 on #D6D4F0
Aa3.19:1 Poor#33321A on #488886
Aa3.19:1 Poor#488886 on #33321A

Color blindness preview

CSS variables

/* Graphite to Veil of Cinder — https://swatchly.xyz/palette/33321a-cfa2a1-488886-d6d4f0-7b5353 */
:root {
  --graphite: #33321a;
  --la-vie-en-rose: #cfa2a1;
  --turkish-jade: #488886;
  --icy-plains: #d6d4f0;
  --veil-of-cinder: #7b5353;
}

Tailwind CSS v4

/* Graphite to Veil of Cinder — https://swatchly.xyz/palette/33321a-cfa2a1-488886-d6d4f0-7b5353 */
@theme {
  --color-graphite: #33321a;
  --color-graphite-50: #f7f6e6;
  --color-graphite-100: #ededda;
  --color-graphite-200: #d9d9c4;
  --color-graphite-300: #c3c3aa;
  --color-graphite-400: #a4a388;
  --color-graphite-500: #88876c;
  --color-graphite-600: #6d6c53;
  --color-graphite-700: #56553e;
  --color-graphite-800: #42422e;
  --color-graphite-900: #33321a;
  --color-graphite-950: #1f1e12;
  --color-la-vie-en-rose: #cfa2a1;
  --color-la-vie-en-rose-50: #fff8f8;
  --color-la-vie-en-rose-100: #ffeeed;
  --color-la-vie-en-rose-200: #f9d8d7;
  --color-la-vie-en-rose-300: #e7c2c1;
  --color-la-vie-en-rose-400: #cfa2a1;
  --color-la-vie-en-rose-500: #af8484;
  --color-la-vie-en-rose-600: #916867;
  --color-la-vie-en-rose-700: #75504f;
  --color-la-vie-en-rose-800: #5d3c3c;
  --color-la-vie-en-rose-900: #472c2c;
  --color-la-vie-en-rose-950: #2c1919;
  --color-turkish-jade: #488886;
  --color-turkish-jade-50: #d8fcfa;
  --color-turkish-jade-100: #c8f1ef;
  --color-turkish-jade-200: #abdddb;
  --color-turkish-jade-300: #8dc6c3;
  --color-turkish-jade-400: #67a5a3;
  --color-turkish-jade-500: #488886;
  --color-turkish-jade-600: #316f6d;
  --color-turkish-jade-700: #1f5957;
  --color-turkish-jade-800: #124645;
  --color-turkish-jade-900: #093736;
  --color-turkish-jade-950: #032323;
  --color-icy-plains: #d6d4f0;
  --color-icy-plains-50: #f4f4ff;
  --color-icy-plains-100: #eae9fb;
  --color-icy-plains-200: #d6d4f0;
  --color-icy-plains-300: #c0bed5;
  --color-icy-plains-400: #a09eb8;
  --color-icy-plains-500: #85839c;
  --color-icy-plains-600: #6b6981;
  --color-icy-plains-700: #545268;
  --color-icy-plains-800: #414053;
  --color-icy-plains-900: #323141;
  --color-icy-plains-950: #1f1e29;
  --color-veil-of-cinder: #7b5353;
  --color-veil-of-cinder-50: #fff1f1;
  --color-veil-of-cinder-100: #ffe4e3;
  --color-veil-of-cinder-200: #f3d0cf;
  --color-veil-of-cinder-300: #e1bab9;
  --color-veil-of-cinder-400: #c59b9a;
  --color-veil-of-cinder-500: #ac8180;
  --color-veil-of-cinder-600: #916868;
  --color-veil-of-cinder-700: #7b5353;
  --color-veil-of-cinder-800: #624040;
  --color-veil-of-cinder-900: #4d3030;
  --color-veil-of-cinder-950: #321d1d;
}