Belladonna to Blasphemous Blue color palette

1C000EBelladonna 340B2BDark Prom Queen 002854Subnautical 354158Pi 25437FMaritime Outpost 4A59AEBlasphemous Blue

Open in generator Export PNG, PDF, ASE…

About this palette

Belladonna to Blasphemous Blue is a 6-color dark, cool, gradient palette: #1C000E (Belladonna), #340B2B (Dark Prom Queen), #002854 (Subnautical), #354158 (Pi), #25437F (Maritime Outpost), #4A59AE (Blasphemous Blue). It mixes red, purple, blue tones and feels cool overall. The strongest text pairing is #1C000E on #4A59AE with a contrast ratio of 3.16:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Belladonna	rgb(28, 0, 14)	hsl(330, 100%, 5%)
Dark Prom Queen	rgb(52, 11, 43)	hsl(313, 65%, 12%)
Subnautical	rgb(0, 40, 84)	hsl(211, 100%, 16%)
Pi	rgb(53, 65, 88)	hsl(219, 25%, 28%)
Maritime Outpost	rgb(37, 67, 127)	hsl(220, 55%, 32%)
Blasphemous Blue	rgb(74, 89, 174)	hsl(231, 40%, 49%)

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.

Aa3.16:1 Poor#1C000E on #4A59AE
Aa3.16:1 Poor#4A59AE on #1C000E

Color blindness preview

CSS variables

/* Belladonna to Blasphemous Blue — https://swatchly.xyz/palette/1c000e-340b2b-002854-354158-25437f-4a59ae */
:root {
  --belladonna: #1c000e;
  --dark-prom-queen: #340b2b;
  --subnautical: #002854;
  --pi: #354158;
  --maritime-outpost: #25437f;
  --blasphemous-blue: #4a59ae;
}

Tailwind CSS v4

/* Belladonna to Blasphemous Blue — https://swatchly.xyz/palette/1c000e-340b2b-002854-354158-25437f-4a59ae */
@theme {
  --color-belladonna: #1c000e;
  --color-belladonna-50: #fff1f6;
  --color-belladonna-100: #ffe2ee;
  --color-belladonna-200: #f1ccdb;
  --color-belladonna-300: #ddb3c5;
  --color-belladonna-400: #bf93a6;
  --color-belladonna-500: #9f7386;
  --color-belladonna-600: #7e5567;
  --color-belladonna-700: #603d4c;
  --color-belladonna-800: #452935;
  --color-belladonna-900: #2d1922;
  --color-belladonna-950: #1c000e;
  --color-dark-prom-queen: #340b2b;
  --color-dark-prom-queen-50: #fff0fa;
  --color-dark-prom-queen-100: #ffe1f5;
  --color-dark-prom-queen-200: #f2c9e5;
  --color-dark-prom-queen-300: #deb1d0;
  --color-dark-prom-queen-400: #c190b2;
  --color-dark-prom-queen-500: #a57497;
  --color-dark-prom-queen-600: #895a7b;
  --color-dark-prom-queen-700: #6f4463;
  --color-dark-prom-queen-800: #58334e;
  --color-dark-prom-queen-900: #45263c;
  --color-dark-prom-queen-950: #340b2b;
  --color-subnautical: #002854;
  --color-subnautical-50: #eff6ff;
  --color-subnautical-100: #deedff;
  --color-subnautical-200: #bddaff;
  --color-subnautical-300: #9fc4f3;
  --color-subnautical-400: #7aa2d5;
  --color-subnautical-500: #5c85b8;
  --color-subnautical-600: #416898;
  --color-subnautical-700: #2d4f7a;
  --color-subnautical-800: #1e3b5e;
  --color-subnautical-900: #002854;
  --color-subnautical-950: #08182b;
  --color-pi: #354158;
  --color-pi-50: #f0f5ff;
  --color-pi-100: #e2ecfe;
  --color-pi-200: #cdd8ed;
  --color-pi-300: #b4c1d9;
  --color-pi-400: #94a1bb;
  --color-pi-500: #7886a0;
  --color-pi-600: #5e6b84;
  --color-pi-700: #49546a;
  --color-pi-800: #354158;
  --color-pi-900: #293242;
  --color-pi-950: #181e2a;
  --color-maritime-outpost: #25437f;
  --color-maritime-outpost-50: #f0f5ff;
  --color-maritime-outpost-100: #e1ecff;
  --color-maritime-outpost-200: #c3d8ff;
  --color-maritime-outpost-300: #a2c2fe;
  --color-maritime-outpost-400: #80a3e4;
  --color-maritime-outpost-500: #6587c9;
  --color-maritime-outpost-600: #4c6dac;
  --color-maritime-outpost-700: #395790;
  --color-maritime-outpost-800: #25437f;
  --color-maritime-outpost-900: #1e345f;
  --color-maritime-outpost-950: #102040;
  --color-blasphemous-blue: #4a59ae;
  --color-blasphemous-blue-50: #f2f5ff;
  --color-blasphemous-blue-100: #e2e8ff;
  --color-blasphemous-blue-200: #c5d2ff;
  --color-blasphemous-blue-300: #a5b7ff;
  --color-blasphemous-blue-400: #8094ec;
  --color-blasphemous-blue-500: #6476ce;
  --color-blasphemous-blue-600: #4a59ae;
  --color-blasphemous-blue-700: #39458f;
  --color-blasphemous-blue-800: #2b3575;
  --color-blasphemous-blue-900: #20285e;
  --color-blasphemous-blue-950: #12183e;
}