Planet Earth to Black Velvet color palette

D8DDBCPlanet Earth B5BB9AGreen Tea 899771Backyard 6D627FHeron 423C4EItalian Grape 2A2231Black Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Planet Earth to Black Velvet is a 6-color muted palette: #D8DDBC (Planet Earth), #B5BB9A (Green Tea), #899771 (Backyard), #6D627F (Heron), #423C4E (Italian Grape), #2A2231 (Black Velvet). It mixes green, purple, gray tones and feels cool overall. The strongest text pairing is #D8DDBC on #2A2231 with a contrast ratio of 10.93:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Planet Earth	rgb(216, 221, 188)	hsl(69, 33%, 80%)
Green Tea	rgb(181, 187, 154)	hsl(71, 20%, 67%)
Backyard	rgb(137, 151, 113)	hsl(82, 15%, 52%)
Heron	rgb(109, 98, 127)	hsl(263, 13%, 44%)
Italian Grape	rgb(66, 60, 78)	hsl(260, 13%, 27%)
Black Velvet	rgb(42, 34, 49)	hsl(272, 18%, 16%)

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.93:1 Very good#D8DDBC on #2A2231
Aa10.93:1 Very good#2A2231 on #D8DDBC
Aa7.68:1 Very good#B5BB9A on #2A2231
Aa7.68:1 Very good#2A2231 on #B5BB9A
Aa7.54:1 Very good#D8DDBC on #423C4E
Aa7.54:1 Very good#423C4E on #D8DDBC
Aa5.30:1 Good#B5BB9A on #423C4E
Aa5.30:1 Good#423C4E on #B5BB9A

Color blindness preview

CSS variables

/* Planet Earth to Black Velvet — https://swatchly.xyz/palette/d8ddbc-b5bb9a-899771-6d627f-423c4e-2a2231 */
:root {
  --planet-earth: #d8ddbc;
  --green-tea: #b5bb9a;
  --backyard: #899771;
  --heron: #6d627f;
  --italian-grape: #423c4e;
  --black-velvet: #2a2231;
}

Tailwind CSS v4

/* Planet Earth to Black Velvet — https://swatchly.xyz/palette/d8ddbc-b5bb9a-899771-6d627f-423c4e-2a2231 */
@theme {
  --color-planet-earth: #d8ddbc;
  --color-planet-earth-50: #f6f8e6;
  --color-planet-earth-100: #ecefdb;
  --color-planet-earth-200: #d8ddbc;
  --color-planet-earth-300: #c1c5aa;
  --color-planet-earth-400: #a2a688;
  --color-planet-earth-500: #868a6c;
  --color-planet-earth-600: #6b6f52;
  --color-planet-earth-700: #55583e;
  --color-planet-earth-800: #42452e;
  --color-planet-earth-900: #323521;
  --color-planet-earth-950: #1f2113;
  --color-green-tea: #b5bb9a;
  --color-green-tea-50: #eff2de;
  --color-green-tea-100: #e3e7d1;
  --color-green-tea-200: #cdd2b8;
  --color-green-tea-300: #b5bb9a;
  --color-green-tea-400: #989d7e;
  --color-green-tea-500: #7e8464;
  --color-green-tea-600: #666b4d;
  --color-green-tea-700: #51553b;
  --color-green-tea-800: #40442c;
  --color-green-tea-900: #323521;
  --color-green-tea-950: #1f2112;
  --color-backyard: #899771;
  --color-backyard-50: #f2fbe5;
  --color-backyard-100: #eaf3db;
  --color-backyard-200: #d7e2c6;
  --color-backyard-300: #c2cead;
  --color-backyard-400: #a3b18c;
  --color-backyard-500: #899771;
  --color-backyard-600: #6d7a56;
  --color-backyard-700: #55613f;
  --color-backyard-800: #414c2e;
  --color-backyard-900: #313a21;
  --color-backyard-950: #1d2311;
  --color-heron: #6d627f;
  --color-heron-50: #f7f3ff;
  --color-heron-100: #eee6fb;
  --color-heron-200: #dad1ea;
  --color-heron-300: #c3b9d5;
  --color-heron-400: #a499b7;
  --color-heron-500: #887d9b;
  --color-heron-600: #6d627f;
  --color-heron-700: #574d66;
  --color-heron-800: #443b51;
  --color-heron-900: #342d40;
  --color-heron-950: #201b29;
  --color-italian-grape: #423c4e;
  --color-italian-grape-50: #f7f3ff;
  --color-italian-grape-100: #ede8f7;
  --color-italian-grape-200: #dad4e5;
  --color-italian-grape-300: #c3bdd0;
  --color-italian-grape-400: #a39db1;
  --color-italian-grape-500: #878195;
  --color-italian-grape-600: #6c6679;
  --color-italian-grape-700: #554f61;
  --color-italian-grape-800: #423c4e;
  --color-italian-grape-900: #322e3b;
  --color-italian-grape-950: #1f1c25;
  --color-black-velvet: #2a2231;
  --color-black-velvet-50: #f8f2fe;
  --color-black-velvet-100: #efe8f5;
  --color-black-velvet-200: #dcd4e3;
  --color-black-velvet-300: #c5bdce;
  --color-black-velvet-400: #a79daf;
  --color-black-velvet-500: #8d8395;
  --color-black-velvet-600: #736a7c;
  --color-black-velvet-700: #5e5565;
  --color-black-velvet-800: #4b4452;
  --color-black-velvet-900: #3c3642;
  --color-black-velvet-950: #2a2231;
}