Dusk to Marine Color Palette

About this palette

Dusk to Marine is a 4-color dark, cool palette: #515782 (Dusk), #2C484A (Little Mermaid), #000F1B (Black Knight), #002B56 (Marine). It mixes purple, gray, black, blue tones and feels cool overall. The strongest text pairing is #515782 on #000F1B with a contrast ratio of 2.80:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dusk	rgb(81, 87, 130)	hsl(233, 23%, 41%)
Little Mermaid	rgb(44, 72, 74)	hsl(184, 25%, 23%)
Black Knight	rgb(0, 15, 27)	hsl(207, 100%, 5%)
Marine	rgb(0, 43, 86)	hsl(210, 100%, 17%)

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

/* Dusk to Marine — https://swatchly.xyz/palette/515782-2c484a-000f1b-002b56 */
:root {
  --dusk: #515782;
  --little-mermaid: #2c484a;
  --black-knight: #000f1b;
  --marine: #002b56;
}

Tailwind CSS v4

/* Dusk to Marine — https://swatchly.xyz/palette/515782-2c484a-000f1b-002b56 */
@theme {
  --color-dusk: #515782;
  --color-dusk-50: #f2f4ff;
  --color-dusk-100: #e6eaff;
  --color-dusk-200: #d0d6fb;
  --color-dusk-300: #b9c0ea;
  --color-dusk-400: #9aa1cf;
  --color-dusk-500: #7f87b5;
  --color-dusk-600: #666d99;
  --color-dusk-700: #515782;
  --color-dusk-800: #3f4467;
  --color-dusk-900: #2f3352;
  --color-dusk-950: #1d2035;
  --color-little-mermaid: #2c484a;
  --color-little-mermaid-50: #e8f9fa;
  --color-little-mermaid-100: #dcf0f1;
  --color-little-mermaid-200: #c5ddde;
  --color-little-mermaid-300: #acc7c9;
  --color-little-mermaid-400: #8ba8aa;
  --color-little-mermaid-500: #6f8d8f;
  --color-little-mermaid-600: #557274;
  --color-little-mermaid-700: #415b5d;
  --color-little-mermaid-800: #2c484a;
  --color-little-mermaid-900: #233738;
  --color-little-mermaid-950: #142223;
  --color-black-knight: #000f1b;
  --color-black-knight-50: #ecf7ff;
  --color-black-knight-100: #deeef9;
  --color-black-knight-200: #c8dae8;
  --color-black-knight-300: #afc4d3;
  --color-black-knight-400: #8ea5b5;
  --color-black-knight-500: #6f8696;
  --color-black-knight-600: #526776;
  --color-black-knight-700: #3b4d5a;
  --color-black-knight-800: #283741;
  --color-black-knight-900: #19242c;
  --color-black-knight-950: #000f1b;
  --color-marine: #002b56;
  --color-marine-50: #eef6ff;
  --color-marine-100: #deedff;
  --color-marine-200: #bcdbff;
  --color-marine-300: #9ec4f2;
  --color-marine-400: #79a3d5;
  --color-marine-500: #5c86b8;
  --color-marine-600: #416a99;
  --color-marine-700: #2d517b;
  --color-marine-800: #1e3d60;
  --color-marine-900: #002b56;
  --color-marine-950: #091a2e;
}