Jubilant Meadow to Muted Purple color palette

6DBB3BJubilant Meadow 001E31Oxford by Night FFCCA0Apricot Sherbet 7B2E72Violet Vixen 8B5B86Muted Purple

Open in generator Export PNG, PDF, ASE…

About this palette

Jubilant Meadow to Muted Purple is a 5-color warm palette: #6DBB3B (Jubilant Meadow), #001E31 (Oxford by Night), #FFCCA0 (Apricot Sherbet), #7B2E72 (Violet Vixen), #8B5B86 (Muted Purple). It mixes green, blue, orange, purple, pink tones and feels warm overall. The strongest text pairing is #001E31 on #FFCCA0 with a contrast ratio of 11.70:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Jubilant Meadow	rgb(109, 187, 59)	hsl(97, 52%, 48%)
Oxford by Night	rgb(0, 30, 49)	hsl(203, 100%, 10%)
Apricot Sherbet	rgb(255, 204, 160)	hsl(28, 100%, 81%)
Violet Vixen	rgb(123, 46, 114)	hsl(307, 46%, 33%)
Muted Purple	rgb(139, 91, 134)	hsl(306, 21%, 45%)

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.

Aa11.70:1 Very good#001E31 on #FFCCA0
Aa11.70:1 Very good#FFCCA0 on #001E31
Aa7.17:1 Very good#6DBB3B on #001E31
Aa7.17:1 Very good#001E31 on #6DBB3B
Aa5.81:1 Good#FFCCA0 on #7B2E72
Aa5.81:1 Good#7B2E72 on #FFCCA0
Aa3.66:1 Poor#FFCCA0 on #8B5B86
Aa3.66:1 Poor#8B5B86 on #FFCCA0

Color blindness preview

CSS variables

/* Jubilant Meadow to Muted Purple — https://swatchly.xyz/palette/6dbb3b-001e31-ffcca0-7b2e72-8b5b86 */
:root {
  --jubilant-meadow: #6dbb3b;
  --oxford-by-night: #001e31;
  --apricot-sherbet: #ffcca0;
  --violet-vixen: #7b2e72;
  --muted-purple: #8b5b86;
}

Tailwind CSS v4

/* Jubilant Meadow to Muted Purple — https://swatchly.xyz/palette/6dbb3b-001e31-ffcca0-7b2e72-8b5b86 */
@theme {
  --color-jubilant-meadow: #6dbb3b;
  --color-jubilant-meadow-50: #e6ffda;
  --color-jubilant-meadow-100: #ccfdb3;
  --color-jubilant-meadow-200: #b2ed94;
  --color-jubilant-meadow-300: #95d871;
  --color-jubilant-meadow-400: #6dbb3b;
  --color-jubilant-meadow-500: #519e12;
  --color-jubilant-meadow-600: #3e8000;
  --color-jubilant-meadow-700: #306500;
  --color-jubilant-meadow-800: #244f00;
  --color-jubilant-meadow-900: #1a3d00;
  --color-jubilant-meadow-950: #0e2600;
  --color-oxford-by-night: #001e31;
  --color-oxford-by-night-50: #ecf7ff;
  --color-oxford-by-night-100: #d9efff;
  --color-oxford-by-night-200: #c2dbef;
  --color-oxford-by-night-300: #a8c5db;
  --color-oxford-by-night-400: #86a6be;
  --color-oxford-by-night-500: #698aa2;
  --color-oxford-by-night-600: #4f6e85;
  --color-oxford-by-night-700: #3b576b;
  --color-oxford-by-night-800: #2a4354;
  --color-oxford-by-night-900: #1e3240;
  --color-oxford-by-night-950: #001e31;
  --color-apricot-sherbet: #ffcca0;
  --color-apricot-sherbet-50: #fff3e8;
  --color-apricot-sherbet-100: #ffe6d1;
  --color-apricot-sherbet-200: #ffcca0;
  --color-apricot-sherbet-300: #e2b793;
  --color-apricot-sherbet-400: #c5976e;
  --color-apricot-sherbet-500: #aa7b51;
  --color-apricot-sherbet-600: #8d6138;
  --color-apricot-sherbet-700: #734b25;
  --color-apricot-sherbet-800: #5c3917;
  --color-apricot-sherbet-900: #482b0e;
  --color-apricot-sherbet-950: #2f1a05;
  --color-violet-vixen: #7b2e72;
  --color-violet-vixen-50: #fff0fc;
  --color-violet-vixen-100: #ffe0f9;
  --color-violet-vixen-200: #ffbff4;
  --color-violet-vixen-300: #eda3e1;
  --color-violet-vixen-400: #cf7fc3;
  --color-violet-vixen-500: #b362a7;
  --color-violet-vixen-600: #94478a;
  --color-violet-vixen-700: #7b2e72;
  --color-violet-vixen-800: #602459;
  --color-violet-vixen-900: #4c1946;
  --color-violet-vixen-950: #310c2d;
  --color-muted-purple: #8b5b86;
  --color-muted-purple-50: #fff0fd;
  --color-muted-purple-100: #ffe1fb;
  --color-muted-purple-200: #f2caed;
  --color-muted-purple-300: #dfb1d9;
  --color-muted-purple-400: #c290bc;
  --color-muted-purple-500: #a775a1;
  --color-muted-purple-600: #8b5b86;
  --color-muted-purple-700: #71466c;
  --color-muted-purple-800: #5a3456;
  --color-muted-purple-900: #462743;
  --color-muted-purple-950: #2d162b;
}