Nightwalker to Piggy Bank Color Palette

About this palette

Nightwalker to Piggy Bank is a 4-color cool palette: #191D40 (Nightwalker), #2C744E (Greasy Greens), #7EB182 (Verde), #FFCDBE (Piggy Bank). It mixes purple, green, pink tones and feels cool overall. The strongest text pairing is #191D40 on #FFCDBE with a contrast ratio of 11.41:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Nightwalker	rgb(25, 29, 64)	hsl(234, 44%, 17%)
Greasy Greens	rgb(44, 116, 78)	hsl(148, 45%, 31%)
Verde	rgb(126, 177, 130)	hsl(125, 25%, 59%)
Piggy Bank	rgb(255, 205, 190)	hsl(14, 100%, 87%)

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.

Aa11.41:1 Very good#191D40 on #FFCDBE
Aa11.41:1 Very good#FFCDBE on #191D40
Aa6.58:1 Good#191D40 on #7EB182
Aa6.58:1 Good#7EB182 on #191D40
Aa3.96:1 Poor#2C744E on #FFCDBE
Aa3.96:1 Poor#FFCDBE on #2C744E

Color blindness preview

CSS variables

/* Nightwalker to Piggy Bank — https://swatchly.xyz/palette/191d40-2c744e-7eb182-ffcdbe */
:root {
  --nightwalker: #191d40;
  --greasy-greens: #2c744e;
  --verde: #7eb182;
  --piggy-bank: #ffcdbe;
}

Tailwind CSS v4

/* Nightwalker to Piggy Bank — https://swatchly.xyz/palette/191d40-2c744e-7eb182-ffcdbe */
@theme {
  --color-nightwalker: #191d40;
  --color-nightwalker-50: #f2f5ff;
  --color-nightwalker-100: #e5eaff;
  --color-nightwalker-200: #ced6f8;
  --color-nightwalker-300: #b6bfe6;
  --color-nightwalker-400: #969fc9;
  --color-nightwalker-500: #7b84af;
  --color-nightwalker-600: #626a92;
  --color-nightwalker-700: #4d5479;
  --color-nightwalker-800: #3b4162;
  --color-nightwalker-900: #2d324e;
  --color-nightwalker-950: #191d40;
  --color-greasy-greens: #2c744e;
  --color-greasy-greens-50: #ddffe9;
  --color-greasy-greens-100: #caf6da;
  --color-greasy-greens-200: #aee3c2;
  --color-greasy-greens-300: #90cda8;
  --color-greasy-greens-400: #69ad85;
  --color-greasy-greens-500: #4a9069;
  --color-greasy-greens-600: #2c744e;
  --color-greasy-greens-700: #1c5d3c;
  --color-greasy-greens-800: #0f492d;
  --color-greasy-greens-900: #063921;
  --color-greasy-greens-950: #022413;
  --color-verde: #7eb182;
  --color-verde-50: #e2ffe3;
  --color-verde-100: #d5f6d7;
  --color-verde-200: #bde4bf;
  --color-verde-300: #a3cfa6;
  --color-verde-400: #7eb182;
  --color-verde-500: #639567;
  --color-verde-600: #49794e;
  --color-verde-700: #35613a;
  --color-verde-800: #264d2a;
  --color-verde-900: #1a3c1e;
  --color-verde-950: #0d2510;
  --color-piggy-bank: #ffcdbe;
  --color-piggy-bank-50: #fff4f1;
  --color-piggy-bank-100: #ffe8e1;
  --color-piggy-bank-200: #ffcdbe;
  --color-piggy-bank-300: #e2b8ac;
  --color-piggy-bank-400: #c4978a;
  --color-piggy-bank-500: #a87b6d;
  --color-piggy-bank-600: #8b6154;
  --color-piggy-bank-700: #714b3f;
  --color-piggy-bank-800: #5a392f;
  --color-piggy-bank-900: #472b22;
  --color-piggy-bank-950: #2d1913;
}