Botanical Night to Mochaccino color palette

004139Botanical Night 9D80BEPetrified Purple EFD7FFScented Spring F2A600Groovy Giraffe 9C5400Mochaccino

Open in generator Export PNG, PDF, ASE…

About this palette

Botanical Night to Mochaccino is a 5-color cool palette: #004139 (Botanical Night), #9D80BE (Petrified Purple), #EFD7FF (Scented Spring), #F2A600 (Groovy Giraffe), #9C5400 (Mochaccino). It mixes turquoise, purple, yellow, brown tones and feels cool overall. The strongest text pairing is #004139 on #EFD7FF with a contrast ratio of 8.72:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Botanical Night	rgb(0, 65, 57)	hsl(173, 100%, 13%)
Petrified Purple	rgb(157, 128, 190)	hsl(268, 32%, 62%)
Scented Spring	rgb(239, 215, 255)	hsl(276, 100%, 92%)
Groovy Giraffe	rgb(242, 166, 0)	hsl(41, 100%, 47%)
Mochaccino	rgb(156, 84, 0)	hsl(32, 100%, 31%)

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.72:1 Very good#004139 on #EFD7FF
Aa8.72:1 Very good#EFD7FF on #004139
Aa5.64:1 Good#004139 on #F2A600
Aa5.64:1 Good#F2A600 on #004139
Aa4.30:1 Poor#EFD7FF on #9C5400
Aa4.30:1 Poor#9C5400 on #EFD7FF
Aa3.45:1 Poor#004139 on #9D80BE
Aa3.45:1 Poor#9D80BE on #004139

Color blindness preview

CSS variables

/* Botanical Night to Mochaccino — https://swatchly.xyz/palette/004139-9d80be-efd7ff-f2a600-9c5400 */
:root {
  --botanical-night: #004139;
  --petrified-purple: #9d80be;
  --scented-spring: #efd7ff;
  --groovy-giraffe: #f2a600;
  --mochaccino: #9c5400;
}

Tailwind CSS v4

/* Botanical Night to Mochaccino — https://swatchly.xyz/palette/004139-9d80be-efd7ff-f2a600-9c5400 */
@theme {
  --color-botanical-night: #004139;
  --color-botanical-night-50: #defdf6;
  --color-botanical-night-100: #d1f4ed;
  --color-botanical-night-200: #b8e2d9;
  --color-botanical-night-300: #9dccc3;
  --color-botanical-night-400: #7aafa5;
  --color-botanical-night-500: #5d948a;
  --color-botanical-night-600: #447a70;
  --color-botanical-night-700: #30635a;
  --color-botanical-night-800: #214f48;
  --color-botanical-night-900: #004139;
  --color-botanical-night-950: #0a2824;
  --color-petrified-purple: #9d80be;
  --color-petrified-purple-50: #f9f4ff;
  --color-petrified-purple-100: #f3eaff;
  --color-petrified-purple-200: #e6d2ff;
  --color-petrified-purple-300: #d3bbf1;
  --color-petrified-purple-400: #b79bd7;
  --color-petrified-purple-500: #9d80be;
  --color-petrified-purple-600: #80649f;
  --color-petrified-purple-700: #674d83;
  --color-petrified-purple-800: #513a69;
  --color-petrified-purple-900: #3e2b53;
  --color-petrified-purple-950: #271935;
  --color-scented-spring: #efd7ff;
  --color-scented-spring-50: #f5e7ff;
  --color-scented-spring-100: #efd7ff;
  --color-scented-spring-200: #dac7e6;
  --color-scented-spring-300: #c6b2d4;
  --color-scented-spring-400: #a993b7;
  --color-scented-spring-500: #8f799e;
  --color-scented-spring-600: #766183;
  --color-scented-spring-700: #604c6c;
  --color-scented-spring-800: #4b3b56;
  --color-scented-spring-900: #3a2c43;
  --color-scented-spring-950: #251b2b;
  --color-groovy-giraffe: #f2a600;
  --color-groovy-giraffe-50: #ffedd5;
  --color-groovy-giraffe-100: #ffdfb2;
  --color-groovy-giraffe-200: #ffc369;
  --color-groovy-giraffe-300: #f2a600;
  --color-groovy-giraffe-400: #cc8b00;
  --color-groovy-giraffe-500: #aa7400;
  --color-groovy-giraffe-600: #8a5d00;
  --color-groovy-giraffe-700: #6f4a00;
  --color-groovy-giraffe-800: #593a00;
  --color-groovy-giraffe-900: #462d00;
  --color-groovy-giraffe-950: #2d1b00;
  --color-mochaccino: #9c5400;
  --color-mochaccino-50: #fff3e9;
  --color-mochaccino-100: #ffe5d2;
  --color-mochaccino-200: #ffcaa2;
  --color-mochaccino-300: #f3af79;
  --color-mochaccino-400: #d68c4e;
  --color-mochaccino-500: #ba6f2c;
  --color-mochaccino-600: #9c5400;
  --color-mochaccino-700: #7d4200;
  --color-mochaccino-800: #623300;
  --color-mochaccino-900: #4d2600;
  --color-mochaccino-950: #321600;
}