Secret of Mana to Wasabi Nori color palette

526BF7Secret of Mana DEEBFFCloudless 87107FRoyal Purpleness A4C862Two Peas in a Pod 2B3100Wasabi Nori

Open in generator Export PNG, PDF, ASE…

About this palette

Secret of Mana to Wasabi Nori is a 5-color cool palette: #526BF7 (Secret of Mana), #DEEBFF (Cloudless), #87107F (Royal Purpleness), #A4C862 (Two Peas in a Pod), #2B3100 (Wasabi Nori). It mixes blue, white, purple, green tones and feels cool overall. The strongest text pairing is #DEEBFF on #2B3100 with a contrast ratio of 11.31:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Secret of Mana	rgb(82, 107, 247)	hsl(231, 91%, 65%)
Cloudless	rgb(222, 235, 255)	hsl(216, 100%, 94%)
Royal Purpleness	rgb(135, 16, 127)	hsl(304, 79%, 30%)
Two Peas in a Pod	rgb(164, 200, 98)	hsl(81, 48%, 58%)
Wasabi Nori	rgb(43, 49, 0)	hsl(67, 100%, 10%)

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.31:1 Very good#DEEBFF on #2B3100
Aa11.31:1 Very good#2B3100 on #DEEBFF
Aa7.23:1 Very good#DEEBFF on #87107F
Aa7.23:1 Very good#87107F on #DEEBFF
Aa7.14:1 Very good#A4C862 on #2B3100
Aa7.14:1 Very good#2B3100 on #A4C862
Aa4.57:1 Good#87107F on #A4C862
Aa4.57:1 Good#A4C862 on #87107F

Color blindness preview

CSS variables

/* Secret of Mana to Wasabi Nori — https://swatchly.xyz/palette/526bf7-deebff-87107f-a4c862-2b3100 */
:root {
  --secret-of-mana: #526bf7;
  --cloudless: #deebff;
  --royal-purpleness: #87107f;
  --two-peas-in-a-pod: #a4c862;
  --wasabi-nori: #2b3100;
}

Tailwind CSS v4

/* Secret of Mana to Wasabi Nori — https://swatchly.xyz/palette/526bf7-deebff-87107f-a4c862-2b3100 */
@theme {
  --color-secret-of-mana: #526bf7;
  --color-secret-of-mana-50: #eff3ff;
  --color-secret-of-mana-100: #dfe7ff;
  --color-secret-of-mana-200: #c2d1ff;
  --color-secret-of-mana-300: #a1b7ff;
  --color-secret-of-mana-400: #7490ff;
  --color-secret-of-mana-500: #526bf7;
  --color-secret-of-mana-600: #3e51d6;
  --color-secret-of-mana-700: #2e3cb5;
  --color-secret-of-mana-800: #222b96;
  --color-secret-of-mana-900: #191f7b;
  --color-secret-of-mana-950: #0d1154;
  --color-cloudless: #deebff;
  --color-cloudless-50: #eef5ff;
  --color-cloudless-100: #deebff;
  --color-cloudless-200: #ced7e6;
  --color-cloudless-300: #b6c1d1;
  --color-cloudless-400: #96a2b4;
  --color-cloudless-500: #7b8799;
  --color-cloudless-600: #616c7d;
  --color-cloudless-700: #4c5665;
  --color-cloudless-800: #3a4350;
  --color-cloudless-900: #2c333f;
  --color-cloudless-950: #1a2028;
  --color-royal-purpleness: #87107f;
  --color-royal-purpleness-50: #fff0fc;
  --color-royal-purpleness-100: #ffe0fa;
  --color-royal-purpleness-200: #ffbef6;
  --color-royal-purpleness-300: #fb96ee;
  --color-royal-purpleness-400: #de70d2;
  --color-royal-purpleness-500: #c050b5;
  --color-royal-purpleness-600: #a13497;
  --color-royal-purpleness-700: #87107f;
  --color-royal-purpleness-800: #6a0e63;
  --color-royal-purpleness-900: #54044f;
  --color-royal-purpleness-950: #370133;
  --color-two-peas-in-a-pod: #a4c862;
  --color-two-peas-in-a-pod-50: #e4fbc1;
  --color-two-peas-in-a-pod-100: #d7f1b0;
  --color-two-peas-in-a-pod-200: #c0dd90;
  --color-two-peas-in-a-pod-300: #a4c862;
  --color-two-peas-in-a-pod-400: #87a946;
  --color-two-peas-in-a-pod-500: #6e8f24;
  --color-two-peas-in-a-pod-600: #567400;
  --color-two-peas-in-a-pod-700: #445d00;
  --color-two-peas-in-a-pod-800: #354900;
  --color-two-peas-in-a-pod-900: #293900;
  --color-two-peas-in-a-pod-950: #182400;
  --color-wasabi-nori: #2b3100;
  --color-wasabi-nori-50: #f3f9dd;
  --color-wasabi-nori-100: #e9efd0;
  --color-wasabi-nori-200: #d5dcb7;
  --color-wasabi-nori-300: #bec69c;
  --color-wasabi-nori-400: #9da677;
  --color-wasabi-nori-500: #818a5a;
  --color-wasabi-nori-600: #666e40;
  --color-wasabi-nori-700: #4f562c;
  --color-wasabi-nori-800: #3b411d;
  --color-wasabi-nori-900: #2b3100;
  --color-wasabi-nori-950: #1a1d08;
}