Cloudless to Close but No Cigar Color Palette

About this palette

Cloudless to Close but No Cigar is a 4-color vintage palette: #D9EBFF (Cloudless), #629AD3 (Blue Bay), #826338 (Autumn Gold), #322006 (Close but No Cigar). It mixes white, blue, brown tones and feels warm overall. The strongest text pairing is #D9EBFF on #322006 with a contrast ratio of 12.85:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Cloudless	rgb(217, 235, 255)	hsl(212, 100%, 93%)
Blue Bay	rgb(98, 154, 211)	hsl(210, 56%, 61%)
Autumn Gold	rgb(130, 99, 56)	hsl(35, 40%, 36%)
Close but No Cigar	rgb(50, 32, 6)	hsl(35, 79%, 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.

Aa12.85:1 Super#D9EBFF on #322006
Aa12.85:1 Super#322006 on #D9EBFF
Aa5.27:1 Good#629AD3 on #322006
Aa5.27:1 Good#322006 on #629AD3
Aa4.56:1 Good#D9EBFF on #826338
Aa4.56:1 Good#826338 on #D9EBFF

Color blindness preview

CSS variables

/* Cloudless to Close but No Cigar — https://swatchly.xyz/palette/d9ebff-629ad3-826338-322006 */
:root {
  --cloudless: #d9ebff;
  --blue-bay: #629ad3;
  --autumn-gold: #826338;
  --close-but-no-cigar: #322006;
}

Tailwind CSS v4

/* Cloudless to Close but No Cigar — https://swatchly.xyz/palette/d9ebff-629ad3-826338-322006 */
@theme {
  --color-cloudless: #d9ebff;
  --color-cloudless-50: #ebf4ff;
  --color-cloudless-100: #d9ebff;
  --color-cloudless-200: #cad7e6;
  --color-cloudless-300: #b2c1d2;
  --color-cloudless-400: #92a2b4;
  --color-cloudless-500: #778799;
  --color-cloudless-600: #5e6d7e;
  --color-cloudless-700: #495766;
  --color-cloudless-800: #374451;
  --color-cloudless-900: #2a343f;
  --color-cloudless-950: #192028;
  --color-blue-bay: #629ad3;
  --color-blue-bay-50: #e7f2ff;
  --color-blue-bay-100: #d1e7ff;
  --color-blue-bay-200: #aad4ff;
  --color-blue-bay-300: #89bbf0;
  --color-blue-bay-400: #629ad3;
  --color-blue-bay-500: #4980b8;
  --color-blue-bay-600: #32689b;
  --color-blue-bay-700: #215281;
  --color-blue-bay-800: #15416a;
  --color-blue-bay-900: #0c3356;
  --color-blue-bay-950: #05203a;
  --color-autumn-gold: #826338;
  --color-autumn-gold-50: #fff3e4;
  --color-autumn-gold-100: #fde7cb;
  --color-autumn-gold-200: #ecd2b0;
  --color-autumn-gold-300: #d8ba94;
  --color-autumn-gold-400: #ba9a6f;
  --color-autumn-gold-500: #9e7e52;
  --color-autumn-gold-600: #826338;
  --color-autumn-gold-700: #694e27;
  --color-autumn-gold-800: #543c19;
  --color-autumn-gold-900: #422d10;
  --color-autumn-gold-950: #2a1b06;
  --color-close-but-no-cigar: #322006;
  --color-close-but-no-cigar-50: #fff3e5;
  --color-close-but-no-cigar-100: #f8e9d6;
  --color-close-but-no-cigar-200: #e6d4bf;
  --color-close-but-no-cigar-300: #d2bda5;
  --color-close-but-no-cigar-400: #b39e82;
  --color-close-but-no-cigar-500: #998368;
  --color-close-but-no-cigar-600: #7f6a4f;
  --color-close-but-no-cigar-700: #68543c;
  --color-close-but-no-cigar-800: #54432d;
  --color-close-but-no-cigar-900: #433422;
  --color-close-but-no-cigar-950: #322006;
}