Nightly Voyager to Tuscan Color Palette

About this palette

Nightly Voyager to Tuscan is a 5-color cool, earthy, vintage palette: #2D1936 (Nightly Voyager), #004B7C (Sea Paint), #AEB983 (Nile), #A86D39 (Eagle), #FFD8AB (Tuscan). It mixes purple, blue, green, orange tones and feels cool overall. The strongest text pairing is #2D1936 on #FFD8AB with a contrast ratio of 12.01:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightly Voyager	rgb(45, 25, 54)	hsl(281, 37%, 15%)
Sea Paint	rgb(0, 75, 124)	hsl(204, 100%, 24%)
Nile	rgb(174, 185, 131)	hsl(72, 28%, 62%)
Eagle	rgb(168, 109, 57)	hsl(28, 49%, 44%)
Tuscan	rgb(255, 216, 171)	hsl(32, 100%, 84%)

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.

Aa12.01:1 Super#2D1936 on #FFD8AB
Aa12.01:1 Super#FFD8AB on #2D1936
Aa7.72:1 Very good#2D1936 on #AEB983
Aa7.72:1 Very good#AEB983 on #2D1936
Aa6.82:1 Good#004B7C on #FFD8AB
Aa6.82:1 Good#FFD8AB on #004B7C
Aa4.38:1 Poor#004B7C on #AEB983
Aa4.38:1 Poor#AEB983 on #004B7C

Color blindness preview

CSS variables

/* Nightly Voyager to Tuscan — https://swatchly.xyz/palette/2d1936-004b7c-aeb983-a86d39-ffd8ab */
:root {
  --nightly-voyager: #2d1936;
  --sea-paint: #004b7c;
  --nile: #aeb983;
  --eagle: #a86d39;
  --tuscan: #ffd8ab;
}

Tailwind CSS v4

/* Nightly Voyager to Tuscan — https://swatchly.xyz/palette/2d1936-004b7c-aeb983-a86d39-ffd8ab */
@theme {
  --color-nightly-voyager: #2d1936;
  --color-nightly-voyager-50: #faf1ff;
  --color-nightly-voyager-100: #f4e4fd;
  --color-nightly-voyager-200: #e2cfec;
  --color-nightly-voyager-300: #cdb8d8;
  --color-nightly-voyager-400: #af97ba;
  --color-nightly-voyager-500: #947da0;
  --color-nightly-voyager-600: #7a6385;
  --color-nightly-voyager-700: #634e6d;
  --color-nightly-voyager-800: #4f3d58;
  --color-nightly-voyager-900: #3f2f46;
  --color-nightly-voyager-950: #2d1936;
  --color-sea-paint: #004b7c;
  --color-sea-paint-50: #edf6ff;
  --color-sea-paint-100: #dbeeff;
  --color-sea-paint-200: #b7dcff;
  --color-sea-paint-300: #93c8f8;
  --color-sea-paint-400: #6eaade;
  --color-sea-paint-500: #518fc4;
  --color-sea-paint-600: #3775a8;
  --color-sea-paint-700: #235e8d;
  --color-sea-paint-800: #004b7c;
  --color-sea-paint-900: #093a5e;
  --color-sea-paint-950: #02243f;
  --color-nile: #aeb983;
  --color-nile-50: #ebf2d1;
  --color-nile-100: #dee6c0;
  --color-nile-200: #c7d1a5;
  --color-nile-300: #aeb983;
  --color-nile-400: #929c68;
  --color-nile-500: #79834f;
  --color-nile-600: #626b39;
  --color-nile-700: #4e5629;
  --color-nile-800: #3e451c;
  --color-nile-900: #313613;
  --color-nile-950: #1e2209;
  --color-eagle: #a86d39;
  --color-eagle-50: #fff0e5;
  --color-eagle-100: #ffe1ca;
  --color-eagle-200: #f9c79f;
  --color-eagle-300: #e5ad7f;
  --color-eagle-400: #c68a58;
  --color-eagle-500: #a86d39;
  --color-eagle-600: #8c5522;
  --color-eagle-700: #734110;
  --color-eagle-800: #5d3203;
  --color-eagle-900: #4a2500;
  --color-eagle-950: #301600;
  --color-tuscan: #ffd8ab;
  --color-tuscan-50: #fffaf3;
  --color-tuscan-100: #ffefdd;
  --color-tuscan-200: #ffd8ab;
  --color-tuscan-300: #e1c19d;
  --color-tuscan-400: #c3a077;
  --color-tuscan-500: #a68258;
  --color-tuscan-600: #89673e;
  --color-tuscan-700: #6e5029;
  --color-tuscan-800: #573c1a;
  --color-tuscan-900: #442e11;
  --color-tuscan-950: #2c1b07;
}