Start generating

Nightwalker to Jasmine color palette

1C1F3FNightwalker383E8FBlueberryC1B46BMotherland7C6200Alligator6A87EDSkinny JeansFFF2B7Jasmine
Open in generator Export PNG, PDF, ASE…

About this palette

Nightwalker to Jasmine is a 6-color palette: #1C1F3F (Nightwalker), #383E8F (Blueberry), #C1B46B (Motherland), #7C6200 (Alligator), #6A87ED (Skinny Jeans), #FFF2B7 (Jasmine). It mixes purple, yellow, brown, blue tones and feels balanced overall. The strongest text pairing is #1C1F3F on #FFF2B7 with a contrast ratio of 14.15:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Nightwalkerrgb(28, 31, 63)hsl(235, 38%, 18%)
Blueberryrgb(56, 62, 143)hsl(236, 44%, 39%)
Motherlandrgb(193, 180, 107)hsl(51, 41%, 59%)
Alligatorrgb(124, 98, 0)hsl(47, 100%, 24%)
Skinny Jeansrgb(106, 135, 237)hsl(227, 78%, 67%)
Jasminergb(255, 242, 183)hsl(49, 100%, 86%)

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.15:1 Super#1C1F3F on #FFF2B7
  • Aa14.15:1 Super#FFF2B7 on #1C1F3F
  • Aa8.27:1 Very good#383E8F on #FFF2B7
  • Aa8.27:1 Very good#FFF2B7 on #383E8F
  • Aa7.60:1 Very good#1C1F3F on #C1B46B
  • Aa7.60:1 Very good#C1B46B on #1C1F3F
  • Aa5.17:1 Good#7C6200 on #FFF2B7
  • Aa5.17:1 Good#FFF2B7 on #7C6200

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Nightwalker to Jasmine — https://swatchly.xyz/palette/1c1f3f-383e8f-c1b46b-7c6200-6a87ed-fff2b7 */
:root {
  --nightwalker: #1c1f3f;
  --blueberry: #383e8f;
  --motherland: #c1b46b;
  --alligator: #7c6200;
  --skinny-jeans: #6a87ed;
  --jasmine: #fff2b7;
}

Tailwind CSS v4

/* Nightwalker to Jasmine — https://swatchly.xyz/palette/1c1f3f-383e8f-c1b46b-7c6200-6a87ed-fff2b7 */
@theme {
  --color-nightwalker: #1c1f3f;
  --color-nightwalker-50: #f2f4ff;
  --color-nightwalker-100: #e6eaff;
  --color-nightwalker-200: #d0d5f5;
  --color-nightwalker-300: #b8bfe2;
  --color-nightwalker-400: #989fc6;
  --color-nightwalker-500: #7d84ab;
  --color-nightwalker-600: #646a90;
  --color-nightwalker-700: #4f5577;
  --color-nightwalker-800: #3e4260;
  --color-nightwalker-900: #30344d;
  --color-nightwalker-950: #1c1f3f;
  --color-blueberry: #383e8f;
  --color-blueberry-50: #f2f5ff;
  --color-blueberry-100: #e5eaff;
  --color-blueberry-200: #ccd5ff;
  --color-blueberry-300: #b1beff;
  --color-blueberry-400: #8e9df2;
  --color-blueberry-500: #7581d9;
  --color-blueberry-600: #5d68bc;
  --color-blueberry-700: #4952a0;
  --color-blueberry-800: #383e8f;
  --color-blueberry-900: #2b316d;
  --color-blueberry-950: #1a1d49;
  --color-motherland: #c1b46b;
  --color-motherland-50: #f6efc3;
  --color-motherland-100: #ebe3b1;
  --color-motherland-200: #d7cd93;
  --color-motherland-300: #c1b46b;
  --color-motherland-400: #a49750;
  --color-motherland-500: #8b7e35;
  --color-motherland-600: #72661d;
  --color-motherland-700: #5d5108;
  --color-motherland-800: #4b4100;
  --color-motherland-900: #3b3300;
  --color-motherland-950: #251f00;
  --color-alligator: #7c6200;
  --color-alligator-50: #fff5d8;
  --color-alligator-100: #fae9b9;
  --color-alligator-200: #e9d49a;
  --color-alligator-300: #d3bb78;
  --color-alligator-400: #b59a4e;
  --color-alligator-500: #987e2c;
  --color-alligator-600: #7c6200;
  --color-alligator-700: #634d00;
  --color-alligator-800: #4d3c00;
  --color-alligator-900: #3c2e00;
  --color-alligator-950: #261c00;
  --color-skinny-jeans: #6a87ed;
  --color-skinny-jeans-50: #f3f7ff;
  --color-skinny-jeans-100: #e8eeff;
  --color-skinny-jeans-200: #cfdbff;
  --color-skinny-jeans-300: #b1c5ff;
  --color-skinny-jeans-400: #87a4ff;
  --color-skinny-jeans-500: #6a87ed;
  --color-skinny-jeans-600: #506acc;
  --color-skinny-jeans-700: #3b51ac;
  --color-skinny-jeans-800: #2b3d8d;
  --color-skinny-jeans-900: #1f2d71;
  --color-skinny-jeans-950: #101a4b;
  --color-jasmine: #fff2b7;
  --color-jasmine-50: #fff2b7;
  --color-jasmine-100: #f0e9c4;
  --color-jasmine-200: #dfd6aa;
  --color-jasmine-300: #cac08f;
  --color-jasmine-400: #ada16b;
  --color-jasmine-500: #92864f;
  --color-jasmine-600: #786c36;
  --color-jasmine-700: #605523;
  --color-jasmine-800: #4c4215;
  --color-jasmine-900: #3b330b;
  --color-jasmine-950: #251f04;
}

Similar palettes