Acropolis to Dark & Stormy Color Palette

About this palette

Acropolis to Dark & Stormy is a 5-color muted palette: #FDE2CE (Acropolis), #9C7F6A (Woodhaven), #B2BBA7 (Meadow Morn), #20232C (Dark), #363F53 (Dark & Stormy). It mixes orange, gray, blue tones and feels warm overall. The strongest text pairing is #FDE2CE on #20232C with a contrast ratio of 12.66:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Acropolis	rgb(253, 226, 206)	hsl(26, 92%, 90%)
Woodhaven	rgb(156, 127, 106)	hsl(25, 20%, 51%)
Meadow Morn	rgb(178, 187, 167)	hsl(87, 13%, 69%)
Dark	rgb(32, 35, 44)	hsl(225, 16%, 15%)
Dark & Stormy	rgb(54, 63, 83)	hsl(221, 21%, 27%)

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.66:1 Super#FDE2CE on #20232C
Aa12.66:1 Super#20232C on #FDE2CE
Aa8.50:1 Very good#FDE2CE on #363F53
Aa8.50:1 Very good#363F53 on #FDE2CE
Aa7.89:1 Very good#B2BBA7 on #20232C
Aa7.89:1 Very good#20232C on #B2BBA7
Aa5.30:1 Good#B2BBA7 on #363F53
Aa5.30:1 Good#363F53 on #B2BBA7

Color blindness preview

CSS variables

/* Acropolis to Dark & Stormy — https://swatchly.xyz/palette/fde2ce-9c7f6a-b2bba7-20232c-363f53 */
:root {
  --acropolis: #fde2ce;
  --woodhaven: #9c7f6a;
  --meadow-morn: #b2bba7;
  --dark: #20232c;
  --dark-stormy: #363f53;
}

Tailwind CSS v4

/* Acropolis to Dark & Stormy — https://swatchly.xyz/palette/fde2ce-9c7f6a-b2bba7-20232c-363f53 */
@theme {
  --color-acropolis: #fde2ce;
  --color-acropolis-50: #ffefe4;
  --color-acropolis-100: #fde2ce;
  --color-acropolis-200: #e5d0c2;
  --color-acropolis-300: #d0baa9;
  --color-acropolis-400: #b39b89;
  --color-acropolis-500: #98806e;
  --color-acropolis-600: #7d6655;
  --color-acropolis-700: #655141;
  --color-acropolis-800: #503e31;
  --color-acropolis-900: #3e2f24;
  --color-acropolis-950: #281d14;
  --color-woodhaven: #9c7f6a;
  --color-woodhaven-50: #fff2e9;
  --color-woodhaven-100: #fbe7d8;
  --color-woodhaven-200: #ead2c1;
  --color-woodhaven-300: #d5bba8;
  --color-woodhaven-400: #b79b86;
  --color-woodhaven-500: #9c7f6a;
  --color-woodhaven-600: #806551;
  --color-woodhaven-700: #684f3d;
  --color-woodhaven-800: #523d2d;
  --color-woodhaven-900: #402e21;
  --color-woodhaven-950: #291c12;
  --color-meadow-morn: #b2bba7;
  --color-meadow-morn-50: #edf2e6;
  --color-meadow-morn-100: #e1e7d9;
  --color-meadow-morn-200: #cbd2c2;
  --color-meadow-morn-300: #b2bba7;
  --color-meadow-morn-400: #959d8a;
  --color-meadow-morn-500: #7b8471;
  --color-meadow-morn-600: #636b59;
  --color-meadow-morn-700: #4e5545;
  --color-meadow-morn-800: #3d4436;
  --color-meadow-morn-900: #303529;
  --color-meadow-morn-950: #1d2118;
  --color-dark: #20232c;
  --color-dark-50: #f2f5fc;
  --color-dark-100: #e8ebf3;
  --color-dark-200: #d4d7e0;
  --color-dark-300: #bdc1cb;
  --color-dark-400: #9da1ac;
  --color-dark-500: #838792;
  --color-dark-600: #696d78;
  --color-dark-700: #545761;
  --color-dark-800: #42454e;
  --color-dark-900: #34363e;
  --color-dark-950: #20232c;
  --color-dark-stormy: #363f53;
  --color-dark-stormy-50: #f1f5ff;
  --color-dark-stormy-100: #e4ebfb;
  --color-dark-stormy-200: #cfd8ea;
  --color-dark-stormy-300: #b7c0d5;
  --color-dark-stormy-400: #96a0b7;
  --color-dark-stormy-500: #7a849b;
  --color-dark-stormy-600: #60697f;
  --color-dark-stormy-700: #4a5266;
  --color-dark-stormy-800: #363f53;
  --color-dark-stormy-900: #2a303e;
  --color-dark-stormy-950: #191d27;
}