Acropolis to Close but No Cigar Color Palette

About this palette

Acropolis to Close but No Cigar is a 4-color warm, earthy, vintage, monochromatic, gradient palette: #FFE3CF (Acropolis), #FF8F3A (Mango Madness), #914700 (Otterly Brown), #381801 (Close but No Cigar). It mixes orange, brown tones and feels warm overall. The strongest text pairing is #FFE3CF on #381801 with a contrast ratio of 13.19:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Acropolis	rgb(255, 227, 207)	hsl(25, 100%, 91%)
Mango Madness	rgb(255, 143, 58)	hsl(26, 100%, 61%)
Otterly Brown	rgb(145, 71, 0)	hsl(29, 100%, 28%)
Close but No Cigar	rgb(56, 24, 1)	hsl(25, 96%, 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.19:1 Super#FFE3CF on #381801
Aa13.19:1 Super#381801 on #FFE3CF
Aa7.11:1 Very good#FF8F3A on #381801
Aa7.11:1 Very good#381801 on #FF8F3A
Aa5.52:1 Good#FFE3CF on #914700
Aa5.52:1 Good#914700 on #FFE3CF

Color blindness preview

CSS variables

/* Acropolis to Close but No Cigar — https://swatchly.xyz/palette/ffe3cf-ff8f3a-914700-381801 */
:root {
  --acropolis: #ffe3cf;
  --mango-madness: #ff8f3a;
  --otterly-brown: #914700;
  --close-but-no-cigar: #381801;
}

Tailwind CSS v4

/* Acropolis to Close but No Cigar — https://swatchly.xyz/palette/ffe3cf-ff8f3a-914700-381801 */
@theme {
  --color-acropolis: #ffe3cf;
  --color-acropolis-50: #fff0e6;
  --color-acropolis-100: #ffe3cf;
  --color-acropolis-200: #e6d1c3;
  --color-acropolis-300: #d2baaa;
  --color-acropolis-400: #b49b89;
  --color-acropolis-500: #99806e;
  --color-acropolis-600: #7e6655;
  --color-acropolis-700: #665041;
  --color-acropolis-800: #513e30;
  --color-acropolis-900: #3f2f24;
  --color-acropolis-950: #281d14;
  --color-mango-madness: #ff8f3a;
  --color-mango-madness-50: #fff9f5;
  --color-mango-madness-100: #fff0e6;
  --color-mango-madness-200: #ffd9c2;
  --color-mango-madness-300: #ffbd93;
  --color-mango-madness-400: #ff8f3a;
  --color-mango-madness-500: #dc710b;
  --color-mango-madness-600: #b25900;
  --color-mango-madness-700: #8e4500;
  --color-mango-madness-800: #6e3400;
  --color-mango-madness-900: #542600;
  --color-mango-madness-950: #351500;
  --color-otterly-brown: #914700;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe6d6;
  --color-otterly-brown-200: #ffceae;
  --color-otterly-brown-300: #f9b285;
  --color-otterly-brown-400: #df925e;
  --color-otterly-brown-500: #c57640;
  --color-otterly-brown-600: #a95d24;
  --color-otterly-brown-700: #914700;
  --color-otterly-brown-800: #733700;
  --color-otterly-brown-900: #592900;
  --color-otterly-brown-950: #3a1800;
  --color-close-but-no-cigar: #381801;
  --color-close-but-no-cigar-50: #fff2eb;
  --color-close-but-no-cigar-100: #ffe5d6;
  --color-close-but-no-cigar-200: #f1d0bc;
  --color-close-but-no-cigar-300: #ddb8a2;
  --color-close-but-no-cigar-400: #c0987f;
  --color-close-but-no-cigar-500: #a57d64;
  --color-close-but-no-cigar-600: #89634b;
  --color-close-but-no-cigar-700: #704e38;
  --color-close-but-no-cigar-800: #5b3d29;
  --color-close-but-no-cigar-900: #482e1e;
  --color-close-but-no-cigar-950: #381801;
}