Stormy Night to Violet Heaven color palette

3A205DStormy Night 00536FNight Kite 006C99Hydra 4686EABlue Jay 79B2FFFennel Flower CDB8FFViolet Heaven

Open in generator Export PNG, PDF, ASE…

About this palette

Stormy Night to Violet Heaven is a 6-color cool, gradient palette: #3A205D (Stormy Night), #00536F (Night Kite), #006C99 (Hydra), #4686EA (Blue Jay), #79B2FF (Fennel Flower), #CDB8FF (Violet Heaven). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #3A205D on #CDB8FF with a contrast ratio of 7.70:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Stormy Night	rgb(58, 32, 93)	hsl(266, 49%, 25%)
Night Kite	rgb(0, 83, 111)	hsl(195, 100%, 22%)
Hydra	rgb(0, 108, 153)	hsl(198, 100%, 30%)
Blue Jay	rgb(70, 134, 234)	hsl(217, 80%, 60%)
Fennel Flower	rgb(121, 178, 255)	hsl(214, 100%, 74%)
Violet Heaven	rgb(205, 184, 255)	hsl(258, 100%, 86%)

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.

Aa7.70:1 Very good#3A205D on #CDB8FF
Aa7.70:1 Very good#CDB8FF on #3A205D
Aa6.23:1 Good#3A205D on #79B2FF
Aa6.23:1 Good#79B2FF on #3A205D
Aa4.82:1 Good#00536F on #CDB8FF
Aa4.82:1 Good#CDB8FF on #00536F
Aa3.90:1 Poor#00536F on #79B2FF
Aa3.90:1 Poor#79B2FF on #00536F

Color blindness preview

CSS variables

/* Stormy Night to Violet Heaven — https://swatchly.xyz/palette/3a205d-00536f-006c99-4686ea-79b2ff-cdb8ff */
:root {
  --stormy-night: #3a205d;
  --night-kite: #00536f;
  --hydra: #006c99;
  --blue-jay: #4686ea;
  --fennel-flower: #79b2ff;
  --violet-heaven: #cdb8ff;
}

Tailwind CSS v4

/* Stormy Night to Violet Heaven — https://swatchly.xyz/palette/3a205d-00536f-006c99-4686ea-79b2ff-cdb8ff */
@theme {
  --color-stormy-night: #3a205d;
  --color-stormy-night-50: #f7f3ff;
  --color-stormy-night-100: #eee7ff;
  --color-stormy-night-200: #deceff;
  --color-stormy-night-300: #c9b4f3;
  --color-stormy-night-400: #ab93d7;
  --color-stormy-night-500: #8f76bb;
  --color-stormy-night-600: #745c9d;
  --color-stormy-night-700: #5c4681;
  --color-stormy-night-800: #483468;
  --color-stormy-night-900: #3a205d;
  --color-stormy-night-950: #221635;
  --color-night-kite: #00536f;
  --color-night-kite-50: #eaf8ff;
  --color-night-kite-100: #d4f0ff;
  --color-night-kite-200: #afe0f8;
  --color-night-kite-300: #94cce7;
  --color-night-kite-400: #6fafcd;
  --color-night-kite-500: #5295b3;
  --color-night-kite-600: #387b99;
  --color-night-kite-700: #246580;
  --color-night-kite-800: #00536f;
  --color-night-kite-900: #084055;
  --color-night-kite-950: #012938;
  --color-hydra: #006c99;
  --color-hydra-50: #ebf7ff;
  --color-hydra-100: #d4eeff;
  --color-hydra-200: #a6ddff;
  --color-hydra-300: #7fc6f1;
  --color-hydra-400: #54a6d4;
  --color-hydra-500: #3088b7;
  --color-hydra-600: #006c99;
  --color-hydra-700: #00567a;
  --color-hydra-800: #004361;
  --color-hydra-900: #00344c;
  --color-hydra-950: #002031;
  --color-blue-jay: #4686ea;
  --color-blue-jay-50: #f0f6ff;
  --color-blue-jay-100: #e1edff;
  --color-blue-jay-200: #c3daff;
  --color-blue-jay-300: #9ec4ff;
  --color-blue-jay-400: #69a3ff;
  --color-blue-jay-500: #4686ea;
  --color-blue-jay-600: #2b6aca;
  --color-blue-jay-700: #1752aa;
  --color-blue-jay-800: #083e8c;
  --color-blue-jay-900: #022f70;
  --color-blue-jay-950: #001c4b;
  --color-fennel-flower: #79b2ff;
  --color-fennel-flower-50: #f7faff;
  --color-fennel-flower-100: #ebf4ff;
  --color-fennel-flower-200: #cfe3ff;
  --color-fennel-flower-300: #add0ff;
  --color-fennel-flower-400: #79b2ff;
  --color-fennel-flower-500: #5c93dd;
  --color-fennel-flower-600: #3f75bd;
  --color-fennel-flower-700: #295b9d;
  --color-fennel-flower-800: #18467f;
  --color-fennel-flower-900: #0d3464;
  --color-fennel-flower-950: #041e41;
  --color-violet-heaven: #cdb8ff;
  --color-violet-heaven-50: #f8f6ff;
  --color-violet-heaven-100: #f0ebff;
  --color-violet-heaven-200: #e0d4ff;
  --color-violet-heaven-300: #cdb8ff;
  --color-violet-heaven-400: #ac99da;
  --color-violet-heaven-500: #907cbe;
  --color-violet-heaven-600: #7561a0;
  --color-violet-heaven-700: #5d4a84;
  --color-violet-heaven-800: #49386a;
  --color-violet-heaven-900: #382953;
  --color-violet-heaven-950: #231837;
}