Mochaccino to Green Mana color palette

9A5800Mochaccino 615FFFSecret of Mana 28BAFFHawaii Morning D2C400Groovy Lemon Pie 00B27AGreen Mana

About this palette

Mochaccino to Green Mana is a 5-color vibrant, cool, neon palette: #9A5800 (Mochaccino), #615FFF (Secret of Mana), #28BAFF (Hawaii Morning), #D2C400 (Groovy Lemon Pie), #00B27A (Green Mana). It mixes brown, purple, blue, yellow, green tones and feels cool overall. The strongest text pairing is #9A5800 on #D2C400 with a contrast ratio of 3.09:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mochaccino	rgb(154, 88, 0)	hsl(34, 100%, 30%)
Secret of Mana	rgb(97, 95, 255)	hsl(241, 100%, 69%)
Hawaii Morning	rgb(40, 186, 255)	hsl(199, 100%, 58%)
Groovy Lemon Pie	rgb(210, 196, 0)	hsl(56, 100%, 41%)
Green Mana	rgb(0, 178, 122)	hsl(161, 100%, 35%)

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.

Aa3.09:1 Poor#9A5800 on #D2C400
Aa3.09:1 Poor#D2C400 on #9A5800

Color blindness preview

CSS variables

/* Mochaccino to Green Mana — https://swatchly.xyz/palette/9a5800-615fff-28baff-d2c400-00b27a */
:root {
  --mochaccino: #9a5800;
  --secret-of-mana: #615fff;
  --hawaii-morning: #28baff;
  --groovy-lemon-pie: #d2c400;
  --green-mana: #00b27a;
}

Tailwind CSS v4

/* Mochaccino to Green Mana — https://swatchly.xyz/palette/9a5800-615fff-28baff-d2c400-00b27a */
@theme {
  --color-mochaccino: #9a5800;
  --color-mochaccino-50: #fff3e8;
  --color-mochaccino-100: #ffe6d0;
  --color-mochaccino-200: #ffcc9e;
  --color-mochaccino-300: #f0b179;
  --color-mochaccino-400: #d3904f;
  --color-mochaccino-500: #b7732c;
  --color-mochaccino-600: #9a5800;
  --color-mochaccino-700: #7b4500;
  --color-mochaccino-800: #613500;
  --color-mochaccino-900: #4c2800;
  --color-mochaccino-950: #311800;
  --color-secret-of-mana: #615fff;
  --color-secret-of-mana-50: #f0f2ff;
  --color-secret-of-mana-100: #e1e6ff;
  --color-secret-of-mana-200: #c6ceff;
  --color-secret-of-mana-300: #a7b3ff;
  --color-secret-of-mana-400: #808aff;
  --color-secret-of-mana-500: #615fff;
  --color-secret-of-mana-600: #4d44dd;
  --color-secret-of-mana-700: #3c2fbc;
  --color-secret-of-mana-800: #2f1f9c;
  --color-secret-of-mana-900: #241480;
  --color-secret-of-mana-950: #150958;
  --color-hawaii-morning: #28baff;
  --color-hawaii-morning-50: #f3faff;
  --color-hawaii-morning-100: #e3f4ff;
  --color-hawaii-morning-200: #bee6ff;
  --color-hawaii-morning-300: #8fd5ff;
  --color-hawaii-morning-400: #28baff;
  --color-hawaii-morning-500: #009bd9;
  --color-hawaii-morning-600: #007caf;
  --color-hawaii-morning-700: #00628b;
  --color-hawaii-morning-800: #004c6c;
  --color-hawaii-morning-900: #003953;
  --color-hawaii-morning-950: #002234;
  --color-groovy-lemon-pie: #d2c400;
  --color-groovy-lemon-pie-50: #fef9ae;
  --color-groovy-lemon-pie-100: #f5ef99;
  --color-groovy-lemon-pie-200: #e4db72;
  --color-groovy-lemon-pie-300: #d2c400;
  --color-groovy-lemon-pie-400: #b0a400;
  --color-groovy-lemon-pie-500: #928800;
  --color-groovy-lemon-pie-600: #766e00;
  --color-groovy-lemon-pie-700: #5e5700;
  --color-groovy-lemon-pie-800: #494400;
  --color-groovy-lemon-pie-900: #393400;
  --color-groovy-lemon-pie-950: #232000;
  --color-green-mana: #00b27a;
  --color-green-mana-50: #cdffe5;
  --color-green-mana-100: #a9fad2;
  --color-green-mana-200: #85e8b9;
  --color-green-mana-300: #5bd29d;
  --color-green-mana-400: #00b27a;
  --color-green-mana-500: #009565;
  --color-green-mana-600: #007851;
  --color-green-mana-700: #006040;
  --color-green-mana-800: #004c32;
  --color-green-mana-900: #003c26;
  --color-green-mana-950: #002717;
}