Dr Who to Nightly Voyager color palette

7C5580Dr Who 698E68Kashmir 225C42Evergreen A3C3A1Camping Grounds EBCFE9Sweet Dreams 352036Nightly Voyager

Open in generator Export PNG, PDF, ASE…

About this palette

Dr Who to Nightly Voyager is a 6-color cool palette: #7C5580 (Dr Who), #698E68 (Kashmir), #225C42 (Evergreen), #A3C3A1 (Camping Grounds), #EBCFE9 (Sweet Dreams), #352036 (Nightly Voyager). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #EBCFE9 on #352036 with a contrast ratio of 10.37:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dr Who	rgb(124, 85, 128)	hsl(294, 20%, 42%)
Kashmir	rgb(105, 142, 104)	hsl(118, 15%, 48%)
Evergreen	rgb(34, 92, 66)	hsl(153, 46%, 25%)
Camping Grounds	rgb(163, 195, 161)	hsl(116, 22%, 70%)
Sweet Dreams	rgb(235, 207, 233)	hsl(304, 41%, 87%)
Nightly Voyager	rgb(53, 32, 54)	hsl(297, 26%, 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.

Aa10.37:1 Very good#EBCFE9 on #352036
Aa10.37:1 Very good#352036 on #EBCFE9
Aa7.71:1 Very good#A3C3A1 on #352036
Aa7.71:1 Very good#352036 on #A3C3A1
Aa5.47:1 Good#225C42 on #EBCFE9
Aa5.47:1 Good#EBCFE9 on #225C42
Aa4.22:1 Poor#7C5580 on #EBCFE9
Aa4.22:1 Poor#EBCFE9 on #7C5580

Color blindness preview

CSS variables

/* Dr Who to Nightly Voyager — https://swatchly.xyz/palette/7c5580-698e68-225c42-a3c3a1-ebcfe9-352036 */
:root {
  --dr-who: #7c5580;
  --kashmir: #698e68;
  --evergreen: #225c42;
  --camping-grounds: #a3c3a1;
  --sweet-dreams: #ebcfe9;
  --nightly-voyager: #352036;
}

Tailwind CSS v4

/* Dr Who to Nightly Voyager — https://swatchly.xyz/palette/7c5580-698e68-225c42-a3c3a1-ebcfe9-352036 */
@theme {
  --color-dr-who: #7c5580;
  --color-dr-who-50: #fef0ff;
  --color-dr-who-100: #fbdffe;
  --color-dr-who-200: #eac8ed;
  --color-dr-who-300: #d4aed8;
  --color-dr-who-400: #b58db9;
  --color-dr-who-500: #98709d;
  --color-dr-who-600: #7c5580;
  --color-dr-who-700: #644267;
  --color-dr-who-800: #4f3252;
  --color-dr-who-900: #3e2541;
  --color-dr-who-950: #28162a;
  --color-kashmir: #698e68;
  --color-kashmir-50: #e6fce4;
  --color-kashmir-100: #d9f2d8;
  --color-kashmir-200: #c1dfc0;
  --color-kashmir-300: #a8c9a6;
  --color-kashmir-400: #85aa84;
  --color-kashmir-500: #698e68;
  --color-kashmir-600: #507450;
  --color-kashmir-700: #3d5d3c;
  --color-kashmir-800: #2d492d;
  --color-kashmir-900: #213921;
  --color-kashmir-950: #132412;
  --color-evergreen: #225c42;
  --color-evergreen-50: #defeec;
  --color-evergreen-100: #d1f5e1;
  --color-evergreen-200: #b7e2cb;
  --color-evergreen-300: #9accb1;
  --color-evergreen-400: #75ad90;
  --color-evergreen-500: #579074;
  --color-evergreen-600: #3d7459;
  --color-evergreen-700: #225c42;
  --color-evergreen-800: #1b4833;
  --color-evergreen-900: #113726;
  --color-evergreen-950: #072316;
  --color-camping-grounds: #a3c3a1;
  --color-camping-grounds-50: #e4f7e3;
  --color-camping-grounds-100: #d7edd6;
  --color-camping-grounds-200: #bfd9be;
  --color-camping-grounds-300: #a3c3a1;
  --color-camping-grounds-400: #86a584;
  --color-camping-grounds-500: #6c8b6b;
  --color-camping-grounds-600: #547153;
  --color-camping-grounds-700: #415b40;
  --color-camping-grounds-800: #314830;
  --color-camping-grounds-900: #253924;
  --color-camping-grounds-950: #152315;
  --color-sweet-dreams: #ebcfe9;
  --color-sweet-dreams-50: #fff1fe;
  --color-sweet-dreams-100: #f8e6f6;
  --color-sweet-dreams-200: #ebcfe9;
  --color-sweet-dreams-300: #d1bacf;
  --color-sweet-dreams-400: #b399b1;
  --color-sweet-dreams-500: #977d95;
  --color-sweet-dreams-600: #7b637a;
  --color-sweet-dreams-700: #634d62;
  --color-sweet-dreams-800: #4e3b4d;
  --color-sweet-dreams-900: #3d2d3c;
  --color-sweet-dreams-950: #261b26;
  --color-nightly-voyager: #352036;
  --color-nightly-voyager-50: #ffefff;
  --color-nightly-voyager-100: #f6e5f7;
  --color-nightly-voyager-200: #e4d0e5;
  --color-nightly-voyager-300: #cfb8d0;
  --color-nightly-voyager-400: #b198b2;
  --color-nightly-voyager-500: #987e99;
  --color-nightly-voyager-600: #7e667f;
  --color-nightly-voyager-700: #685269;
  --color-nightly-voyager-800: #564256;
  --color-nightly-voyager-900: #463447;
  --color-nightly-voyager-950: #352036;
}