Blue-Collar to Mysterious Depths Color Palette

About this palette

Blue-Collar to Mysterious Depths is a 4-color dark, cool palette: #1D6074 (Blue-Collar), #142F40 (Nordic Noir), #51274B (Murasaki), #030B30 (Mysterious Depths). It mixes blue, purple tones and feels cool overall. The strongest text pairing is #1D6074 on #030B30 with a contrast ratio of 2.72:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blue-Collar	rgb(29, 96, 116)	hsl(194, 60%, 28%)
Nordic Noir	rgb(20, 47, 64)	hsl(203, 52%, 16%)
Murasaki	rgb(81, 39, 75)	hsl(309, 35%, 24%)
Mysterious Depths	rgb(3, 11, 48)	hsl(229, 88%, 10%)

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

/* Blue-Collar to Mysterious Depths — https://swatchly.xyz/palette/1d6074-142f40-51274b-030b30 */
:root {
  --blue-collar: #1d6074;
  --nordic-noir: #142f40;
  --murasaki: #51274b;
  --mysterious-depths: #030b30;
}

Tailwind CSS v4

/* Blue-Collar to Mysterious Depths — https://swatchly.xyz/palette/1d6074-142f40-51274b-030b30 */
@theme {
  --color-blue-collar: #1d6074;
  --color-blue-collar-50: #e7f9ff;
  --color-blue-collar-100: #cff2ff;
  --color-blue-collar-200: #b2e1f1;
  --color-blue-collar-300: #96cbde;
  --color-blue-collar-400: #70adc2;
  --color-blue-collar-500: #5292a7;
  --color-blue-collar-600: #38778b;
  --color-blue-collar-700: #1d6074;
  --color-blue-collar-800: #144b5b;
  --color-blue-collar-900: #0a3a48;
  --color-blue-collar-950: #03242e;
  --color-nordic-noir: #142f40;
  --color-nordic-noir-50: #ecf7ff;
  --color-nordic-noir-100: #dbeefc;
  --color-nordic-noir-200: #c4dbec;
  --color-nordic-noir-300: #abc5d8;
  --color-nordic-noir-400: #88a5b9;
  --color-nordic-noir-500: #6b889c;
  --color-nordic-noir-600: #506c7f;
  --color-nordic-noir-700: #3b5465;
  --color-nordic-noir-800: #2a3f4e;
  --color-nordic-noir-900: #142f40;
  --color-nordic-noir-950: #0f1c24;
  --color-murasaki: #51274b;
  --color-murasaki-50: #fff0fc;
  --color-murasaki-100: #ffe0f9;
  --color-murasaki-200: #f1c9e9;
  --color-murasaki-300: #ddb1d5;
  --color-murasaki-400: #c191b8;
  --color-murasaki-500: #a6769e;
  --color-murasaki-600: #8b5d84;
  --color-murasaki-700: #73496c;
  --color-murasaki-800: #5e3958;
  --color-murasaki-900: #51274b;
  --color-murasaki-950: #321a2e;
  --color-mysterious-depths: #030b30;
  --color-mysterious-depths-50: #f1f5ff;
  --color-mysterious-depths-100: #e2ebff;
  --color-mysterious-depths-200: #c6d7fd;
  --color-mysterious-depths-300: #aec1eb;
  --color-mysterious-depths-400: #8ca1cf;
  --color-mysterious-depths-500: #6e82b0;
  --color-mysterious-depths-600: #526490;
  --color-mysterious-depths-700: #3b4b71;
  --color-mysterious-depths-800: #293655;
  --color-mysterious-depths-900: #1a243c;
  --color-mysterious-depths-950: #030b30;
}