Fedora to Vintage Color Palette

About this palette

Fedora to Vintage is a 5-color muted, cool palette: #645467 (Fedora), #B79DB8 (Pastel Purple), #D3BCD7 (Girl Crush), #2B222A (Darth Vader), #866F87 (Vintage). It mixes purple, pink, gray tones and feels cool overall. The strongest text pairing is #D3BCD7 on #2B222A with a contrast ratio of 8.75:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fedora	rgb(100, 84, 103)	hsl(291, 10%, 37%)
Pastel Purple	rgb(183, 157, 184)	hsl(298, 16%, 67%)
Girl Crush	rgb(211, 188, 215)	hsl(291, 25%, 79%)
Darth Vader	rgb(43, 34, 42)	hsl(307, 12%, 15%)
Vintage	rgb(134, 111, 135)	hsl(298, 10%, 48%)

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.

Aa8.75:1 Very good#D3BCD7 on #2B222A
Aa8.75:1 Very good#2B222A on #D3BCD7
Aa6.25:1 Good#B79DB8 on #2B222A
Aa6.25:1 Good#2B222A on #B79DB8
Aa3.97:1 Poor#645467 on #D3BCD7
Aa3.97:1 Poor#D3BCD7 on #645467
Aa3.40:1 Poor#2B222A on #866F87
Aa3.40:1 Poor#866F87 on #2B222A

Color blindness preview

CSS variables

/* Fedora to Vintage — https://swatchly.xyz/palette/645467-b79db8-d3bcd7-2b222a-866f87 */
:root {
  --fedora: #645467;
  --pastel-purple: #b79db8;
  --girl-crush: #d3bcd7;
  --darth-vader: #2b222a;
  --vintage: #866f87;
}

Tailwind CSS v4

/* Fedora to Vintage — https://swatchly.xyz/palette/645467-b79db8-d3bcd7-2b222a-866f87 */
@theme {
  --color-fedora: #645467;
  --color-fedora-50: #fcf1fd;
  --color-fedora-100: #f2e7f4;
  --color-fedora-200: #e1d3e3;
  --color-fedora-300: #ccbdcf;
  --color-fedora-400: #af9eb2;
  --color-fedora-500: #948397;
  --color-fedora-600: #7a6a7d;
  --color-fedora-700: #645467;
  --color-fedora-800: #4e4151;
  --color-fedora-900: #3d313f;
  --color-fedora-950: #261e28;
  --color-pastel-purple: #b79db8;
  --color-pastel-purple-50: #fff3ff;
  --color-pastel-purple-100: #f9e8f9;
  --color-pastel-purple-200: #e8d4e8;
  --color-pastel-purple-300: #d4bdd4;
  --color-pastel-purple-400: #b79db8;
  --color-pastel-purple-500: #9a819b;
  --color-pastel-purple-600: #7e667f;
  --color-pastel-purple-700: #654f66;
  --color-pastel-purple-800: #4f3c50;
  --color-pastel-purple-900: #3d2d3e;
  --color-pastel-purple-950: #261b27;
  --color-girl-crush: #d3bcd7;
  --color-girl-crush-50: #fdf3ff;
  --color-girl-crush-100: #f7e8f9;
  --color-girl-crush-200: #e5d4e8;
  --color-girl-crush-300: #d3bcd7;
  --color-girl-crush-400: #b29cb5;
  --color-girl-crush-500: #968099;
  --color-girl-crush-600: #7a657d;
  --color-girl-crush-700: #614f65;
  --color-girl-crush-800: #4c3c4f;
  --color-girl-crush-900: #3b2d3d;
  --color-girl-crush-950: #251b27;
  --color-darth-vader: #2b222a;
  --color-darth-vader-50: #faf3f9;
  --color-darth-vader-100: #f0e8ef;
  --color-darth-vader-200: #ddd4dc;
  --color-darth-vader-300: #c7bdc6;
  --color-darth-vader-400: #a99da7;
  --color-darth-vader-500: #8f838d;
  --color-darth-vader-600: #756a74;
  --color-darth-vader-700: #5f555e;
  --color-darth-vader-800: #4c444b;
  --color-darth-vader-900: #3d363c;
  --color-darth-vader-950: #2b222a;
  --color-vintage: #866f87;
  --color-vintage-50: #fef0ff;
  --color-vintage-100: #f7e8f8;
  --color-vintage-200: #e8d5e8;
  --color-vintage-300: #d5c0d5;
  --color-vintage-400: #b8a1b9;
  --color-vintage-500: #9f88a0;
  --color-vintage-600: #866f87;
  --color-vintage-700: #6c576d;
  --color-vintage-800: #554256;
  --color-vintage-900: #423242;
  --color-vintage-950: #291e2a;
}