Royal Blue to Purple Illusion Color Palette

About this palette

Royal Blue to Purple Illusion is a 4-color vibrant palette: #4C67E5 (Royal Blue), #C68400 (Chicken Masala), #ED75DF (Pink Orchid), #B6ACFF (Purple Illusion). It mixes blue, orange, pink, purple tones and feels balanced overall. The strongest text pairing is #4C67E5 on #B6ACFF with a contrast ratio of 2.36:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Royal Blue	rgb(76, 103, 229)	hsl(229, 75%, 60%)
Chicken Masala	rgb(198, 132, 0)	hsl(40, 100%, 39%)
Pink Orchid	rgb(237, 117, 223)	hsl(307, 77%, 69%)
Purple Illusion	rgb(182, 172, 255)	hsl(247, 100%, 84%)

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.

Color blindness preview

CSS variables

/* Royal Blue to Purple Illusion — https://swatchly.xyz/palette/4c67e5-c68400-ed75df-b6acff */
:root {
  --royal-blue: #4c67e5;
  --chicken-masala: #c68400;
  --pink-orchid: #ed75df;
  --purple-illusion: #b6acff;
}

Tailwind CSS v4

/* Royal Blue to Purple Illusion — https://swatchly.xyz/palette/4c67e5-c68400-ed75df-b6acff */
@theme {
  --color-royal-blue: #4c67e5;
  --color-royal-blue-50: #f1f5ff;
  --color-royal-blue-100: #e6edff;
  --color-royal-blue-200: #cddaff;
  --color-royal-blue-300: #b1c4ff;
  --color-royal-blue-400: #87a3ff;
  --color-royal-blue-500: #6483ff;
  --color-royal-blue-600: #4c67e5;
  --color-royal-blue-700: #384ec2;
  --color-royal-blue-800: #2939a1;
  --color-royal-blue-900: #1d2982;
  --color-royal-blue-950: #0f1758;
  --color-chicken-masala: #c68400;
  --color-chicken-masala-50: #fff6eb;
  --color-chicken-masala-100: #ffedd6;
  --color-chicken-masala-200: #ffd8a4;
  --color-chicken-masala-300: #f7bf72;
  --color-chicken-masala-400: #de9f42;
  --color-chicken-masala-500: #c68400;
  --color-chicken-masala-600: #a06a00;
  --color-chicken-masala-700: #7f5300;
  --color-chicken-masala-800: #634000;
  --color-chicken-masala-900: #4c3000;
  --color-chicken-masala-950: #301c00;
  --color-pink-orchid: #ed75df;
  --color-pink-orchid-50: #fff4fd;
  --color-pink-orchid-100: #ffe7fb;
  --color-pink-orchid-200: #ffc9f6;
  --color-pink-orchid-300: #ffa3f2;
  --color-pink-orchid-400: #ed75df;
  --color-pink-orchid-500: #cc57c0;
  --color-pink-orchid-600: #ac38a1;
  --color-pink-orchid-700: #8e2085;
  --color-pink-orchid-800: #720d6b;
  --color-pink-orchid-900: #5a0154;
  --color-pink-orchid-950: #3a0035;
  --color-purple-illusion: #b6acff;
  --color-purple-illusion-50: #f0efff;
  --color-purple-illusion-100: #e4e2ff;
  --color-purple-illusion-200: #cec9ff;
  --color-purple-illusion-300: #b6acff;
  --color-purple-illusion-400: #998fdd;
  --color-purple-illusion-500: #7f74c2;
  --color-purple-illusion-600: #675ba5;
  --color-purple-illusion-700: #52478a;
  --color-purple-illusion-800: #413671;
  --color-purple-illusion-900: #32295c;
  --color-purple-illusion-950: #1f183c;
}