Soulless to Ninja Turtle Color Palette

About this palette

Soulless to Ninja Turtle is a 5-color muted, cool palette: #1A1611 (Soulless), #433A4F (Call It a Night), #CFC4E7 (Foggy Love), #5A7C78 (Stream Burble), #87B2AC (Ninja Turtle). It mixes black, purple, turquoise tones and feels cool overall. The strongest text pairing is #1A1611 on #CFC4E7 with a contrast ratio of 10.89:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Soulless	rgb(26, 22, 17)	hsl(33, 21%, 8%)
Call It a Night	rgb(67, 58, 79)	hsl(266, 15%, 27%)
Foggy Love	rgb(207, 196, 231)	hsl(259, 42%, 84%)
Stream Burble	rgb(90, 124, 120)	hsl(173, 16%, 42%)
Ninja Turtle	rgb(135, 178, 172)	hsl(172, 22%, 61%)

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.89:1 Very good#1A1611 on #CFC4E7
Aa10.89:1 Very good#CFC4E7 on #1A1611
Aa7.71:1 Very good#1A1611 on #87B2AC
Aa7.71:1 Very good#87B2AC on #1A1611
Aa6.49:1 Good#433A4F on #CFC4E7
Aa6.49:1 Good#CFC4E7 on #433A4F
Aa4.60:1 Good#433A4F on #87B2AC
Aa4.60:1 Good#87B2AC on #433A4F

Color blindness preview

CSS variables

/* Soulless to Ninja Turtle — https://swatchly.xyz/palette/1a1611-433a4f-cfc4e7-5a7c78-87b2ac */
:root {
  --soulless: #1a1611;
  --call-it-a-night: #433a4f;
  --foggy-love: #cfc4e7;
  --stream-burble: #5a7c78;
  --ninja-turtle: #87b2ac;
}

Tailwind CSS v4

/* Soulless to Ninja Turtle — https://swatchly.xyz/palette/1a1611-433a4f-cfc4e7-5a7c78-87b2ac */
@theme {
  --color-soulless: #1a1611;
  --color-soulless-50: #f8f4f1;
  --color-soulless-100: #eeeae6;
  --color-soulless-200: #dbd7d1;
  --color-soulless-300: #c5c0ba;
  --color-soulless-400: #a6a19a;
  --color-soulless-500: #89837d;
  --color-soulless-600: #6c6761;
  --color-soulless-700: #544f4a;
  --color-soulless-800: #3f3b37;
  --color-soulless-900: #2e2b27;
  --color-soulless-950: #1a1611;
  --color-call-it-a-night: #433a4f;
  --color-call-it-a-night-50: #f7f2ff;
  --color-call-it-a-night-100: #eee8f8;
  --color-call-it-a-night-200: #dbd3e7;
  --color-call-it-a-night-300: #c4bbd1;
  --color-call-it-a-night-400: #a59bb3;
  --color-call-it-a-night-500: #897f97;
  --color-call-it-a-night-600: #6e647b;
  --color-call-it-a-night-700: #564e62;
  --color-call-it-a-night-800: #433a4f;
  --color-call-it-a-night-900: #332d3b;
  --color-call-it-a-night-950: #1f1b25;
  --color-foggy-love: #cfc4e7;
  --color-foggy-love-50: #fbf9ff;
  --color-foggy-love-100: #f4efff;
  --color-foggy-love-200: #e3dbf4;
  --color-foggy-love-300: #cfc4e7;
  --color-foggy-love-400: #ada3c3;
  --color-foggy-love-500: #9086a6;
  --color-foggy-love-600: #746a89;
  --color-foggy-love-700: #5c526f;
  --color-foggy-love-800: #473f57;
  --color-foggy-love-900: #352f43;
  --color-foggy-love-950: #211c2b;
  --color-stream-burble: #5a7c78;
  --color-stream-burble-50: #e6faf7;
  --color-stream-burble-100: #dcf2ef;
  --color-stream-burble-200: #c7e1de;
  --color-stream-burble-300: #afcdc9;
  --color-stream-burble-400: #8eafab;
  --color-stream-burble-500: #739691;
  --color-stream-burble-600: #5a7c78;
  --color-stream-burble-700: #44635f;
  --color-stream-burble-800: #324e4b;
  --color-stream-burble-900: #243c39;
  --color-stream-burble-950: #142523;
  --color-ninja-turtle: #87b2ac;
  --color-ninja-turtle-50: #e6fdfa;
  --color-ninja-turtle-100: #dbf5f1;
  --color-ninja-turtle-200: #c4e4df;
  --color-ninja-turtle-300: #abcfca;
  --color-ninja-turtle-400: #87b2ac;
  --color-ninja-turtle-500: #6b958f;
  --color-ninja-turtle-600: #507974;
  --color-ninja-turtle-700: #3b605c;
  --color-ninja-turtle-800: #2a4b47;
  --color-ninja-turtle-900: #1d3a36;
  --color-ninja-turtle-950: #0f2321;
}