Mysterious Depths to Eternal Flame color palette

000924Mysterious Depths 450E36Velvet Cosmos 552564Elegant Purple Gown A33D4CEternal Flame

About this palette

Mysterious Depths to Eternal Flame is a 4-color dark, gradient palette: #000924 (Mysterious Depths), #450E36 (Velvet Cosmos), #552564 (Elegant Purple Gown), #A33D4C (Eternal Flame). It mixes blue, red, purple tones and feels balanced overall. The strongest text pairing is #000924 on #A33D4C with a contrast ratio of 3.13:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Mysterious Depths	rgb(0, 9, 36)	hsl(225, 100%, 7%)
Velvet Cosmos	rgb(69, 14, 54)	hsl(316, 66%, 16%)
Elegant Purple Gown	rgb(85, 37, 100)	hsl(286, 46%, 27%)
Eternal Flame	rgb(163, 61, 76)	hsl(351, 46%, 44%)

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.13:1 Poor#000924 on #A33D4C
Aa3.13:1 Poor#A33D4C on #000924

Color blindness preview

CSS variables

/* Mysterious Depths to Eternal Flame — https://swatchly.xyz/palette/000924-450e36-552564-a33d4c */
:root {
  --mysterious-depths: #000924;
  --velvet-cosmos: #450e36;
  --elegant-purple-gown: #552564;
  --eternal-flame: #a33d4c;
}

Tailwind CSS v4

/* Mysterious Depths to Eternal Flame — https://swatchly.xyz/palette/000924-450e36-552564-a33d4c */
@theme {
  --color-mysterious-depths: #000924;
  --color-mysterious-depths-50: #f0f6ff;
  --color-mysterious-depths-100: #e0ecff;
  --color-mysterious-depths-200: #c6d9f6;
  --color-mysterious-depths-300: #aec2e3;
  --color-mysterious-depths-400: #8ca3c6;
  --color-mysterious-depths-500: #6c83a6;
  --color-mysterious-depths-600: #506485;
  --color-mysterious-depths-700: #384a66;
  --color-mysterious-depths-800: #25334a;
  --color-mysterious-depths-900: #162131;
  --color-mysterious-depths-950: #000924;
  --color-velvet-cosmos: #450e36;
  --color-velvet-cosmos-50: #fff0f9;
  --color-velvet-cosmos-100: #ffe1f3;
  --color-velvet-cosmos-200: #f9c6e6;
  --color-velvet-cosmos-300: #e6acd1;
  --color-velvet-cosmos-400: #c98ab3;
  --color-velvet-cosmos-500: #b07099;
  --color-velvet-cosmos-600: #955880;
  --color-velvet-cosmos-700: #7c456a;
  --color-velvet-cosmos-800: #673557;
  --color-velvet-cosmos-900: #552947;
  --color-velvet-cosmos-950: #450e36;
  --color-elegant-purple-gown: #552564;
  --color-elegant-purple-gown-50: #fbf1ff;
  --color-elegant-purple-gown-100: #f8e3ff;
  --color-elegant-purple-gown-200: #efc6fd;
  --color-elegant-purple-gown-300: #daacea;
  --color-elegant-purple-gown-400: #bc89cd;
  --color-elegant-purple-gown-500: #9f6cb0;
  --color-elegant-purple-gown-600: #825292;
  --color-elegant-purple-gown-700: #683c76;
  --color-elegant-purple-gown-800: #552564;
  --color-elegant-purple-gown-900: #3f1f49;
  --color-elegant-purple-gown-950: #28112f;
  --color-eternal-flame: #a33d4c;
  --color-eternal-flame-50: #fff1f2;
  --color-eternal-flame-100: #ffe2e3;
  --color-eternal-flame-200: #ffc3c7;
  --color-eternal-flame-300: #ff9da5;
  --color-eternal-flame-400: #e17883;
  --color-eternal-flame-500: #c35a66;
  --color-eternal-flame-600: #a33d4c;
  --color-eternal-flame-700: #852c3a;
  --color-eternal-flame-800: #6c1e2b;
  --color-eternal-flame-900: #561420;
  --color-eternal-flame-950: #390912;
}