Start generating

Frozen Periwinkle to Dark Eclipse color palette

C7D3FFFrozen Periwinkle7A9BF7Fennel Flower4982FFSkinny Jeans4D5B8EPiccadilly Purple29348DRoyal Night14244ADark Eclipse
Open in generator Export PNG, PDF, ASE…

About this palette

Frozen Periwinkle to Dark Eclipse is a 6-color cool, monochromatic, gradient palette: #C7D3FF (Frozen Periwinkle), #7A9BF7 (Fennel Flower), #4982FF (Skinny Jeans), #4D5B8E (Piccadilly Purple), #29348D (Royal Night), #14244A (Dark Eclipse). It mixes blue tones and feels cool overall. The strongest text pairing is #C7D3FF on #14244A with a contrast ratio of 10.28:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Frozen Periwinklergb(199, 211, 255)hsl(227, 100%, 89%)
Fennel Flowerrgb(122, 155, 247)hsl(224, 89%, 72%)
Skinny Jeansrgb(73, 130, 255)hsl(221, 100%, 64%)
Piccadilly Purplergb(77, 91, 142)hsl(227, 30%, 43%)
Royal Nightrgb(41, 52, 141)hsl(233, 55%, 36%)
Dark Eclipsergb(20, 36, 74)hsl(222, 57%, 18%)

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.28:1 Very good#C7D3FF on #14244A
  • Aa10.28:1 Very good#14244A on #C7D3FF
  • Aa7.20:1 Very good#C7D3FF on #29348D
  • Aa7.20:1 Very good#29348D on #C7D3FF
  • Aa5.69:1 Good#7A9BF7 on #14244A
  • Aa5.69:1 Good#14244A on #7A9BF7
  • Aa4.43:1 Poor#C7D3FF on #4D5B8E
  • Aa4.43:1 Poor#4D5B8E on #C7D3FF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Frozen Periwinkle to Dark Eclipse — https://swatchly.xyz/palette/c7d3ff-7a9bf7-4982ff-4d5b8e-29348d-14244a */
:root {
  --frozen-periwinkle: #c7d3ff;
  --fennel-flower: #7a9bf7;
  --skinny-jeans: #4982ff;
  --piccadilly-purple: #4d5b8e;
  --royal-night: #29348d;
  --dark-eclipse: #14244a;
}

Tailwind CSS v4

/* Frozen Periwinkle to Dark Eclipse — https://swatchly.xyz/palette/c7d3ff-7a9bf7-4982ff-4d5b8e-29348d-14244a */
@theme {
  --color-frozen-periwinkle: #c7d3ff;
  --color-frozen-periwinkle-50: #eff3ff;
  --color-frozen-periwinkle-100: #e2e8ff;
  --color-frozen-periwinkle-200: #c7d3ff;
  --color-frozen-periwinkle-300: #b3bde2;
  --color-frozen-periwinkle-400: #939ec6;
  --color-frozen-periwinkle-500: #7883ab;
  --color-frozen-periwinkle-600: #5f698f;
  --color-frozen-periwinkle-700: #4a5375;
  --color-frozen-periwinkle-800: #39405e;
  --color-frozen-periwinkle-900: #2b314b;
  --color-frozen-periwinkle-950: #1a1e30;
  --color-fennel-flower: #7a9bf7;
  --color-fennel-flower-50: #f0f4ff;
  --color-fennel-flower-100: #e2eaff;
  --color-fennel-flower-200: #c5d6ff;
  --color-fennel-flower-300: #a4beff;
  --color-fennel-flower-400: #7a9bf7;
  --color-fennel-flower-500: #607fd9;
  --color-fennel-flower-600: #4864ba;
  --color-fennel-flower-700: #364e9b;
  --color-fennel-flower-800: #273c7f;
  --color-fennel-flower-900: #1c2d67;
  --color-fennel-flower-950: #0f1b45;
  --color-skinny-jeans: #4982ff;
  --color-skinny-jeans-50: #f1f6ff;
  --color-skinny-jeans-100: #e4edff;
  --color-skinny-jeans-200: #c7daff;
  --color-skinny-jeans-300: #a6c4ff;
  --color-skinny-jeans-400: #75a3ff;
  --color-skinny-jeans-500: #4982ff;
  --color-skinny-jeans-600: #3065de;
  --color-skinny-jeans-700: #1d4cbc;
  --color-skinny-jeans-800: #10399b;
  --color-skinny-jeans-900: #07297d;
  --color-skinny-jeans-950: #021854;
  --color-piccadilly-purple: #4d5b8e;
  --color-piccadilly-purple-50: #f1f5ff;
  --color-piccadilly-purple-100: #e4ebff;
  --color-piccadilly-purple-200: #ccd8ff;
  --color-piccadilly-purple-300: #b3c3f3;
  --color-piccadilly-purple-400: #94a4d9;
  --color-piccadilly-purple-500: #7a8ac0;
  --color-piccadilly-purple-600: #6271a5;
  --color-piccadilly-purple-700: #4d5b8e;
  --color-piccadilly-purple-800: #3b4772;
  --color-piccadilly-purple-900: #2c365a;
  --color-piccadilly-purple-950: #1a213c;
  --color-royal-night: #29348d;
  --color-royal-night-50: #f2f5ff;
  --color-royal-night-100: #e4ebff;
  --color-royal-night-200: #cad6ff;
  --color-royal-night-300: #abbdff;
  --color-royal-night-400: #829af8;
  --color-royal-night-500: #677ddd;
  --color-royal-night-600: #4f62bd;
  --color-royal-night-700: #3b4b9e;
  --color-royal-night-800: #29348d;
  --color-royal-night-900: #202a67;
  --color-royal-night-950: #121945;
  --color-dark-eclipse: #14244a;
  --color-dark-eclipse-50: #f0f5ff;
  --color-dark-eclipse-100: #e2ebff;
  --color-dark-eclipse-200: #c6d8fd;
  --color-dark-eclipse-300: #adc1eb;
  --color-dark-eclipse-400: #8ca1cf;
  --color-dark-eclipse-500: #7287b5;
  --color-dark-eclipse-600: #5a6e9a;
  --color-dark-eclipse-700: #465981;
  --color-dark-eclipse-800: #36476a;
  --color-dark-eclipse-900: #2a3857;
  --color-dark-eclipse-950: #14244a;
}

Similar palettes