Shepherd’s Green to Nightwalker color palette

698336Shepherd’s Green 90BB58Makin It Rain FFEDF7Partial Pink 435994Piccadilly Purple 1C1B37Nightwalker

Open in generator Export PNG, PDF, ASE…

About this palette

Shepherd’s Green to Nightwalker is a 5-color cool palette: #698336 (Shepherd’s Green), #90BB58 (Makin It Rain), #FFEDF7 (Partial Pink), #435994 (Piccadilly Purple), #1C1B37 (Nightwalker). It mixes green, white, blue, purple tones and feels cool overall. The strongest text pairing is #FFEDF7 on #1C1B37 with a contrast ratio of 14.83:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shepherd’s Green	rgb(105, 131, 54)	hsl(80, 42%, 36%)
Makin It Rain	rgb(144, 187, 88)	hsl(86, 42%, 54%)
Partial Pink	rgb(255, 237, 247)	hsl(327, 100%, 96%)
Piccadilly Purple	rgb(67, 89, 148)	hsl(224, 38%, 42%)
Nightwalker	rgb(28, 27, 55)	hsl(242, 34%, 16%)

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.

Aa14.83:1 Super#FFEDF7 on #1C1B37
Aa14.83:1 Super#1C1B37 on #FFEDF7
Aa7.48:1 Very good#90BB58 on #1C1B37
Aa7.48:1 Very good#1C1B37 on #90BB58
Aa6.04:1 Good#FFEDF7 on #435994
Aa6.04:1 Good#435994 on #FFEDF7
Aa3.89:1 Poor#698336 on #1C1B37
Aa3.89:1 Poor#1C1B37 on #698336

Color blindness preview

CSS variables

/* Shepherd’s Green to Nightwalker — https://swatchly.xyz/palette/698336-90bb58-ffedf7-435994-1c1b37 */
:root {
  --shepherd-s-green: #698336;
  --makin-it-rain: #90bb58;
  --partial-pink: #ffedf7;
  --piccadilly-purple: #435994;
  --nightwalker: #1c1b37;
}

Tailwind CSS v4

/* Shepherd’s Green to Nightwalker — https://swatchly.xyz/palette/698336-90bb58-ffedf7-435994-1c1b37 */
@theme {
  --color-shepherd-s-green: #698336;
  --color-shepherd-s-green-50: #ecfdd2;
  --color-shepherd-s-green-100: #e3f6c7;
  --color-shepherd-s-green-200: #d0e6ae;
  --color-shepherd-s-green-300: #bad292;
  --color-shepherd-s-green-400: #9bb66e;
  --color-shepherd-s-green-500: #819c50;
  --color-shepherd-s-green-600: #698336;
  --color-shepherd-s-green-700: #51691f;
  --color-shepherd-s-green-800: #3e520c;
  --color-shepherd-s-green-900: #2e3f02;
  --color-shepherd-s-green-950: #1b2800;
  --color-makin-it-rain: #90bb58;
  --color-makin-it-rain-50: #efffdf;
  --color-makin-it-rain-100: #e0fbc2;
  --color-makin-it-rain-200: #caeba6;
  --color-makin-it-rain-300: #b2d788;
  --color-makin-it-rain-400: #90bb58;
  --color-makin-it-rain-500: #749d3a;
  --color-makin-it-rain-600: #598016;
  --color-makin-it-rain-700: #446600;
  --color-makin-it-rain-800: #334f00;
  --color-makin-it-rain-900: #263c00;
  --color-makin-it-rain-950: #162500;
  --color-partial-pink: #ffedf7;
  --color-partial-pink-50: #ffedf7;
  --color-partial-pink-100: #f1e6ec;
  --color-partial-pink-200: #dfd2d9;
  --color-partial-pink-300: #cabbc3;
  --color-partial-pink-400: #ab9ca4;
  --color-partial-pink-500: #918189;
  --color-partial-pink-600: #76676f;
  --color-partial-pink-700: #5e5158;
  --color-partial-pink-800: #4a3e45;
  --color-partial-pink-900: #392f35;
  --color-partial-pink-950: #241d21;
  --color-piccadilly-purple: #435994;
  --color-piccadilly-purple-50: #f1f5ff;
  --color-piccadilly-purple-100: #e3ebff;
  --color-piccadilly-purple-200: #c8d9ff;
  --color-piccadilly-purple-300: #abc3fb;
  --color-piccadilly-purple-400: #8ba4e1;
  --color-piccadilly-purple-500: #7089c8;
  --color-piccadilly-purple-600: #586fac;
  --color-piccadilly-purple-700: #435994;
  --color-piccadilly-purple-800: #334576;
  --color-piccadilly-purple-900: #25355e;
  --color-piccadilly-purple-950: #15203f;
  --color-nightwalker: #1c1b37;
  --color-nightwalker-50: #f3f4ff;
  --color-nightwalker-100: #e8e9ff;
  --color-nightwalker-200: #d3d5f1;
  --color-nightwalker-300: #bcbede;
  --color-nightwalker-400: #9d9ec1;
  --color-nightwalker-500: #8182a5;
  --color-nightwalker-600: #676889;
  --color-nightwalker-700: #515270;
  --color-nightwalker-800: #3f3f59;
  --color-nightwalker-900: #303046;
  --color-nightwalker-950: #1c1b37;
}