Botanical Night to Minute Mauve Color Palette

About this palette

Botanical Night to Minute Mauve is a 5-color cool palette: #114441 (Botanical Night), #F79F9A (Young Crab), #5C9658 (Wicked Witch), #72557B (Dr Who), #F0E0FA (Minute Mauve). It mixes turquoise, pink, green, purple tones and feels cool overall. The strongest text pairing is #114441 on #F0E0FA with a contrast ratio of 8.69:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(17, 68, 65)	hsl(176, 60%, 17%)
Young Crab	rgb(247, 159, 154)	hsl(3, 85%, 79%)
Wicked Witch	rgb(92, 150, 88)	hsl(116, 26%, 47%)
Dr Who	rgb(114, 85, 123)	hsl(286, 18%, 41%)
Minute Mauve	rgb(240, 224, 250)	hsl(277, 72%, 93%)

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.69:1 Very good#114441 on #F0E0FA
Aa8.69:1 Very good#F0E0FA on #114441
Aa5.39:1 Good#114441 on #F79F9A
Aa5.39:1 Good#F79F9A on #114441
Aa5.07:1 Good#72557B on #F0E0FA
Aa5.07:1 Good#F0E0FA on #72557B
Aa3.14:1 Poor#F79F9A on #72557B
Aa3.14:1 Poor#72557B on #F79F9A

Color blindness preview

CSS variables

/* Botanical Night to Minute Mauve — https://swatchly.xyz/palette/114441-f79f9a-5c9658-72557b-f0e0fa */
:root {
  --botanical-night: #114441;
  --young-crab: #f79f9a;
  --wicked-witch: #5c9658;
  --dr-who: #72557b;
  --minute-mauve: #f0e0fa;
}

Tailwind CSS v4

/* Botanical Night to Minute Mauve — https://swatchly.xyz/palette/114441-f79f9a-5c9658-72557b-f0e0fa */
@theme {
  --color-botanical-night: #114441;
  --color-botanical-night-50: #e0fcf9;
  --color-botanical-night-100: #d4f3f0;
  --color-botanical-night-200: #bbe0dd;
  --color-botanical-night-300: #9fc9c5;
  --color-botanical-night-400: #7aa9a5;
  --color-botanical-night-500: #5c8d89;
  --color-botanical-night-600: #42706d;
  --color-botanical-night-700: #2d5854;
  --color-botanical-night-800: #114441;
  --color-botanical-night-900: #143331;
  --color-botanical-night-950: #091f1e;
  --color-young-crab: #f79f9a;
  --color-young-crab-50: #ffedeb;
  --color-young-crab-100: #ffdedb;
  --color-young-crab-200: #ffc0bb;
  --color-young-crab-300: #f79f9a;
  --color-young-crab-400: #d5827e;
  --color-young-crab-500: #b96763;
  --color-young-crab-600: #9c4e4c;
  --color-young-crab-700: #813b39;
  --color-young-crab-800: #692b2a;
  --color-young-crab-900: #54201f;
  --color-young-crab-950: #371111;
  --color-wicked-witch: #5c9658;
  --color-wicked-witch-50: #e1ffde;
  --color-wicked-witch-100: #d1f7ce;
  --color-wicked-witch-200: #b8e5b4;
  --color-wicked-witch-300: #9dd099;
  --color-wicked-witch-400: #79b275;
  --color-wicked-witch-500: #5c9658;
  --color-wicked-witch-600: #437b3f;
  --color-wicked-witch-700: #2f632c;
  --color-wicked-witch-800: #204e1e;
  --color-wicked-witch-900: #153d14;
  --color-wicked-witch-950: #0a2609;
  --color-dr-who: #72557b;
  --color-dr-who-50: #fcf1ff;
  --color-dr-who-100: #f6e1fc;
  --color-dr-who-200: #e2c9ea;
  --color-dr-who-300: #ccb0d5;
  --color-dr-who-400: #ac8db5;
  --color-dr-who-500: #8f7098;
  --color-dr-who-600: #72557b;
  --color-dr-who-700: #5b4263;
  --color-dr-who-800: #48334f;
  --color-dr-who-900: #38263e;
  --color-dr-who-950: #241728;
  --color-minute-mauve: #f0e0fa;
  --color-minute-mauve-50: #f7eefd;
  --color-minute-mauve-100: #f0e0fa;
  --color-minute-mauve-200: #dbcfe2;
  --color-minute-mauve-300: #c6b8ce;
  --color-minute-mauve-400: #a899b1;
  --color-minute-mauve-500: #8d7e96;
  --color-minute-mauve-600: #73657b;
  --color-minute-mauve-700: #5c5064;
  --color-minute-mauve-800: #483d4f;
  --color-minute-mauve-900: #382f3d;
  --color-minute-mauve-950: #231c27;
}