Fabric of Space to Minute Mauve Color Palette

About this palette

Fabric of Space to Minute Mauve is a 5-color cool palette: #361850 (Fabric of Space), #5F4182 (In the Vines), #708B00 (Asparagus Sultan), #A2A600 (Countryside), #ECE2FF (Minute Mauve). It mixes purple, green, yellow tones and feels cool overall. The strongest text pairing is #361850 on #ECE2FF with a contrast ratio of 12.03:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Fabric of Space	rgb(54, 24, 80)	hsl(272, 54%, 20%)
In the Vines	rgb(95, 65, 130)	hsl(268, 33%, 38%)
Asparagus Sultan	rgb(112, 139, 0)	hsl(72, 100%, 27%)
Countryside	rgb(162, 166, 0)	hsl(61, 100%, 33%)
Minute Mauve	rgb(236, 226, 255)	hsl(261, 100%, 94%)

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.03:1 Super#361850 on #ECE2FF
Aa12.03:1 Super#ECE2FF on #361850
Aa6.58:1 Good#5F4182 on #ECE2FF
Aa6.58:1 Good#ECE2FF on #5F4182
Aa5.69:1 Good#361850 on #A2A600
Aa5.69:1 Good#A2A600 on #361850
Aa3.84:1 Poor#361850 on #708B00
Aa3.84:1 Poor#708B00 on #361850

Color blindness preview

CSS variables

/* Fabric of Space to Minute Mauve — https://swatchly.xyz/palette/361850-5f4182-708b00-a2a600-ece2ff */
:root {
  --fabric-of-space: #361850;
  --in-the-vines: #5f4182;
  --asparagus-sultan: #708b00;
  --countryside: #a2a600;
  --minute-mauve: #ece2ff;
}

Tailwind CSS v4

/* Fabric of Space to Minute Mauve — https://swatchly.xyz/palette/361850-5f4182-708b00-a2a600-ece2ff */
@theme {
  --color-fabric-of-space: #361850;
  --color-fabric-of-space-50: #f8f2ff;
  --color-fabric-of-space-100: #f1e6ff;
  --color-fabric-of-space-200: #e3ccff;
  --color-fabric-of-space-300: #ceb3ed;
  --color-fabric-of-space-400: #ae90d0;
  --color-fabric-of-space-500: #9173b2;
  --color-fabric-of-space-600: #745793;
  --color-fabric-of-space-700: #5b4176;
  --color-fabric-of-space-800: #452e5b;
  --color-fabric-of-space-900: #361850;
  --color-fabric-of-space-950: #1e112a;
  --color-in-the-vines: #5f4182;
  --color-in-the-vines-50: #f7f3ff;
  --color-in-the-vines-100: #f0e6ff;
  --color-in-the-vines-200: #e1ccff;
  --color-in-the-vines-300: #ccb1f1;
  --color-in-the-vines-400: #ad90d5;
  --color-in-the-vines-500: #9273b9;
  --color-in-the-vines-600: #76599a;
  --color-in-the-vines-700: #5f4182;
  --color-in-the-vines-800: #4a3266;
  --color-in-the-vines-900: #392551;
  --color-in-the-vines-950: #241635;
  --color-asparagus-sultan: #708b00;
  --color-asparagus-sultan-50: #eafdc1;
  --color-asparagus-sultan-100: #ddf3ae;
  --color-asparagus-sultan-200: #c6df8c;
  --color-asparagus-sultan-300: #adc868;
  --color-asparagus-sultan-400: #8ca838;
  --color-asparagus-sultan-500: #708b00;
  --color-asparagus-sultan-600: #5a7000;
  --color-asparagus-sultan-700: #475900;
  --color-asparagus-sultan-800: #374600;
  --color-asparagus-sultan-900: #2a3600;
  --color-asparagus-sultan-950: #1a2200;
  --color-countryside: #a2a600;
  --color-countryside-50: #f5fab7;
  --color-countryside-100: #ebf0a4;
  --color-countryside-200: #d7dd80;
  --color-countryside-300: #c1c658;
  --color-countryside-400: #a2a600;
  --color-countryside-500: #878a00;
  --color-countryside-600: #6c6f00;
  --color-countryside-700: #565800;
  --color-countryside-800: #434500;
  --color-countryside-900: #343500;
  --color-countryside-950: #202100;
  --color-minute-mauve: #ece2ff;
  --color-minute-mauve-50: #f4efff;
  --color-minute-mauve-100: #ece2ff;
  --color-minute-mauve-200: #d8d0e6;
  --color-minute-mauve-300: #c2bad2;
  --color-minute-mauve-400: #a49bb5;
  --color-minute-mauve-500: #89809a;
  --color-minute-mauve-600: #6f667f;
  --color-minute-mauve-700: #595167;
  --color-minute-mauve-800: #453e52;
  --color-minute-mauve-900: #352f40;
  --color-minute-mauve-950: #211d29;
}