Ultra Mint to Purple Emperor Color Palette

About this palette

Ultra Mint to Purple Emperor is a 5-color cool palette: #94ECBD (Ultra Mint), #E88D66 (Firewatch), #7F7BF2 (Orchid), #632B04 (Count Chocula), #6137B1 (Purple Emperor). It mixes green, orange, purple, brown tones and feels cool overall. The strongest text pairing is #94ECBD on #632B04 with a contrast ratio of 7.98:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Ultra Mint	rgb(148, 236, 189)	hsl(148, 70%, 75%)
Firewatch	rgb(232, 141, 102)	hsl(18, 74%, 65%)
Orchid	rgb(127, 123, 242)	hsl(242, 82%, 72%)
Count Chocula	rgb(99, 43, 4)	hsl(25, 92%, 20%)
Purple Emperor	rgb(97, 55, 177)	hsl(261, 53%, 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.

Aa7.98:1 Very good#94ECBD on #632B04
Aa7.98:1 Very good#632B04 on #94ECBD
Aa5.57:1 Good#94ECBD on #6137B1
Aa5.57:1 Good#6137B1 on #94ECBD
Aa4.49:1 Poor#E88D66 on #632B04
Aa4.49:1 Poor#632B04 on #E88D66
Aa3.20:1 Poor#7F7BF2 on #632B04
Aa3.20:1 Poor#632B04 on #7F7BF2

Color blindness preview

CSS variables

/* Ultra Mint to Purple Emperor — https://swatchly.xyz/palette/94ecbd-e88d66-7f7bf2-632b04-6137b1 */
:root {
  --ultra-mint: #94ecbd;
  --firewatch: #e88d66;
  --orchid: #7f7bf2;
  --count-chocula: #632b04;
  --purple-emperor: #6137b1;
}

Tailwind CSS v4

/* Ultra Mint to Purple Emperor — https://swatchly.xyz/palette/94ecbd-e88d66-7f7bf2-632b04-6137b1 */
@theme {
  --color-ultra-mint: #94ecbd;
  --color-ultra-mint-50: #d8ffe8;
  --color-ultra-mint-100: #c3f8da;
  --color-ultra-mint-200: #94ecbd;
  --color-ultra-mint-300: #89d2ab;
  --color-ultra-mint-400: #61b48a;
  --color-ultra-mint-500: #40996e;
  --color-ultra-mint-600: #227e55;
  --color-ultra-mint-700: #066541;
  --color-ultra-mint-800: #005032;
  --color-ultra-mint-900: #003e25;
  --color-ultra-mint-950: #002716;
  --color-firewatch: #e88d66;
  --color-firewatch-50: #fff5f1;
  --color-firewatch-100: #ffe9e1;
  --color-firewatch-200: #ffd0bd;
  --color-firewatch-300: #ffb190;
  --color-firewatch-400: #e88d66;
  --color-firewatch-500: #c8704a;
  --color-firewatch-600: #a9552f;
  --color-firewatch-700: #8b3e1a;
  --color-firewatch-800: #702d0a;
  --color-firewatch-900: #582002;
  --color-firewatch-950: #391100;
  --color-orchid: #7f7bf2;
  --color-orchid-50: #f5f6ff;
  --color-orchid-100: #eaecff;
  --color-orchid-200: #d5d8ff;
  --color-orchid-300: #bcbfff;
  --color-orchid-400: #9a9bff;
  --color-orchid-500: #7f7bf2;
  --color-orchid-600: #655ed1;
  --color-orchid-700: #4f46b0;
  --color-orchid-800: #3d3391;
  --color-orchid-900: #2e2474;
  --color-orchid-950: #1c144d;
  --color-count-chocula: #632b04;
  --color-count-chocula-50: #fff2ec;
  --color-count-chocula-100: #ffe5d8;
  --color-count-chocula-200: #fecbb0;
  --color-count-chocula-300: #ebb192;
  --color-count-chocula-400: #ce8f6d;
  --color-count-chocula-500: #b17250;
  --color-count-chocula-600: #925736;
  --color-count-chocula-700: #764123;
  --color-count-chocula-800: #632b04;
  --color-count-chocula-900: #49230d;
  --color-count-chocula-950: #2f1405;
  --color-purple-emperor: #6137b1;
  --color-purple-emperor-50: #f5f3ff;
  --color-purple-emperor-100: #ece8ff;
  --color-purple-emperor-200: #d9d1ff;
  --color-purple-emperor-300: #c5b5ff;
  --color-purple-emperor-400: #a98bff;
  --color-purple-emperor-500: #906ce9;
  --color-purple-emperor-600: #7651ca;
  --color-purple-emperor-700: #6137b1;
  --color-purple-emperor-800: #4c298d;
  --color-purple-emperor-900: #3b1c72;
  --color-purple-emperor-950: #250e4d;
}