Violet Vamp to Raging Thunderstorm color palette

DAADCCViolet Vamp B299B6Pastel Purple 8B85A0Hatoba Pigeon 64718BPlumbeous 3C5E76Atlantis 014A62Raging Thunderstorm

Open in generator Export PNG, PDF, ASE…

About this palette

Violet Vamp to Raging Thunderstorm is a 6-color muted, cool, gradient palette: #DAADCC (Violet Vamp), #B299B6 (Pastel Purple), #8B85A0 (Hatoba Pigeon), #64718B (Plumbeous), #3C5E76 (Atlantis), #014A62 (Raging Thunderstorm). It mixes pink, purple, blue tones and feels cool overall. The strongest text pairing is #DAADCC on #014A62 with a contrast ratio of 5.02:1, and 1 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Vamp	rgb(218, 173, 204)	hsl(319, 38%, 77%)
Pastel Purple	rgb(178, 153, 182)	hsl(292, 17%, 66%)
Hatoba Pigeon	rgb(139, 133, 160)	hsl(253, 12%, 57%)
Plumbeous	rgb(100, 113, 139)	hsl(220, 16%, 47%)
Atlantis	rgb(60, 94, 118)	hsl(205, 33%, 35%)
Raging Thunderstorm	rgb(1, 74, 98)	hsl(195, 98%, 19%)

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.

Aa5.02:1 Good#DAADCC on #014A62
Aa5.02:1 Good#014A62 on #DAADCC
Aa3.77:1 Poor#B299B6 on #014A62
Aa3.77:1 Poor#014A62 on #B299B6
Aa3.55:1 Poor#DAADCC on #3C5E76
Aa3.55:1 Poor#3C5E76 on #DAADCC

Color blindness preview

CSS variables

/* Violet Vamp to Raging Thunderstorm — https://swatchly.xyz/palette/daadcc-b299b6-8b85a0-64718b-3c5e76-014a62 */
:root {
  --violet-vamp: #daadcc;
  --pastel-purple: #b299b6;
  --hatoba-pigeon: #8b85a0;
  --plumbeous: #64718b;
  --atlantis: #3c5e76;
  --raging-thunderstorm: #014a62;
}

Tailwind CSS v4

/* Violet Vamp to Raging Thunderstorm — https://swatchly.xyz/palette/daadcc-b299b6-8b85a0-64718b-3c5e76-014a62 */
@theme {
  --color-violet-vamp: #daadcc;
  --color-violet-vamp-50: #ffedf9;
  --color-violet-vamp-100: #fcdef2;
  --color-violet-vamp-200: #ebc8e0;
  --color-violet-vamp-300: #daadcc;
  --color-violet-vamp-400: #b98fac;
  --color-violet-vamp-500: #9e7492;
  --color-violet-vamp-600: #835b77;
  --color-violet-vamp-700: #6a4760;
  --color-violet-vamp-800: #55364c;
  --color-violet-vamp-900: #43293c;
  --color-violet-vamp-950: #2b1826;
  --color-pastel-purple: #b299b6;
  --color-pastel-purple-50: #fdf1ff;
  --color-pastel-purple-100: #f6e6f9;
  --color-pastel-purple-200: #e4d1e7;
  --color-pastel-purple-300: #cfbad3;
  --color-pastel-purple-400: #b299b6;
  --color-pastel-purple-500: #967e9a;
  --color-pastel-purple-600: #7a637e;
  --color-pastel-purple-700: #624d66;
  --color-pastel-purple-800: #4d3b50;
  --color-pastel-purple-900: #3c2d3e;
  --color-pastel-purple-950: #261b27;
  --color-hatoba-pigeon: #8b85a0;
  --color-hatoba-pigeon-50: #f6f4ff;
  --color-hatoba-pigeon-100: #ede9fc;
  --color-hatoba-pigeon-200: #dad6eb;
  --color-hatoba-pigeon-300: #c5bfd8;
  --color-hatoba-pigeon-400: #a6a0bb;
  --color-hatoba-pigeon-500: #8b85a0;
  --color-hatoba-pigeon-600: #706a84;
  --color-hatoba-pigeon-700: #59536b;
  --color-hatoba-pigeon-800: #454055;
  --color-hatoba-pigeon-900: #353142;
  --color-hatoba-pigeon-950: #201e2a;
  --color-plumbeous: #64718b;
  --color-plumbeous-50: #f0f5ff;
  --color-plumbeous-100: #e3ecff;
  --color-plumbeous-200: #cfdaef;
  --color-plumbeous-300: #b8c4dc;
  --color-plumbeous-400: #98a5c0;
  --color-plumbeous-500: #7d8ba6;
  --color-plumbeous-600: #64718b;
  --color-plumbeous-700: #4e5971;
  --color-plumbeous-800: #3b455a;
  --color-plumbeous-900: #2c3546;
  --color-plumbeous-950: #1a212d;
  --color-atlantis: #3c5e76;
  --color-atlantis-50: #ecf7ff;
  --color-atlantis-100: #d9efff;
  --color-atlantis-200: #c1ddf1;
  --color-atlantis-300: #a8c7df;
  --color-atlantis-400: #86a9c2;
  --color-atlantis-500: #6b8ea8;
  --color-atlantis-600: #52748d;
  --color-atlantis-700: #3c5e76;
  --color-atlantis-800: #2d495d;
  --color-atlantis-900: #203849;
  --color-atlantis-950: #12232f;
  --color-raging-thunderstorm: #014a62;
  --color-raging-thunderstorm-50: #e9f8ff;
  --color-raging-thunderstorm-100: #d3f1ff;
  --color-raging-thunderstorm-200: #b2dff5;
  --color-raging-thunderstorm-300: #96cae2;
  --color-raging-thunderstorm-400: #71abc5;
  --color-raging-thunderstorm-500: #538faa;
  --color-raging-thunderstorm-600: #39748e;
  --color-raging-thunderstorm-700: #255d74;
  --color-raging-thunderstorm-800: #014a62;
  --color-raging-thunderstorm-900: #0c394a;
  --color-raging-thunderstorm-950: #042330;
}