Pika Yellow to Nightly Expedition Color Palette

About this palette

Pika Yellow to Nightly Expedition is a 5-color vibrant, cool, neon palette: #EAE635 (Pika Yellow), #CFB400 (Mustard), #7560FF (Candy Grape Fizz), #4B2CB4 (Royalty), #1D1B80 (Nightly Expedition). It mixes yellow, purple, blue tones and feels cool overall. The strongest text pairing is #EAE635 on #1D1B80 with a contrast ratio of 10.43:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pika Yellow	rgb(234, 230, 53)	hsl(59, 81%, 56%)
Mustard	rgb(207, 180, 0)	hsl(52, 100%, 41%)
Candy Grape Fizz	rgb(117, 96, 255)	hsl(248, 100%, 69%)
Royalty	rgb(75, 44, 180)	hsl(254, 61%, 44%)
Nightly Expedition	rgb(29, 27, 128)	hsl(241, 65%, 30%)

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.

Aa10.43:1 Very good#EAE635 on #1D1B80
Aa10.43:1 Very good#1D1B80 on #EAE635
Aa6.84:1 Good#EAE635 on #4B2CB4
Aa6.84:1 Good#4B2CB4 on #EAE635
Aa6.70:1 Good#CFB400 on #1D1B80
Aa6.70:1 Good#1D1B80 on #CFB400
Aa4.39:1 Poor#CFB400 on #4B2CB4
Aa4.39:1 Poor#4B2CB4 on #CFB400

Color blindness preview

CSS variables

/* Pika Yellow to Nightly Expedition — https://swatchly.xyz/palette/eae635-cfb400-7560ff-4b2cb4-1d1b80 */
:root {
  --pika-yellow: #eae635;
  --mustard: #cfb400;
  --candy-grape-fizz: #7560ff;
  --royalty: #4b2cb4;
  --nightly-expedition: #1d1b80;
}

Tailwind CSS v4

/* Pika Yellow to Nightly Expedition — https://swatchly.xyz/palette/eae635-cfb400-7560ff-4b2cb4-1d1b80 */
@theme {
  --color-pika-yellow: #eae635;
  --color-pika-yellow-50: #ffffb8;
  --color-pika-yellow-100: #f7f7a3;
  --color-pika-yellow-200: #eae635;
  --color-pika-yellow-300: #d0cd49;
  --color-pika-yellow-400: #b0ac00;
  --color-pika-yellow-500: #918e00;
  --color-pika-yellow-600: #757200;
  --color-pika-yellow-700: #5c5a00;
  --color-pika-yellow-800: #474500;
  --color-pika-yellow-900: #363500;
  --color-pika-yellow-950: #222100;
  --color-mustard: #cfb400;
  --color-mustard-50: #fff0a5;
  --color-mustard-100: #f5e48e;
  --color-mustard-200: #e2ce65;
  --color-mustard-300: #cfb400;
  --color-mustard-400: #ae9700;
  --color-mustard-500: #927e00;
  --color-mustard-600: #766600;
  --color-mustard-700: #5f5100;
  --color-mustard-800: #4b4000;
  --color-mustard-900: #3c3300;
  --color-mustard-950: #261f00;
  --color-candy-grape-fizz: #7560ff;
  --color-candy-grape-fizz-50: #f2f3ff;
  --color-candy-grape-fizz-100: #e5e7ff;
  --color-candy-grape-fizz-200: #cdcfff;
  --color-candy-grape-fizz-300: #b3b4ff;
  --color-candy-grape-fizz-400: #908bff;
  --color-candy-grape-fizz-500: #7560ff;
  --color-candy-grape-fizz-600: #5e44dd;
  --color-candy-grape-fizz-700: #4b2ebc;
  --color-candy-grape-fizz-800: #3b1e9c;
  --color-candy-grape-fizz-900: #2e127f;
  --color-candy-grape-fizz-950: #1c0757;
  --color-royalty: #4b2cb4;
  --color-royalty-50: #f4f4ff;
  --color-royalty-100: #e8e9ff;
  --color-royalty-200: #d1d1ff;
  --color-royalty-300: #b7b5ff;
  --color-royalty-400: #948cff;
  --color-royalty-500: #7967f1;
  --color-royalty-600: #604ace;
  --color-royalty-700: #4b2cb4;
  --color-royalty-800: #3a248c;
  --color-royalty-900: #2c1871;
  --color-royalty-950: #1b0c4b;
  --color-nightly-expedition: #1d1b80;
  --color-nightly-expedition-50: #f2f5ff;
  --color-nightly-expedition-100: #e4eaff;
  --color-nightly-expedition-200: #cad6ff;
  --color-nightly-expedition-300: #acbdff;
  --color-nightly-expedition-400: #8298ff;
  --color-nightly-expedition-500: #667be5;
  --color-nightly-expedition-600: #4e5fc4;
  --color-nightly-expedition-700: #3b48a4;
  --color-nightly-expedition-800: #2c3586;
  --color-nightly-expedition-900: #1d1b80;
  --color-nightly-expedition-950: #111647;
}