Soulless to Night Snow Color Palette

About this palette

Soulless to Night Snow is a 5-color warm, vintage palette: #171300 (Soulless), #584200 (Pineapple), #7F7327 (Crocodile Style), #839DFF (Fennel Flower), #BACFFF (Night Snow). It mixes black, brown, yellow, blue tones and feels warm overall. The strongest text pairing is #171300 on #BACFFF with a contrast ratio of 11.91:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soulless	rgb(23, 19, 0)	hsl(50, 100%, 5%)
Pineapple	rgb(88, 66, 0)	hsl(45, 100%, 17%)
Crocodile Style	rgb(127, 115, 39)	hsl(52, 53%, 33%)
Fennel Flower	rgb(131, 157, 255)	hsl(227, 100%, 76%)
Night Snow	rgb(186, 207, 255)	hsl(222, 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.

Aa11.91:1 Very good#171300 on #BACFFF
Aa11.91:1 Very good#BACFFF on #171300
Aa7.29:1 Very good#171300 on #839DFF
Aa7.29:1 Very good#839DFF on #171300
Aa6.13:1 Good#584200 on #BACFFF
Aa6.13:1 Good#BACFFF on #584200
Aa3.88:1 Poor#171300 on #7F7327
Aa3.88:1 Poor#7F7327 on #171300

Color blindness preview

CSS variables

/* Soulless to Night Snow — https://swatchly.xyz/palette/171300-584200-7f7327-839dff-bacfff */
:root {
  --soulless: #171300;
  --pineapple: #584200;
  --crocodile-style: #7f7327;
  --fennel-flower: #839dff;
  --night-snow: #bacfff;
}

Tailwind CSS v4

/* Soulless to Night Snow — https://swatchly.xyz/palette/171300-584200-7f7327-839dff-bacfff */
@theme {
  --color-soulless: #171300;
  --color-soulless-50: #f8f6e6;
  --color-soulless-100: #efecda;
  --color-soulless-200: #dcd8c3;
  --color-soulless-300: #c6c2aa;
  --color-soulless-400: #a7a288;
  --color-soulless-500: #89846a;
  --color-soulless-600: #6b674f;
  --color-soulless-700: #524f39;
  --color-soulless-800: #3c3927;
  --color-soulless-900: #2a281a;
  --color-soulless-950: #171300;
  --color-pineapple: #584200;
  --color-pineapple-50: #fff4dc;
  --color-pineapple-100: #faeac6;
  --color-pineapple-200: #e8d6ab;
  --color-pineapple-300: #d5bf8f;
  --color-pineapple-400: #b7a06a;
  --color-pineapple-500: #9d854d;
  --color-pineapple-600: #826b34;
  --color-pineapple-700: #6a5521;
  --color-pineapple-800: #584200;
  --color-pineapple-900: #433309;
  --color-pineapple-950: #2b1f02;
  --color-crocodile-style: #7f7327;
  --color-crocodile-style-50: #fdf7ce;
  --color-crocodile-style-100: #f5eec1;
  --color-crocodile-style-200: #e4dca6;
  --color-crocodile-style-300: #d0c689;
  --color-crocodile-style-400: #b3a862;
  --color-crocodile-style-500: #998d43;
  --color-crocodile-style-600: #7f7327;
  --color-crocodile-style-700: #665b10;
  --color-crocodile-style-800: #504700;
  --color-crocodile-style-900: #3e3600;
  --color-crocodile-style-950: #272100;
  --color-fennel-flower: #839dff;
  --color-fennel-flower-50: #f3f6ff;
  --color-fennel-flower-100: #e6ecff;
  --color-fennel-flower-200: #ccd8ff;
  --color-fennel-flower-300: #adc0ff;
  --color-fennel-flower-400: #839dff;
  --color-fennel-flower-500: #6980df;
  --color-fennel-flower-600: #5065c0;
  --color-fennel-flower-700: #3c4ea1;
  --color-fennel-flower-800: #2c3b84;
  --color-fennel-flower-900: #202c69;
  --color-fennel-flower-950: #121a46;
  --color-night-snow: #bacfff;
  --color-night-snow-50: #e9f0ff;
  --color-night-snow-100: #d8e4ff;
  --color-night-snow-200: #bacfff;
  --color-night-snow-300: #a8bae3;
  --color-night-snow-400: #899cc8;
  --color-night-snow-500: #6f82ae;
  --color-night-snow-600: #576892;
  --color-night-snow-700: #435379;
  --color-night-snow-800: #344162;
  --color-night-snow-900: #26324e;
  --color-night-snow-950: #161f33;
}