Start generating

Pastel Blue to 20000 Leagues Under the Sea color palette

ACBCFFPastel Blue7E8FF2Perrywinkle684AE2Candy Grape Fizz3E3874Good Karma19166E20000 Leagues Under the Sea
Open in generator Export PNG, PDF, ASE…

About this palette

Pastel Blue to 20000 Leagues Under the Sea is a 5-color vibrant, cool, monochromatic, gradient palette: #ACBCFF (Pastel Blue), #7E8FF2 (Perrywinkle), #684AE2 (Candy Grape Fizz), #3E3874 (Good Karma), #19166E (20000 Leagues Under the Sea). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #ACBCFF on #19166E with a contrast ratio of 8.25:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Pastel Bluergb(172, 188, 255)hsl(228, 100%, 84%)
Perrywinklergb(126, 143, 242)hsl(231, 82%, 72%)
Candy Grape Fizzrgb(104, 74, 226)hsl(252, 72%, 59%)
Good Karmargb(62, 56, 116)hsl(246, 35%, 34%)
20000 Leagues Under the Seargb(25, 22, 110)hsl(242, 67%, 26%)

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.25:1 Very good#ACBCFF on #19166E
  • Aa8.25:1 Very good#19166E on #ACBCFF
  • Aa5.63:1 Good#ACBCFF on #3E3874
  • Aa5.63:1 Good#3E3874 on #ACBCFF
  • Aa5.14:1 Good#7E8FF2 on #19166E
  • Aa5.14:1 Good#19166E on #7E8FF2
  • Aa3.51:1 Poor#7E8FF2 on #3E3874
  • Aa3.51:1 Poor#3E3874 on #7E8FF2

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Pastel Blue to 20000 Leagues Under the Sea — https://swatchly.xyz/palette/acbcff-7e8ff2-684ae2-3e3874-19166e */
:root {
  --pastel-blue: #acbcff;
  --perrywinkle: #7e8ff2;
  --candy-grape-fizz: #684ae2;
  --good-karma: #3e3874;
  --c-20000-leagues-under-the-sea: #19166e;
}

Tailwind CSS v4

/* Pastel Blue to 20000 Leagues Under the Sea — https://swatchly.xyz/palette/acbcff-7e8ff2-684ae2-3e3874-19166e */
@theme {
  --color-pastel-blue: #acbcff;
  --color-pastel-blue-50: #f1f4ff;
  --color-pastel-blue-100: #e4eaff;
  --color-pastel-blue-200: #cad5ff;
  --color-pastel-blue-300: #acbcff;
  --color-pastel-blue-400: #8e9ddb;
  --color-pastel-blue-500: #7381c0;
  --color-pastel-blue-600: #5a67a2;
  --color-pastel-blue-700: #465086;
  --color-pastel-blue-800: #353e6d;
  --color-pastel-blue-900: #282f57;
  --color-pastel-blue-950: #171c39;
  --color-perrywinkle: #7e8ff2;
  --color-perrywinkle-50: #eef1ff;
  --color-perrywinkle-100: #dfe5ff;
  --color-perrywinkle-200: #c3ceff;
  --color-perrywinkle-300: #a4b4ff;
  --color-perrywinkle-400: #7e8ff2;
  --color-perrywinkle-500: #6675d5;
  --color-perrywinkle-600: #4f5bb7;
  --color-perrywinkle-700: #3d4799;
  --color-perrywinkle-800: #2f367e;
  --color-perrywinkle-900: #232967;
  --color-perrywinkle-950: #151946;
  --color-candy-grape-fizz: #684ae2;
  --color-candy-grape-fizz-50: #f4f4ff;
  --color-candy-grape-fizz-100: #e9e9ff;
  --color-candy-grape-fizz-200: #d3d3ff;
  --color-candy-grape-fizz-300: #bbb9ff;
  --color-candy-grape-fizz-400: #9a91ff;
  --color-candy-grape-fizz-500: #8069ff;
  --color-candy-grape-fizz-600: #684ae2;
  --color-candy-grape-fizz-700: #5334be;
  --color-candy-grape-fizz-800: #41229d;
  --color-candy-grape-fizz-900: #321580;
  --color-candy-grape-fizz-950: #1f0856;
  --color-good-karma: #3e3874;
  --color-good-karma-50: #f4f4ff;
  --color-good-karma-100: #e9e9ff;
  --color-good-karma-200: #d3d3ff;
  --color-good-karma-300: #bbbaf6;
  --color-good-karma-400: #9b99db;
  --color-good-karma-500: #807dbf;
  --color-good-karma-600: #6663a2;
  --color-good-karma-700: #504d86;
  --color-good-karma-800: #3e3874;
  --color-good-karma-900: #2f2c56;
  --color-good-karma-950: #1d1a39;
  --color-c-20000-leagues-under-the-sea: #19166e;
  --color-c-20000-leagues-under-the-sea-50: #f2f5ff;
  --color-c-20000-leagues-under-the-sea-100: #e5eaff;
  --color-c-20000-leagues-under-the-sea-200: #cbd6ff;
  --color-c-20000-leagues-under-the-sea-300: #adbdff;
  --color-c-20000-leagues-under-the-sea-400: #8498f5;
  --color-c-20000-leagues-under-the-sea-500: #6879d8;
  --color-c-20000-leagues-under-the-sea-600: #4e5cb5;
  --color-c-20000-leagues-under-the-sea-700: #394594;
  --color-c-20000-leagues-under-the-sea-800: #293174;
  --color-c-20000-leagues-under-the-sea-900: #19166e;
  --color-c-20000-leagues-under-the-sea-950: #0f1337;
}

Similar palettes