Start generating

Parisian Patina to Autumn Gold color palette

80988DParisian Patina2F2228Darth Vader55434EBlack Magic9CAFC5Lost in TimeD7CDB4Berber7B6143Autumn Gold
Open in generator Export PNG, PDF, ASE…

About this palette

Parisian Patina to Autumn Gold is a 6-color muted palette: #80988D (Parisian Patina), #2F2228 (Darth Vader), #55434E (Black Magic), #9CAFC5 (Lost in Time), #D7CDB4 (Berber), #7B6143 (Autumn Gold). It mixes gray, blue, yellow, brown tones and feels warm overall. The strongest text pairing is #2F2228 on #D7CDB4 with a contrast ratio of 9.62:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Parisian Patinargb(128, 152, 141)hsl(153, 10%, 55%)
Darth Vaderrgb(47, 34, 40)hsl(332, 16%, 16%)
Black Magicrgb(85, 67, 78)hsl(323, 12%, 30%)
Lost in Timergb(156, 175, 197)hsl(212, 26%, 69%)
Berberrgb(215, 205, 180)hsl(43, 30%, 77%)
Autumn Goldrgb(123, 97, 67)hsl(32, 29%, 37%)

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.62:1 Very good#2F2228 on #D7CDB4
  • Aa9.62:1 Very good#D7CDB4 on #2F2228
  • Aa6.78:1 Good#2F2228 on #9CAFC5
  • Aa6.78:1 Good#9CAFC5 on #2F2228
  • Aa5.78:1 Good#55434E on #D7CDB4
  • Aa5.78:1 Good#D7CDB4 on #55434E
  • Aa4.92:1 Good#80988D on #2F2228
  • Aa4.92:1 Good#2F2228 on #80988D

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Parisian Patina to Autumn Gold — https://swatchly.xyz/palette/80988d-2f2228-55434e-9cafc5-d7cdb4-7b6143 */
:root {
  --parisian-patina: #80988d;
  --darth-vader: #2f2228;
  --black-magic: #55434e;
  --lost-in-time: #9cafc5;
  --berber: #d7cdb4;
  --autumn-gold: #7b6143;
}

Tailwind CSS v4

/* Parisian Patina to Autumn Gold — https://swatchly.xyz/palette/80988d-2f2228-55434e-9cafc5-d7cdb4-7b6143 */
@theme {
  --color-parisian-patina: #80988d;
  --color-parisian-patina-50: #edfbf5;
  --color-parisian-patina-100: #e4f4ec;
  --color-parisian-patina-200: #d1e3da;
  --color-parisian-patina-300: #bacfc5;
  --color-parisian-patina-400: #9bb2a7;
  --color-parisian-patina-500: #80988d;
  --color-parisian-patina-600: #647b71;
  --color-parisian-patina-700: #4d6258;
  --color-parisian-patina-800: #3a4c44;
  --color-parisian-patina-900: #2a3a33;
  --color-parisian-patina-950: #18241f;
  --color-darth-vader: #2f2228;
  --color-darth-vader-50: #fcf2f6;
  --color-darth-vader-100: #f3e8ec;
  --color-darth-vader-200: #e1d3d9;
  --color-darth-vader-300: #cbbcc3;
  --color-darth-vader-400: #ad9ca3;
  --color-darth-vader-500: #93828a;
  --color-darth-vader-600: #796a71;
  --color-darth-vader-700: #63555b;
  --color-darth-vader-800: #504449;
  --color-darth-vader-900: #41363b;
  --color-darth-vader-950: #2f2228;
  --color-black-magic: #55434e;
  --color-black-magic-50: #fef1f8;
  --color-black-magic-100: #f5e7ef;
  --color-black-magic-200: #e2d2dc;
  --color-black-magic-300: #cfbcc7;
  --color-black-magic-400: #b19da9;
  --color-black-magic-500: #97838f;
  --color-black-magic-600: #7e6a76;
  --color-black-magic-700: #675560;
  --color-black-magic-800: #55434e;
  --color-black-magic-900: #41343c;
  --color-black-magic-950: #2a2026;
  --color-lost-in-time: #9cafc5;
  --color-lost-in-time-50: #f5faff;
  --color-lost-in-time-100: #e8f3ff;
  --color-lost-in-time-200: #d3e1f1;
  --color-lost-in-time-300: #bdcddf;
  --color-lost-in-time-400: #9cafc5;
  --color-lost-in-time-500: #7f91a6;
  --color-lost-in-time-600: #637589;
  --color-lost-in-time-700: #4c5c6e;
  --color-lost-in-time-800: #394757;
  --color-lost-in-time-900: #2a3543;
  --color-lost-in-time-950: #182029;
  --color-berber: #d7cdb4;
  --color-berber-50: #f4eedf;
  --color-berber-100: #e9e2d1;
  --color-berber-200: #d7cdb4;
  --color-berber-300: #c1b8a3;
  --color-berber-400: #a49b83;
  --color-berber-500: #8a816a;
  --color-berber-600: #716852;
  --color-berber-700: #5b533f;
  --color-berber-800: #494230;
  --color-berber-900: #383223;
  --color-berber-950: #231f14;
  --color-autumn-gold: #7b6143;
  --color-autumn-gold-50: #fff3e6;
  --color-autumn-gold-100: #fae7d2;
  --color-autumn-gold-200: #e8d1b9;
  --color-autumn-gold-300: #d2b99d;
  --color-autumn-gold-400: #b4987a;
  --color-autumn-gold-500: #977c5d;
  --color-autumn-gold-600: #7b6143;
  --color-autumn-gold-700: #634c32;
  --color-autumn-gold-800: #4f3b24;
  --color-autumn-gold-900: #3d2d19;
  --color-autumn-gold-950: #271b0d;
}

Similar palettes