Glossy Black to Astral color palette

160018Glossy Black 171154Space Colonisation 21354BBlue Whale 33475AOne Year of Rain 366B8AAstral

About this palette

Glossy Black to Astral is a 5-color dark, cool, gradient palette: #160018 (Glossy Black), #171154 (Space Colonisation), #21354B (Blue Whale), #33475A (One Year of Rain), #366B8A (Astral). It mixes purple, blue tones and feels cool overall. The strongest text pairing is #160018 on #366B8A with a contrast ratio of 3.46:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Glossy Black	rgb(22, 0, 24)	hsl(295, 100%, 5%)
Space Colonisation	rgb(23, 17, 84)	hsl(245, 66%, 20%)
Blue Whale	rgb(33, 53, 75)	hsl(211, 39%, 21%)
One Year of Rain	rgb(51, 71, 90)	hsl(209, 28%, 28%)
Astral	rgb(54, 107, 138)	hsl(202, 44%, 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.

Aa3.46:1 Poor#160018 on #366B8A
Aa3.46:1 Poor#366B8A on #160018

Color blindness preview

CSS variables

/* Glossy Black to Astral — https://swatchly.xyz/palette/160018-171154-21354b-33475a-366b8a */
:root {
  --glossy-black: #160018;
  --space-colonisation: #171154;
  --blue-whale: #21354b;
  --one-year-of-rain: #33475a;
  --astral: #366b8a;
}

Tailwind CSS v4

/* Glossy Black to Astral — https://swatchly.xyz/palette/160018-171154-21354b-33475a-366b8a */
@theme {
  --color-glossy-black: #160018;
  --color-glossy-black-50: #ffefff;
  --color-glossy-black-100: #fae2fb;
  --color-glossy-black-200: #e9cdea;
  --color-glossy-black-300: #d4b5d5;
  --color-glossy-black-400: #b794b8;
  --color-glossy-black-500: #967497;
  --color-glossy-black-600: #755677;
  --color-glossy-black-700: #583d59;
  --color-glossy-black-800: #3e293f;
  --color-glossy-black-900: #281829;
  --color-glossy-black-950: #160018;
  --color-space-colonisation: #171154;
  --color-space-colonisation-50: #f2f4ff;
  --color-space-colonisation-100: #e6eaff;
  --color-space-colonisation-200: #cdd5ff;
  --color-space-colonisation-300: #b1bbff;
  --color-space-colonisation-400: #919be6;
  --color-space-colonisation-500: #767fca;
  --color-space-colonisation-600: #5d64ac;
  --color-space-colonisation-700: #484e8f;
  --color-space-colonisation-800: #373c75;
  --color-space-colonisation-900: #2a2d5e;
  --color-space-colonisation-950: #171154;
  --color-blue-whale: #21354b;
  --color-blue-whale-50: #eef6ff;
  --color-blue-whale-100: #deedff;
  --color-blue-whale-200: #c7daee;
  --color-blue-whale-300: #afc3db;
  --color-blue-whale-400: #8ea4be;
  --color-blue-whale-500: #7289a3;
  --color-blue-whale-600: #596e87;
  --color-blue-whale-700: #44586e;
  --color-blue-whale-800: #334558;
  --color-blue-whale-900: #21354b;
  --color-blue-whale-950: #16212c;
  --color-one-year-of-rain: #33475a;
  --color-one-year-of-rain-50: #eef6ff;
  --color-one-year-of-rain-100: #deedfc;
  --color-one-year-of-rain-200: #c8daeb;
  --color-one-year-of-rain-300: #b0c4d7;
  --color-one-year-of-rain-400: #90a5ba;
  --color-one-year-of-rain-500: #748aa0;
  --color-one-year-of-rain-600: #5b7084;
  --color-one-year-of-rain-700: #465a6c;
  --color-one-year-of-rain-800: #33475a;
  --color-one-year-of-rain-900: #283644;
  --color-one-year-of-rain-950: #17222c;
  --color-astral: #366b8a;
  --color-astral-50: #ebf7ff;
  --color-astral-100: #d4eeff;
  --color-astral-200: #b2dbf6;
  --color-astral-300: #95c4e2;
  --color-astral-400: #70a4c4;
  --color-astral-500: #5287a7;
  --color-astral-600: #366b8a;
  --color-astral-700: #265570;
  --color-astral-800: #19435a;
  --color-astral-900: #103347;
  --color-astral-950: #06202e;
}