Puffy Cloud to Satin Deep Black color palette

D5DFF3Puffy Cloud 9CA17FBonsai Garden 687A4EGhoul 4B3948Pitch Black 191D25Satin Deep Black

About this palette

Puffy Cloud to Satin Deep Black is a 5-color muted, gradient palette: #D5DFF3 (Puffy Cloud), #9CA17F (Bonsai Garden), #687A4E (Ghoul), #4B3948 (Pitch Black), #191D25 (Satin Deep Black). It mixes gray, green tones and feels balanced overall. The strongest text pairing is #D5DFF3 on #191D25 with a contrast ratio of 12.61:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Puffy Cloud	rgb(213, 223, 243)	hsl(220, 56%, 89%)
Bonsai Garden	rgb(156, 161, 127)	hsl(69, 15%, 56%)
Ghoul	rgb(104, 122, 78)	hsl(85, 22%, 39%)
Pitch Black	rgb(75, 57, 72)	hsl(310, 14%, 26%)
Satin Deep Black	rgb(25, 29, 37)	hsl(220, 19%, 12%)

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.

Aa12.61:1 Super#D5DFF3 on #191D25
Aa12.61:1 Super#191D25 on #D5DFF3
Aa7.93:1 Very good#D5DFF3 on #4B3948
Aa7.93:1 Very good#4B3948 on #D5DFF3
Aa6.29:1 Good#9CA17F on #191D25
Aa6.29:1 Good#191D25 on #9CA17F
Aa3.95:1 Poor#9CA17F on #4B3948
Aa3.95:1 Poor#4B3948 on #9CA17F

Color blindness preview

CSS variables

/* Puffy Cloud to Satin Deep Black — https://swatchly.xyz/palette/d5dff3-9ca17f-687a4e-4b3948-191d25 */
:root {
  --puffy-cloud: #d5dff3;
  --bonsai-garden: #9ca17f;
  --ghoul: #687a4e;
  --pitch-black: #4b3948;
  --satin-deep-black: #191d25;
}

Tailwind CSS v4

/* Puffy Cloud to Satin Deep Black — https://swatchly.xyz/palette/d5dff3-9ca17f-687a4e-4b3948-191d25 */
@theme {
  --color-puffy-cloud: #d5dff3;
  --color-puffy-cloud-50: #f8faff;
  --color-puffy-cloud-100: #ecf1fd;
  --color-puffy-cloud-200: #d5dff3;
  --color-puffy-cloud-300: #bfc7d7;
  --color-puffy-cloud-400: #9da6b8;
  --color-puffy-cloud-500: #818a9c;
  --color-puffy-cloud-600: #656e7f;
  --color-puffy-cloud-700: #4f5666;
  --color-puffy-cloud-800: #3c4250;
  --color-puffy-cloud-900: #2d333e;
  --color-puffy-cloud-950: #1b1f27;
  --color-bonsai-garden: #9ca17f;
  --color-bonsai-garden-50: #f3f6e2;
  --color-bonsai-garden-100: #e8ecd5;
  --color-bonsai-garden-200: #d3d8bd;
  --color-bonsai-garden-300: #bcc1a2;
  --color-bonsai-garden-400: #9ca17f;
  --color-bonsai-garden-500: #828665;
  --color-bonsai-garden-600: #686c4d;
  --color-bonsai-garden-700: #53563a;
  --color-bonsai-garden-800: #40442b;
  --color-bonsai-garden-900: #32341f;
  --color-bonsai-garden-950: #1f2111;
  --color-ghoul: #687a4e;
  --color-ghoul-50: #eefae0;
  --color-ghoul-100: #e5f2d5;
  --color-ghoul-200: #d1e1be;
  --color-ghoul-300: #bbcca4;
  --color-ghoul-400: #9cae82;
  --color-ghoul-500: #819467;
  --color-ghoul-600: #687a4e;
  --color-ghoul-700: #516139;
  --color-ghoul-800: #3e4c29;
  --color-ghoul-900: #2f3b1c;
  --color-ghoul-950: #1c250f;
  --color-pitch-black: #4b3948;
  --color-pitch-black-50: #fdf1fb;
  --color-pitch-black-100: #f4e6f2;
  --color-pitch-black-200: #e2d2df;
  --color-pitch-black-300: #cdbac9;
  --color-pitch-black-400: #ae99aa;
  --color-pitch-black-500: #927d8e;
  --color-pitch-black-600: #766373;
  --color-pitch-black-700: #5e4d5b;
  --color-pitch-black-800: #4b3948;
  --color-pitch-black-900: #392c36;
  --color-pitch-black-950: #231a22;
  --color-satin-deep-black: #191d25;
  --color-satin-deep-black-50: #f2f5fb;
  --color-satin-deep-black-100: #e8ebf2;
  --color-satin-deep-black-200: #d3d8e0;
  --color-satin-deep-black-300: #bcc1ca;
  --color-satin-deep-black-400: #9ca2ac;
  --color-satin-deep-black-500: #818690;
  --color-satin-deep-black-600: #666b75;
  --color-satin-deep-black-700: #50545d;
  --color-satin-deep-black-800: #3d4148;
  --color-satin-deep-black-900: #2e3137;
  --color-satin-deep-black-950: #191d25;
}