Graphite Black to Platinum Blonde color palette

212E2CGraphite Black 4F5872Heavy Violet 927079Muted Berry BEB693Green Tea F0E9D7Platinum Blonde

About this palette

Graphite Black to Platinum Blonde is a 5-color muted palette: #212E2C (Graphite Black), #4F5872 (Heavy Violet), #927079 (Muted Berry), #BEB693 (Green Tea), #F0E9D7 (Platinum Blonde). It mixes gray, blue, red, yellow, white tones and feels warm overall. The strongest text pairing is #212E2C on #F0E9D7 with a contrast ratio of 11.62:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Graphite Black	rgb(33, 46, 44)	hsl(171, 16%, 15%)
Heavy Violet	rgb(79, 88, 114)	hsl(225, 18%, 38%)
Muted Berry	rgb(146, 112, 121)	hsl(344, 13%, 51%)
Green Tea	rgb(190, 182, 147)	hsl(49, 25%, 66%)
Platinum Blonde	rgb(240, 233, 215)	hsl(43, 45%, 89%)

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.

Aa11.62:1 Very good#212E2C on #F0E9D7
Aa11.62:1 Very good#F0E9D7 on #212E2C
Aa6.91:1 Good#212E2C on #BEB693
Aa6.91:1 Good#BEB693 on #212E2C
Aa5.84:1 Good#4F5872 on #F0E9D7
Aa5.84:1 Good#F0E9D7 on #4F5872
Aa3.60:1 Poor#927079 on #F0E9D7
Aa3.60:1 Poor#F0E9D7 on #927079

Color blindness preview

CSS variables

/* Graphite Black to Platinum Blonde — https://swatchly.xyz/palette/212e2c-4f5872-927079-beb693-f0e9d7 */
:root {
  --graphite-black: #212e2c;
  --heavy-violet: #4f5872;
  --muted-berry: #927079;
  --green-tea: #beb693;
  --platinum-blonde: #f0e9d7;
}

Tailwind CSS v4

/* Graphite Black to Platinum Blonde — https://swatchly.xyz/palette/212e2c-4f5872-927079-beb693-f0e9d7 */
@theme {
  --color-graphite-black: #212e2c;
  --color-graphite-black-50: #eef7f6;
  --color-graphite-black-100: #e3eeec;
  --color-graphite-black-200: #cedad8;
  --color-graphite-black-300: #b7c4c2;
  --color-graphite-black-400: #95a4a1;
  --color-graphite-black-500: #788784;
  --color-graphite-black-600: #5d6b68;
  --color-graphite-black-700: #465351;
  --color-graphite-black-800: #333e3c;
  --color-graphite-black-900: #212e2c;
  --color-graphite-black-950: #151b1a;
  --color-heavy-violet: #4f5872;
  --color-heavy-violet-50: #f1f5ff;
  --color-heavy-violet-100: #e4ebfe;
  --color-heavy-violet-200: #d0d8ee;
  --color-heavy-violet-300: #b9c2db;
  --color-heavy-violet-400: #99a3bf;
  --color-heavy-violet-500: #7e88a4;
  --color-heavy-violet-600: #656e89;
  --color-heavy-violet-700: #4f5872;
  --color-heavy-violet-800: #3d455a;
  --color-heavy-violet-900: #2e3446;
  --color-heavy-violet-950: #1c202d;
  --color-muted-berry: #927079;
  --color-muted-berry-50: #ffeef2;
  --color-muted-berry-100: #f9dfe6;
  --color-muted-berry-200: #e6c8d0;
  --color-muted-berry-300: #d0afb7;
  --color-muted-berry-400: #b08d96;
  --color-muted-berry-500: #927079;
  --color-muted-berry-600: #785961;
  --color-muted-berry-700: #61454d;
  --color-muted-berry-800: #4e353c;
  --color-muted-berry-900: #3d292f;
  --color-muted-berry-950: #28191d;
  --color-green-tea: #beb693;
  --color-green-tea-50: #f4f0da;
  --color-green-tea-100: #e9e4cc;
  --color-green-tea-200: #d5ceb2;
  --color-green-tea-300: #beb693;
  --color-green-tea-400: #a09977;
  --color-green-tea-500: #877f5e;
  --color-green-tea-600: #6e6747;
  --color-green-tea-700: #595236;
  --color-green-tea-800: #474128;
  --color-green-tea-900: #38331d;
  --color-green-tea-950: #231f10;
  --color-platinum-blonde: #f0e9d7;
  --color-platinum-blonde-50: #f7f3e9;
  --color-platinum-blonde-100: #f0e9d7;
  --color-platinum-blonde-200: #dbd6c8;
  --color-platinum-blonde-300: #c5bfb0;
  --color-platinum-blonde-400: #a7a090;
  --color-platinum-blonde-500: #8c8575;
  --color-platinum-blonde-600: #716b5c;
  --color-platinum-blonde-700: #5a5547;
  --color-platinum-blonde-800: #474236;
  --color-platinum-blonde-900: #373328;
  --color-platinum-blonde-950: #221f18;
}