Start generating

Puffy Cloud to Close but No Cigar color palette

D0E2FFPuffy Cloud8EC4C4Cerulean SkiesC48769Escalope3F67A1Starstruck024642Tropical Forest371C06Close but No Cigar
Open in generator Export PNG, PDF, ASE…

About this palette

Puffy Cloud to Close but No Cigar is a 6-color cool palette: #D0E2FF (Puffy Cloud), #8EC4C4 (Cerulean Skies), #C48769 (Escalope), #3F67A1 (Starstruck), #024642 (Tropical Forest), #371C06 (Close but No Cigar). It mixes blue, turquoise, orange, brown tones and feels cool overall. The strongest text pairing is #D0E2FF on #371C06 with a contrast ratio of 12.02:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Puffy Cloudrgb(208, 226, 255)hsl(217, 100%, 91%)
Cerulean Skiesrgb(142, 196, 196)hsl(180, 31%, 66%)
Escalopergb(196, 135, 105)hsl(20, 44%, 59%)
Starstruckrgb(63, 103, 161)hsl(216, 44%, 44%)
Tropical Forestrgb(2, 70, 66)hsl(176, 94%, 14%)
Close but No Cigarrgb(55, 28, 6)hsl(27, 80%, 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.02:1 Super#D0E2FF on #371C06
  • Aa12.02:1 Super#371C06 on #D0E2FF
  • Aa8.18:1 Very good#D0E2FF on #024642
  • Aa8.18:1 Very good#024642 on #D0E2FF
  • Aa8.15:1 Very good#8EC4C4 on #371C06
  • Aa8.15:1 Very good#371C06 on #8EC4C4
  • Aa5.54:1 Good#8EC4C4 on #024642
  • Aa5.54:1 Good#024642 on #8EC4C4

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Puffy Cloud to Close but No Cigar — https://swatchly.xyz/palette/d0e2ff-8ec4c4-c48769-3f67a1-024642-371c06 */
:root {
  --puffy-cloud: #d0e2ff;
  --cerulean-skies: #8ec4c4;
  --escalope: #c48769;
  --starstruck: #3f67a1;
  --tropical-forest: #024642;
  --close-but-no-cigar: #371c06;
}

Tailwind CSS v4

/* Puffy Cloud to Close but No Cigar — https://swatchly.xyz/palette/d0e2ff-8ec4c4-c48769-3f67a1-024642-371c06 */
@theme {
  --color-puffy-cloud: #d0e2ff;
  --color-puffy-cloud-50: #f9fcff;
  --color-puffy-cloud-100: #ecf4ff;
  --color-puffy-cloud-200: #d0e2ff;
  --color-puffy-cloud-300: #bbc9e1;
  --color-puffy-cloud-400: #98a8c2;
  --color-puffy-cloud-500: #7b8ba6;
  --color-puffy-cloud-600: #606f88;
  --color-puffy-cloud-700: #49576e;
  --color-puffy-cloud-800: #374356;
  --color-puffy-cloud-900: #293344;
  --color-puffy-cloud-950: #18202b;
  --color-cerulean-skies: #8ec4c4;
  --color-cerulean-skies-50: #d9f8f8;
  --color-cerulean-skies-100: #caeded;
  --color-cerulean-skies-200: #b0dad9;
  --color-cerulean-skies-300: #8ec4c4;
  --color-cerulean-skies-400: #72a6a6;
  --color-cerulean-skies-500: #578c8c;
  --color-cerulean-skies-600: #3f7272;
  --color-cerulean-skies-700: #2d5c5c;
  --color-cerulean-skies-800: #1f4949;
  --color-cerulean-skies-900: #15393a;
  --color-cerulean-skies-950: #092424;
  --color-escalope: #c48769;
  --color-escalope-50: #ffede5;
  --color-escalope-100: #ffdece;
  --color-escalope-200: #f7c4ab;
  --color-escalope-300: #e2aa8e;
  --color-escalope-400: #c48769;
  --color-escalope-500: #a96e50;
  --color-escalope-600: #8d563a;
  --color-escalope-700: #744229;
  --color-escalope-800: #5e331c;
  --color-escalope-900: #4b2613;
  --color-escalope-950: #321709;
  --color-starstruck: #3f67a1;
  --color-starstruck-50: #eff6ff;
  --color-starstruck-100: #deebff;
  --color-starstruck-200: #bcd8ff;
  --color-starstruck-300: #9ac0f8;
  --color-starstruck-400: #769fdc;
  --color-starstruck-500: #5983bf;
  --color-starstruck-600: #3f67a1;
  --color-starstruck-700: #2e5184;
  --color-starstruck-800: #203f6b;
  --color-starstruck-900: #163056;
  --color-starstruck-950: #0b1e38;
  --color-tropical-forest: #024642;
  --color-tropical-forest-50: #ddfdf9;
  --color-tropical-forest-100: #d0f4f0;
  --color-tropical-forest-200: #b7e2dd;
  --color-tropical-forest-300: #99cbc6;
  --color-tropical-forest-400: #74aba6;
  --color-tropical-forest-500: #558f89;
  --color-tropical-forest-600: #3b726e;
  --color-tropical-forest-700: #275a55;
  --color-tropical-forest-800: #024642;
  --color-tropical-forest-900: #0e3532;
  --color-tropical-forest-950: #06201e;
  --color-close-but-no-cigar: #371c06;
  --color-close-but-no-cigar-50: #fff2ea;
  --color-close-but-no-cigar-100: #fde6d6;
  --color-close-but-no-cigar-200: #edd1bf;
  --color-close-but-no-cigar-300: #d9baa5;
  --color-close-but-no-cigar-400: #bb9a83;
  --color-close-but-no-cigar-500: #a17f68;
  --color-close-but-no-cigar-600: #86664f;
  --color-close-but-no-cigar-700: #6e513c;
  --color-close-but-no-cigar-800: #593f2d;
  --color-close-but-no-cigar-900: #473121;
  --color-close-but-no-cigar-950: #371c06;
}

Similar palettes