Quiet Abyss to Your Majesty color palette

110029Quiet Abyss 1B1226Shot in the Dark 002D24Pitch-Black Forests 4A305ARoyal Crown 1D5C6FNight Shift 675073Your Majesty

Open in generator Export PNG, PDF, ASE…

About this palette

Quiet Abyss to Your Majesty is a 6-color dark, cool palette: #110029 (Quiet Abyss), #1B1226 (Shot in the Dark), #002D24 (Pitch-Black Forests), #4A305A (Royal Crown), #1D5C6F (Night Shift), #675073 (Your Majesty). It mixes purple, turquoise, blue tones and feels cool overall. The strongest text pairing is #110029 on #675073 with a contrast ratio of 2.81:1, and 0 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quiet Abyss	rgb(17, 0, 41)	hsl(265, 100%, 8%)
Shot in the Dark	rgb(27, 18, 38)	hsl(267, 36%, 11%)
Pitch-Black Forests	rgb(0, 45, 36)	hsl(168, 100%, 9%)
Royal Crown	rgb(74, 48, 90)	hsl(277, 30%, 27%)
Night Shift	rgb(29, 92, 111)	hsl(194, 59%, 27%)
Your Majesty	rgb(103, 80, 115)	hsl(279, 18%, 38%)

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.

Color blindness preview

CSS variables

/* Quiet Abyss to Your Majesty — https://swatchly.xyz/palette/110029-1b1226-002d24-4a305a-1d5c6f-675073 */
:root {
  --quiet-abyss: #110029;
  --shot-in-the-dark: #1b1226;
  --pitch-black-forests: #002d24;
  --royal-crown: #4a305a;
  --night-shift: #1d5c6f;
  --your-majesty: #675073;
}

Tailwind CSS v4

/* Quiet Abyss to Your Majesty — https://swatchly.xyz/palette/110029-1b1226-002d24-4a305a-1d5c6f-675073 */
@theme {
  --color-quiet-abyss: #110029;
  --color-quiet-abyss-50: #f6f3ff;
  --color-quiet-abyss-100: #ede7ff;
  --color-quiet-abyss-200: #dbd0fc;
  --color-quiet-abyss-300: #c5b8ea;
  --color-quiet-abyss-400: #a697cd;
  --color-quiet-abyss-500: #8777ad;
  --color-quiet-abyss-600: #68598b;
  --color-quiet-abyss-700: #4e406c;
  --color-quiet-abyss-800: #372c4f;
  --color-quiet-abyss-900: #231b35;
  --color-quiet-abyss-950: #110029;
  --color-shot-in-the-dark: #1b1226;
  --color-shot-in-the-dark-50: #f7f2ff;
  --color-shot-in-the-dark-100: #eee7f9;
  --color-shot-in-the-dark-200: #dbd3e8;
  --color-shot-in-the-dark-300: #c5bcd4;
  --color-shot-in-the-dark-400: #a69cb6;
  --color-shot-in-the-dark-500: #897f99;
  --color-shot-in-the-dark-600: #6d637b;
  --color-shot-in-the-dark-700: #554c61;
  --color-shot-in-the-dark-800: #40384a;
  --color-shot-in-the-dark-900: #2e2837;
  --color-shot-in-the-dark-950: #1b1226;
  --color-pitch-black-forests: #002d24;
  --color-pitch-black-forests-50: #e3fcf4;
  --color-pitch-black-forests-100: #d7f2ea;
  --color-pitch-black-forests-200: #bfe0d6;
  --color-pitch-black-forests-300: #a5cabf;
  --color-pitch-black-forests-400: #82aca0;
  --color-pitch-black-forests-500: #679286;
  --color-pitch-black-forests-600: #4f786d;
  --color-pitch-black-forests-700: #3b6257;
  --color-pitch-black-forests-800: #2c4f46;
  --color-pitch-black-forests-900: #213f37;
  --color-pitch-black-forests-950: #002d24;
  --color-royal-crown: #4a305a;
  --color-royal-crown-50: #f9f2ff;
  --color-royal-crown-100: #f4e4ff;
  --color-royal-crown-200: #e4cdf4;
  --color-royal-crown-300: #ceb4df;
  --color-royal-crown-400: #af92c1;
  --color-royal-crown-500: #9276a5;
  --color-royal-crown-600: #765b87;
  --color-royal-crown-700: #5d456c;
  --color-royal-crown-800: #4a305a;
  --color-royal-crown-900: #372642;
  --color-royal-crown-950: #22162a;
  --color-night-shift: #1d5c6f;
  --color-night-shift-50: #e7f9ff;
  --color-night-shift-100: #cff2ff;
  --color-night-shift-200: #b3e0f0;
  --color-night-shift-300: #96cadc;
  --color-night-shift-400: #71aabf;
  --color-night-shift-500: #538fa3;
  --color-night-shift-600: #387387;
  --color-night-shift-700: #1d5c6f;
  --color-night-shift-800: #164857;
  --color-night-shift-900: #0c3744;
  --color-night-shift-950: #04232c;
  --color-your-majesty: #675073;
  --color-your-majesty-50: #faf1ff;
  --color-your-majesty-100: #f5e4fe;
  --color-your-majesty-200: #e4d0ee;
  --color-your-majesty-300: #cfb9db;
  --color-your-majesty-400: #b29abf;
  --color-your-majesty-500: #987fa5;
  --color-your-majesty-600: #7d668a;
  --color-your-majesty-700: #675073;
  --color-your-majesty-800: #513e5b;
  --color-your-majesty-900: #3f2f47;
  --color-your-majesty-950: #281c2e;
}