Close but No Cigar to Tostada Color Palette

About this palette

Close but No Cigar to Tostada is a 5-color warm, earthy, vintage, gradient palette: #331D0F (Close but No Cigar), #5A4A03 (Very Coffee), #758B64 (Kashmir), #C99B35 (Goldie), #E4C29C (Tostada). It mixes brown, green, yellow, orange tones and feels warm overall. The strongest text pairing is #331D0F on #E4C29C with a contrast ratio of 9.44:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Close but No Cigar	rgb(51, 29, 15)	hsl(23, 55%, 13%)
Very Coffee	rgb(90, 74, 3)	hsl(49, 94%, 18%)
Kashmir	rgb(117, 139, 100)	hsl(94, 16%, 47%)
Goldie	rgb(201, 155, 53)	hsl(41, 58%, 50%)
Tostada	rgb(228, 194, 156)	hsl(32, 57%, 75%)

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.

Aa9.44:1 Very good#331D0F on #E4C29C
Aa9.44:1 Very good#E4C29C on #331D0F
Aa6.21:1 Good#331D0F on #C99B35
Aa6.21:1 Good#C99B35 on #331D0F
Aa5.17:1 Good#5A4A03 on #E4C29C
Aa5.17:1 Good#E4C29C on #5A4A03
Aa4.26:1 Poor#331D0F on #758B64
Aa4.26:1 Poor#758B64 on #331D0F

Color blindness preview

CSS variables

/* Close but No Cigar to Tostada — https://swatchly.xyz/palette/331d0f-5a4a03-758b64-c99b35-e4c29c */
:root {
  --close-but-no-cigar: #331d0f;
  --very-coffee: #5a4a03;
  --kashmir: #758b64;
  --goldie: #c99b35;
  --tostada: #e4c29c;
}

Tailwind CSS v4

/* Close but No Cigar to Tostada — https://swatchly.xyz/palette/331d0f-5a4a03-758b64-c99b35-e4c29c */
@theme {
  --color-close-but-no-cigar: #331d0f;
  --color-close-but-no-cigar-50: #fff2eb;
  --color-close-but-no-cigar-100: #fae7dc;
  --color-close-but-no-cigar-200: #e9d2c5;
  --color-close-but-no-cigar-300: #d5bbac;
  --color-close-but-no-cigar-400: #b79b8b;
  --color-close-but-no-cigar-500: #9c8070;
  --color-close-but-no-cigar-600: #816757;
  --color-close-but-no-cigar-700: #6a5243;
  --color-close-but-no-cigar-800: #554033;
  --color-close-but-no-cigar-900: #443227;
  --color-close-but-no-cigar-950: #331d0f;
  --color-very-coffee: #5a4a03;
  --color-very-coffee-50: #fff5d3;
  --color-very-coffee-100: #f6ebc5;
  --color-very-coffee-200: #e4d8aa;
  --color-very-coffee-300: #d1c38f;
  --color-very-coffee-400: #b5a56b;
  --color-very-coffee-500: #9b8b4e;
  --color-very-coffee-600: #827135;
  --color-very-coffee-700: #6b5c22;
  --color-very-coffee-800: #5a4a03;
  --color-very-coffee-900: #453908;
  --color-very-coffee-950: #2d2402;
  --color-kashmir: #758b64;
  --color-kashmir-50: #ecfae2;
  --color-kashmir-100: #e0f0d5;
  --color-kashmir-200: #caddbd;
  --color-kashmir-300: #b2c6a3;
  --color-kashmir-400: #91a780;
  --color-kashmir-500: #758b64;
  --color-kashmir-600: #5c714c;
  --color-kashmir-700: #475a38;
  --color-kashmir-800: #374729;
  --color-kashmir-900: #29371e;
  --color-kashmir-950: #192210;
  --color-goldie: #c99b35;
  --color-goldie-50: #fff5e1;
  --color-goldie-100: #ffe9c0;
  --color-goldie-200: #f6d490;
  --color-goldie-300: #e4bc6d;
  --color-goldie-400: #c99b35;
  --color-goldie-500: #ac7f04;
  --color-goldie-600: #8b6600;
  --color-goldie-700: #6f5000;
  --color-goldie-800: #573e00;
  --color-goldie-900: #432f00;
  --color-goldie-950: #2a1d00;
  --color-tostada: #e4c29c;
  --color-tostada-50: #fff8f0;
  --color-tostada-100: #ffedda;
  --color-tostada-200: #f2dabf;
  --color-tostada-300: #e4c29c;
  --color-tostada-400: #c1a27f;
  --color-tostada-500: #a48561;
  --color-tostada-600: #876946;
  --color-tostada-700: #6d5231;
  --color-tostada-800: #563e22;
  --color-tostada-900: #422e16;
  --color-tostada-950: #2a1c0b;
}