Start generating

Foundation White to Close but No Cigar color palette

ECECFFFoundation WhiteE0D4A4Woven92A3E9Cold Lips7278ADFlood514F2AJungle King2C240CClose but No Cigar
Open in generator Export PNG, PDF, ASE…

About this palette

Foundation White to Close but No Cigar is a 6-color vintage palette: #ECECFF (Foundation White), #E0D4A4 (Woven), #92A3E9 (Cold Lips), #7278AD (Flood), #514F2A (Jungle King), #2C240C (Close but No Cigar). It mixes white, yellow, blue, purple, brown tones and feels warm overall. The strongest text pairing is #ECECFF on #2C240C with a contrast ratio of 13.20:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Foundation Whitergb(236, 236, 255)hsl(240, 100%, 96%)
Wovenrgb(224, 212, 164)hsl(48, 49%, 76%)
Cold Lipsrgb(146, 163, 233)hsl(228, 66%, 74%)
Floodrgb(114, 120, 173)hsl(234, 26%, 56%)
Jungle Kingrgb(81, 79, 42)hsl(57, 32%, 24%)
Close but No Cigarrgb(44, 36, 12)hsl(45, 57%, 11%)

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.20:1 Super#ECECFF on #2C240C
  • Aa13.20:1 Super#2C240C on #ECECFF
  • Aa10.35:1 Very good#E0D4A4 on #2C240C
  • Aa10.35:1 Very good#2C240C on #E0D4A4
  • Aa7.20:1 Very good#ECECFF on #514F2A
  • Aa7.20:1 Very good#514F2A on #ECECFF
  • Aa6.33:1 Good#92A3E9 on #2C240C
  • Aa6.33:1 Good#2C240C on #92A3E9

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Foundation White to Close but No Cigar — https://swatchly.xyz/palette/ececff-e0d4a4-92a3e9-7278ad-514f2a-2c240c */
:root {
  --foundation-white: #ececff;
  --woven: #e0d4a4;
  --cold-lips: #92a3e9;
  --flood: #7278ad;
  --jungle-king: #514f2a;
  --close-but-no-cigar: #2c240c;
}

Tailwind CSS v4

/* Foundation White to Close but No Cigar — https://swatchly.xyz/palette/ececff-e0d4a4-92a3e9-7278ad-514f2a-2c240c */
@theme {
  --color-foundation-white: #ececff;
  --color-foundation-white-50: #f7f7ff;
  --color-foundation-white-100: #ececff;
  --color-foundation-white-200: #d8d8e6;
  --color-foundation-white-300: #c1c1d1;
  --color-foundation-white-400: #a1a1b2;
  --color-foundation-white-500: #858596;
  --color-foundation-white-600: #6b6a7b;
  --color-foundation-white-700: #545462;
  --color-foundation-white-800: #41414e;
  --color-foundation-white-900: #32323c;
  --color-foundation-white-950: #1e1e26;
  --color-woven: #e0d4a4;
  --color-woven-50: #faf3d8;
  --color-woven-100: #f0e8ca;
  --color-woven-200: #e0d4a4;
  --color-woven-300: #c8be95;
  --color-woven-400: #aa9f73;
  --color-woven-500: #908457;
  --color-woven-600: #766b3f;
  --color-woven-700: #5f552c;
  --color-woven-800: #4b421f;
  --color-woven-900: #3a3314;
  --color-woven-950: #241f09;
  --color-cold-lips: #92a3e9;
  --color-cold-lips-50: #f5f7ff;
  --color-cold-lips-100: #e9eeff;
  --color-cold-lips-200: #d0daff;
  --color-cold-lips-300: #b3c3ff;
  --color-cold-lips-400: #92a3e9;
  --color-cold-lips-500: #7686ca;
  --color-cold-lips-600: #5c6aab;
  --color-cold-lips-700: #47538e;
  --color-cold-lips-800: #353f73;
  --color-cold-lips-900: #272f5b;
  --color-cold-lips-950: #161c3b;
  --color-flood: #7278ad;
  --color-flood-50: #f0f3ff;
  --color-flood-100: #e2e6ff;
  --color-flood-200: #c9cffc;
  --color-flood-300: #b0b6e9;
  --color-flood-400: #8e95cb;
  --color-flood-500: #7278ad;
  --color-flood-600: #5a6091;
  --color-flood-700: #474b77;
  --color-flood-800: #373a61;
  --color-flood-900: #2a2d4d;
  --color-flood-950: #191b33;
  --color-jungle-king: #514f2a;
  --color-jungle-king-50: #f7f7e0;
  --color-jungle-king-100: #eeedd3;
  --color-jungle-king-200: #d9d8b9;
  --color-jungle-king-300: #c1c09d;
  --color-jungle-king-400: #a19f79;
  --color-jungle-king-500: #84835c;
  --color-jungle-king-600: #696742;
  --color-jungle-king-700: #514f2a;
  --color-jungle-king-800: #3f3d21;
  --color-jungle-king-900: #302f17;
  --color-jungle-king-950: #1e1d0c;
  --color-close-but-no-cigar: #2c240c;
  --color-close-but-no-cigar-50: #faf5e5;
  --color-close-but-no-cigar-100: #f1ebd9;
  --color-close-but-no-cigar-200: #dfd7c2;
  --color-close-but-no-cigar-300: #c9c1a9;
  --color-close-but-no-cigar-400: #aaa187;
  --color-close-but-no-cigar-500: #90876c;
  --color-close-but-no-cigar-600: #766e54;
  --color-close-but-no-cigar-700: #605841;
  --color-close-but-no-cigar-800: #4d4631;
  --color-close-but-no-cigar-900: #3e3725;
  --color-close-but-no-cigar-950: #2c240c;
}

Similar palettes