Start generating

Puffy Cloud to Meteorite color palette

DFDCF8Puffy CloudA2AAE3Wondrous Wisteria9B9876A Frond in Need7C6F3EGarden Weed625613Ayahuasca Vine423C6EMeteorite
Open in generator Export PNG, PDF, ASE…

About this palette

Puffy Cloud to Meteorite is a 6-color vintage palette: #DFDCF8 (Puffy Cloud), #A2AAE3 (Wondrous Wisteria), #9B9876 (A Frond in Need), #7C6F3E (Garden Weed), #625613 (Ayahuasca Vine), #423C6E (Meteorite). It mixes purple, yellow, brown tones and feels balanced overall. The strongest text pairing is #DFDCF8 on #423C6E with a contrast ratio of 7.48:1, and 2 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Puffy Cloudrgb(223, 220, 248)hsl(246, 67%, 92%)
Wondrous Wisteriargb(162, 170, 227)hsl(233, 54%, 76%)
A Frond in Needrgb(155, 152, 118)hsl(55, 16%, 54%)
Garden Weedrgb(124, 111, 62)hsl(47, 33%, 36%)
Ayahuasca Vinergb(98, 86, 19)hsl(51, 68%, 23%)
Meteoritergb(66, 60, 110)hsl(247, 29%, 33%)

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.

  • Aa7.48:1 Very good#DFDCF8 on #423C6E
  • Aa7.48:1 Very good#423C6E on #DFDCF8
  • Aa5.50:1 Good#DFDCF8 on #625613
  • Aa5.50:1 Good#625613 on #DFDCF8
  • Aa4.47:1 Poor#A2AAE3 on #423C6E
  • Aa4.47:1 Poor#423C6E on #A2AAE3
  • Aa3.75:1 Poor#DFDCF8 on #7C6F3E
  • Aa3.75:1 Poor#7C6F3E on #DFDCF8

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Puffy Cloud to Meteorite — https://swatchly.xyz/palette/dfdcf8-a2aae3-9b9876-7c6f3e-625613-423c6e */
:root {
  --puffy-cloud: #dfdcf8;
  --wondrous-wisteria: #a2aae3;
  --a-frond-in-need: #9b9876;
  --garden-weed: #7c6f3e;
  --ayahuasca-vine: #625613;
  --meteorite: #423c6e;
}

Tailwind CSS v4

/* Puffy Cloud to Meteorite — https://swatchly.xyz/palette/dfdcf8-a2aae3-9b9876-7c6f3e-625613-423c6e */
@theme {
  --color-puffy-cloud: #dfdcf8;
  --color-puffy-cloud-50: #fafaff;
  --color-puffy-cloud-100: #f2f0ff;
  --color-puffy-cloud-200: #dfdcf8;
  --color-puffy-cloud-300: #c7c5db;
  --color-puffy-cloud-400: #a6a3bc;
  --color-puffy-cloud-500: #8986a0;
  --color-puffy-cloud-600: #6e6b83;
  --color-puffy-cloud-700: #565369;
  --color-puffy-cloud-800: #424052;
  --color-puffy-cloud-900: #333040;
  --color-puffy-cloud-950: #1f1e29;
  --color-wondrous-wisteria: #a2aae3;
  --color-wondrous-wisteria-50: #f8f9ff;
  --color-wondrous-wisteria-100: #eff1ff;
  --color-wondrous-wisteria-200: #d9dfff;
  --color-wondrous-wisteria-300: #c2c9f8;
  --color-wondrous-wisteria-400: #a2aae3;
  --color-wondrous-wisteria-500: #858cc3;
  --color-wondrous-wisteria-600: #696fa4;
  --color-wondrous-wisteria-700: #515687;
  --color-wondrous-wisteria-800: #3d426c;
  --color-wondrous-wisteria-900: #2d3154;
  --color-wondrous-wisteria-950: #1a1d35;
  --color-a-frond-in-need: #9b9876;
  --color-a-frond-in-need-50: #f4f2dd;
  --color-a-frond-in-need-100: #e8e7cf;
  --color-a-frond-in-need-200: #d3d1b5;
  --color-a-frond-in-need-300: #bcb99a;
  --color-a-frond-in-need-400: #9b9876;
  --color-a-frond-in-need-500: #827f5e;
  --color-a-frond-in-need-600: #696647;
  --color-a-frond-in-need-700: #545235;
  --color-a-frond-in-need-800: #434027;
  --color-a-frond-in-need-900: #34321d;
  --color-a-frond-in-need-950: #212010;
  --color-garden-weed: #7c6f3e;
  --color-garden-weed-50: #fdf5d9;
  --color-garden-weed-100: #f5eccc;
  --color-garden-weed-200: #e3d9b3;
  --color-garden-weed-300: #cfc398;
  --color-garden-weed-400: #b1a474;
  --color-garden-weed-500: #968958;
  --color-garden-weed-600: #7c6f3e;
  --color-garden-weed-700: #63582b;
  --color-garden-weed-800: #4e441c;
  --color-garden-weed-900: #3d3411;
  --color-garden-weed-950: #262007;
  --color-ayahuasca-vine: #625613;
  --color-ayahuasca-vine-50: #fdf6d3;
  --color-ayahuasca-vine-100: #f4ecc5;
  --color-ayahuasca-vine-200: #e2d9aa;
  --color-ayahuasca-vine-300: #cdc28c;
  --color-ayahuasca-vine-400: #afa367;
  --color-ayahuasca-vine-500: #948749;
  --color-ayahuasca-vine-600: #796d2f;
  --color-ayahuasca-vine-700: #625613;
  --color-ayahuasca-vine-800: #4d430d;
  --color-ayahuasca-vine-900: #3b3304;
  --color-ayahuasca-vine-950: #251f01;
  --color-meteorite: #423c6e;
  --color-meteorite-50: #f4f4ff;
  --color-meteorite-100: #e9e9ff;
  --color-meteorite-200: #d4d2ff;
  --color-meteorite-300: #bebbee;
  --color-meteorite-400: #9f9bd2;
  --color-meteorite-500: #847fb7;
  --color-meteorite-600: #6a659a;
  --color-meteorite-700: #545080;
  --color-meteorite-800: #423c6e;
  --color-meteorite-900: #332f53;
  --color-meteorite-950: #1f1c36;
}

Similar palettes