Graphite to Mellow Marrow Color Palette

About this palette

Graphite to Mellow Marrow is a 5-color muted palette: #39342B (Graphite), #8E7978 (Moon Rock), #3F5F74 (Atlantis), #8BA4B9 (Grauzone), #E0C4BB (Mellow Marrow). It mixes gray, blue tones and feels cool overall. The strongest text pairing is #39342B on #E0C4BB with a contrast ratio of 7.52:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite	rgb(57, 52, 43)	hsl(39, 14%, 20%)
Moon Rock	rgb(142, 121, 120)	hsl(3, 9%, 51%)
Atlantis	rgb(63, 95, 116)	hsl(204, 30%, 35%)
Grauzone	rgb(139, 164, 185)	hsl(207, 25%, 64%)
Mellow Marrow	rgb(224, 196, 187)	hsl(15, 37%, 81%)

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.52:1 Very good#39342B on #E0C4BB
Aa7.52:1 Very good#E0C4BB on #39342B
Aa4.77:1 Good#39342B on #8BA4B9
Aa4.77:1 Good#8BA4B9 on #39342B
Aa4.12:1 Poor#3F5F74 on #E0C4BB
Aa4.12:1 Poor#E0C4BB on #3F5F74
Aa3.03:1 Poor#39342B on #8E7978
Aa3.03:1 Poor#8E7978 on #39342B

Color blindness preview

CSS variables

/* Graphite to Mellow Marrow — https://swatchly.xyz/palette/39342b-8e7978-3f5f74-8ba4b9-e0c4bb */
:root {
  --graphite: #39342b;
  --moon-rock: #8e7978;
  --atlantis: #3f5f74;
  --grauzone: #8ba4b9;
  --mellow-marrow: #e0c4bb;
}

Tailwind CSS v4

/* Graphite to Mellow Marrow — https://swatchly.xyz/palette/39342b-8e7978-3f5f74-8ba4b9-e0c4bb */
@theme {
  --color-graphite: #39342b;
  --color-graphite-50: #f8f5ee;
  --color-graphite-100: #efebe3;
  --color-graphite-200: #dcd7ce;
  --color-graphite-300: #c5c0b7;
  --color-graphite-400: #a7a197;
  --color-graphite-500: #8c867c;
  --color-graphite-600: #726c62;
  --color-graphite-700: #5b564d;
  --color-graphite-800: #48433b;
  --color-graphite-900: #39342b;
  --color-graphite-950: #23201b;
  --color-moon-rock: #8e7978;
  --color-moon-rock-50: #fef0ef;
  --color-moon-rock-100: #f4e4e4;
  --color-moon-rock-200: #e0cfce;
  --color-moon-rock-300: #cab6b5;
  --color-moon-rock-400: #ab9594;
  --color-moon-rock-500: #8e7978;
  --color-moon-rock-600: #746060;
  --color-moon-rock-700: #5d4c4b;
  --color-moon-rock-800: #4a3b3a;
  --color-moon-rock-900: #3a2d2d;
  --color-moon-rock-950: #251c1b;
  --color-atlantis: #3f5f74;
  --color-atlantis-50: #ecf7ff;
  --color-atlantis-100: #d9effe;
  --color-atlantis-200: #c3ddef;
  --color-atlantis-300: #aac8dc;
  --color-atlantis-400: #89a9c0;
  --color-atlantis-500: #6e8fa5;
  --color-atlantis-600: #55758b;
  --color-atlantis-700: #3f5f74;
  --color-atlantis-800: #304a5c;
  --color-atlantis-900: #223948;
  --color-atlantis-950: #13242e;
  --color-grauzone: #8ba4b9;
  --color-grauzone-50: #ecf6ff;
  --color-grauzone-100: #ddedfb;
  --color-grauzone-200: #c6daea;
  --color-grauzone-300: #adc3d6;
  --color-grauzone-400: #8ba4b9;
  --color-grauzone-500: #70899d;
  --color-grauzone-600: #576e81;
  --color-grauzone-700: #435869;
  --color-grauzone-800: #324453;
  --color-grauzone-900: #253541;
  --color-grauzone-950: #15212a;
  --color-mellow-marrow: #e0c4bb;
  --color-mellow-marrow-50: #fff9f7;
  --color-mellow-marrow-100: #ffeee9;
  --color-mellow-marrow-200: #efdbd5;
  --color-mellow-marrow-300: #e0c4bb;
  --color-mellow-marrow-400: #bda39b;
  --color-mellow-marrow-500: #a0867e;
  --color-mellow-marrow-600: #836a62;
  --color-mellow-marrow-700: #69524b;
  --color-mellow-marrow-800: #523f38;
  --color-mellow-marrow-900: #3f2f29;
  --color-mellow-marrow-950: #281c18;
}