Graphite to Sweetly Color Palette

About this palette

Graphite to Sweetly is a 5-color muted, cool palette: #37321D (Graphite), #5D6881 (Ashen Whisper), #7B83A3 (Tempest), #A0BAA2 (Salvia), #FCE4F1 (Sweetly). It mixes gray, blue, green, white tones and feels cool overall. The strongest text pairing is #37321D on #FCE4F1 with a contrast ratio of 10.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(55, 50, 29)	hsl(48, 31%, 16%)
Ashen Whisper	rgb(93, 104, 129)	hsl(222, 16%, 44%)
Tempest	rgb(123, 131, 163)	hsl(228, 18%, 56%)
Salvia	rgb(160, 186, 162)	hsl(125, 16%, 68%)
Sweetly	rgb(252, 228, 241)	hsl(328, 80%, 94%)

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.

Aa10.70:1 Very good#37321D on #FCE4F1
Aa10.70:1 Very good#FCE4F1 on #37321D
Aa6.14:1 Good#37321D on #A0BAA2
Aa6.14:1 Good#A0BAA2 on #37321D
Aa4.65:1 Good#5D6881 on #FCE4F1
Aa4.65:1 Good#FCE4F1 on #5D6881
Aa3.43:1 Poor#37321D on #7B83A3
Aa3.43:1 Poor#7B83A3 on #37321D

Color blindness preview

CSS variables

/* Graphite to Sweetly — https://swatchly.xyz/palette/37321d-5d6881-7b83a3-a0baa2-fce4f1 */
:root {
  --graphite: #37321d;
  --ashen-whisper: #5d6881;
  --tempest: #7b83a3;
  --salvia: #a0baa2;
  --sweetly: #fce4f1;
}

Tailwind CSS v4

/* Graphite to Sweetly — https://swatchly.xyz/palette/37321d-5d6881-7b83a3-a0baa2-fce4f1 */
@theme {
  --color-graphite: #37321d;
  --color-graphite-50: #f9f5e7;
  --color-graphite-100: #efebdb;
  --color-graphite-200: #dcd8c5;
  --color-graphite-300: #c6c1ac;
  --color-graphite-400: #a7a28a;
  --color-graphite-500: #8c866e;
  --color-graphite-600: #716c55;
  --color-graphite-700: #5a5540;
  --color-graphite-800: #464230;
  --color-graphite-900: #37321d;
  --color-graphite-950: #211f14;
  --color-ashen-whisper: #5d6881;
  --color-ashen-whisper-50: #f1f5ff;
  --color-ashen-whisper-100: #e2ebfd;
  --color-ashen-whisper-200: #cdd6ec;
  --color-ashen-whisper-300: #b4bfd7;
  --color-ashen-whisper-400: #939fb9;
  --color-ashen-whisper-500: #77839d;
  --color-ashen-whisper-600: #5d6881;
  --color-ashen-whisper-700: #495268;
  --color-ashen-whisper-800: #384053;
  --color-ashen-whisper-900: #2a3141;
  --color-ashen-whisper-950: #191e2a;
  --color-tempest: #7b83a3;
  --color-tempest-50: #f1f4ff;
  --color-tempest-100: #e4eaff;
  --color-tempest-200: #cfd6f0;
  --color-tempest-300: #b7bfdc;
  --color-tempest-400: #979fbf;
  --color-tempest-500: #7b83a3;
  --color-tempest-600: #626987;
  --color-tempest-700: #4c536e;
  --color-tempest-800: #3b4058;
  --color-tempest-900: #2c3145;
  --color-tempest-950: #1b1e2d;
  --color-salvia: #a0baa2;
  --color-salvia-50: #e2f2e3;
  --color-salvia-100: #d4e7d5;
  --color-salvia-200: #bcd1be;
  --color-salvia-300: #a0baa2;
  --color-salvia-400: #849d86;
  --color-salvia-500: #6c846e;
  --color-salvia-600: #556c57;
  --color-salvia-700: #425744;
  --color-salvia-800: #334635;
  --color-salvia-900: #283829;
  --color-salvia-950: #172318;
  --color-sweetly: #fce4f1;
  --color-sweetly-50: #fff1f8;
  --color-sweetly-100: #fce4f1;
  --color-sweetly-200: #e4d2dc;
  --color-sweetly-300: #cfbbc6;
  --color-sweetly-400: #b09ba6;
  --color-sweetly-500: #957f8b;
  --color-sweetly-600: #796570;
  --color-sweetly-700: #614f59;
  --color-sweetly-800: #4d3d46;
  --color-sweetly-900: #3c2e36;
  --color-sweetly-950: #261c21;
}