Start generating

Smoky Charcoal to Ghost White color palette

32262CSmoky Charcoal494A56Deep Night697D5EEmerald City92A691OMGreenDAC5D0Light LilacF7F7FFGhost White
Open in generator Export PNG, PDF, ASE…

About this palette

Smoky Charcoal to Ghost White is a 6-color muted, gradient palette: #32262C (Smoky Charcoal), #494A56 (Deep Night), #697D5E (Emerald City), #92A691 (OMGreen), #DAC5D0 (Light Lilac), #F7F7FF (Ghost White). It mixes gray, green, white tones and feels cool overall. The strongest text pairing is #32262C on #F7F7FF with a contrast ratio of 13.60:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Smoky Charcoalrgb(50, 38, 44)hsl(330, 14%, 17%)
Deep Nightrgb(73, 74, 86)hsl(235, 8%, 31%)
Emerald Cityrgb(105, 125, 94)hsl(99, 14%, 43%)
OMGreenrgb(146, 166, 145)hsl(117, 11%, 61%)
Light Lilacrgb(218, 197, 208)hsl(329, 22%, 81%)
Ghost Whitergb(247, 247, 255)hsl(240, 100%, 98%)

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.

  • Aa13.60:1 Super#32262C on #F7F7FF
  • Aa13.60:1 Super#F7F7FF on #32262C
  • Aa8.89:1 Very good#32262C on #DAC5D0
  • Aa8.89:1 Very good#DAC5D0 on #32262C
  • Aa8.22:1 Very good#494A56 on #F7F7FF
  • Aa8.22:1 Very good#F7F7FF on #494A56
  • Aa5.58:1 Good#32262C on #92A691
  • Aa5.58:1 Good#92A691 on #32262C

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Smoky Charcoal to Ghost White — https://swatchly.xyz/palette/32262c-494a56-697d5e-92a691-dac5d0-f7f7ff */
:root {
  --smoky-charcoal: #32262c;
  --deep-night: #494a56;
  --emerald-city: #697d5e;
  --omgreen: #92a691;
  --light-lilac: #dac5d0;
  --ghost-white: #f7f7ff;
}

Tailwind CSS v4

/* Smoky Charcoal to Ghost White — https://swatchly.xyz/palette/32262c-494a56-697d5e-92a691-dac5d0-f7f7ff */
@theme {
  --color-smoky-charcoal: #32262c;
  --color-smoky-charcoal-50: #fbf2f6;
  --color-smoky-charcoal-100: #f2e8ed;
  --color-smoky-charcoal-200: #e0d4d9;
  --color-smoky-charcoal-300: #cabdc3;
  --color-smoky-charcoal-400: #aa9ba2;
  --color-smoky-charcoal-500: #8d7e85;
  --color-smoky-charcoal-600: #706269;
  --color-smoky-charcoal-700: #574b51;
  --color-smoky-charcoal-800: #41373c;
  --color-smoky-charcoal-900: #32262c;
  --color-smoky-charcoal-950: #1c1719;
  --color-deep-night: #494a56;
  --color-deep-night-50: #f4f4fd;
  --color-deep-night-100: #e9eaf3;
  --color-deep-night-200: #d5d6e1;
  --color-deep-night-300: #c0c2ce;
  --color-deep-night-400: #a2a4b1;
  --color-deep-night-500: #898a97;
  --color-deep-night-600: #70717e;
  --color-deep-night-700: #5b5c68;
  --color-deep-night-800: #494a56;
  --color-deep-night-900: #383942;
  --color-deep-night-950: #23242a;
  --color-emerald-city: #697d5e;
  --color-emerald-city-50: #edfae7;
  --color-emerald-city-100: #e4f2dd;
  --color-emerald-city-200: #d1e1c9;
  --color-emerald-city-300: #bbcdb1;
  --color-emerald-city-400: #9cb091;
  --color-emerald-city-500: #829677;
  --color-emerald-city-600: #697d5e;
  --color-emerald-city-700: #526447;
  --color-emerald-city-800: #3e4e35;
  --color-emerald-city-900: #2e3c27;
  --color-emerald-city-950: #1c2516;
  --color-omgreen: #92a691;
  --color-omgreen-50: #ecf8ec;
  --color-omgreen-100: #e1efe0;
  --color-omgreen-200: #ccdbcb;
  --color-omgreen-300: #b3c5b2;
  --color-omgreen-400: #92a691;
  --color-omgreen-500: #778b76;
  --color-omgreen-600: #5e705d;
  --color-omgreen-700: #495a48;
  --color-omgreen-800: #384637;
  --color-omgreen-900: #2a362a;
  --color-omgreen-950: #192219;
  --color-light-lilac: #dac5d0;
  --color-light-lilac-50: #fff9fc;
  --color-light-lilac-100: #fbeff5;
  --color-light-lilac-200: #ebdce4;
  --color-light-lilac-300: #dac5d0;
  --color-light-lilac-400: #b7a4ae;
  --color-light-lilac-500: #9a8791;
  --color-light-lilac-600: #7d6b74;
  --color-light-lilac-700: #64535c;
  --color-light-lilac-800: #4d3f47;
  --color-light-lilac-900: #3b2f35;
  --color-light-lilac-950: #251c21;
  --color-ghost-white: #f7f7ff;
  --color-ghost-white-50: #f7f7ff;
  --color-ghost-white-100: #ededf2;
  --color-ghost-white-200: #d9d9de;
  --color-ghost-white-300: #c1c1c8;
  --color-ghost-white-400: #a2a1a9;
  --color-ghost-white-500: #86868d;
  --color-ghost-white-600: #6b6b72;
  --color-ghost-white-700: #55555b;
  --color-ghost-white-800: #424247;
  --color-ghost-white-900: #323237;
  --color-ghost-white-950: #1f1f22;
}

Similar palettes