Dark Purple to Scented Spring color palette

31143EDark Purple 004882Pacific Depths 4F71DFSkies of Cyberspace 8A8CFFPeriwinkle E4DCFFScented Spring

Open in generator Export PNG, PDF, ASE…

About this palette

Dark Purple to Scented Spring is a 5-color cool, gradient palette: #31143E (Dark Purple), #004882 (Pacific Depths), #4F71DF (Skies of Cyberspace), #8A8CFF (Periwinkle), #E4DCFF (Scented Spring). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #31143E on #E4DCFF with a contrast ratio of 12.29:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Purple	rgb(49, 20, 62)	hsl(281, 51%, 16%)
Pacific Depths	rgb(0, 72, 130)	hsl(207, 100%, 25%)
Skies of Cyberspace	rgb(79, 113, 223)	hsl(226, 69%, 59%)
Periwinkle	rgb(138, 140, 255)	hsl(239, 100%, 77%)
Scented Spring	rgb(228, 220, 255)	hsl(254, 100%, 93%)

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.

Aa12.29:1 Super#31143E on #E4DCFF
Aa12.29:1 Super#E4DCFF on #31143E
Aa7.10:1 Very good#004882 on #E4DCFF
Aa7.10:1 Very good#E4DCFF on #004882
Aa5.60:1 Good#31143E on #8A8CFF
Aa5.60:1 Good#8A8CFF on #31143E
Aa3.66:1 Poor#31143E on #4F71DF
Aa3.66:1 Poor#4F71DF on #31143E

Color blindness preview

CSS variables

/* Dark Purple to Scented Spring — https://swatchly.xyz/palette/31143e-004882-4f71df-8a8cff-e4dcff */
:root {
  --dark-purple: #31143e;
  --pacific-depths: #004882;
  --skies-of-cyberspace: #4f71df;
  --periwinkle: #8a8cff;
  --scented-spring: #e4dcff;
}

Tailwind CSS v4

/* Dark Purple to Scented Spring — https://swatchly.xyz/palette/31143e-004882-4f71df-8a8cff-e4dcff */
@theme {
  --color-dark-purple: #31143e;
  --color-dark-purple-50: #faf1ff;
  --color-dark-purple-100: #f5e4ff;
  --color-dark-purple-200: #e6ccf4;
  --color-dark-purple-300: #d2b4e1;
  --color-dark-purple-400: #b393c4;
  --color-dark-purple-500: #9978aa;
  --color-dark-purple-600: #7e5f8e;
  --color-dark-purple-700: #674a75;
  --color-dark-purple-800: #53395f;
  --color-dark-purple-900: #422c4d;
  --color-dark-purple-950: #31143e;
  --color-pacific-depths: #004882;
  --color-pacific-depths-50: #eef6ff;
  --color-pacific-depths-100: #ddedff;
  --color-pacific-depths-200: #badbff;
  --color-pacific-depths-300: #92c7ff;
  --color-pacific-depths-400: #6da8e6;
  --color-pacific-depths-500: #508dcc;
  --color-pacific-depths-600: #3672af;
  --color-pacific-depths-700: #225c93;
  --color-pacific-depths-800: #004882;
  --color-pacific-depths-900: #093862;
  --color-pacific-depths-950: #022342;
  --color-skies-of-cyberspace: #4f71df;
  --color-skies-of-cyberspace-50: #eef3ff;
  --color-skies-of-cyberspace-100: #dde7ff;
  --color-skies-of-cyberspace-200: #bed0ff;
  --color-skies-of-cyberspace-300: #9ab6ff;
  --color-skies-of-cyberspace-400: #6b90fe;
  --color-skies-of-cyberspace-500: #4f71df;
  --color-skies-of-cyberspace-600: #3a58bf;
  --color-skies-of-cyberspace-700: #2b43a1;
  --color-skies-of-cyberspace-800: #1f3385;
  --color-skies-of-cyberspace-900: #16266c;
  --color-skies-of-cyberspace-950: #0b174a;
  --color-periwinkle: #8a8cff;
  --color-periwinkle-50: #f0f2ff;
  --color-periwinkle-100: #e3e6ff;
  --color-periwinkle-200: #cacfff;
  --color-periwinkle-300: #afb4ff;
  --color-periwinkle-400: #8a8cff;
  --color-periwinkle-500: #7171e1;
  --color-periwinkle-600: #5a57c2;
  --color-periwinkle-700: #4742a3;
  --color-periwinkle-800: #373186;
  --color-periwinkle-900: #2a246d;
  --color-periwinkle-950: #19154a;
  --color-scented-spring: #e4dcff;
  --color-scented-spring-50: #eeeaff;
  --color-scented-spring-100: #e4dcff;
  --color-scented-spring-200: #d1cbe6;
  --color-scented-spring-300: #bdb6d4;
  --color-scented-spring-400: #9f98b7;
  --color-scented-spring-500: #857e9d;
  --color-scented-spring-600: #6c6583;
  --color-scented-spring-700: #57506c;
  --color-scented-spring-800: #443e56;
  --color-scented-spring-900: #342f43;
  --color-scented-spring-950: #201d2b;
}