Back in Black to Gentle Caress color palette

160F19Back in Black 003B39Rich Black 6B538CNinja Princess 3B8F7FHighlands D2A762Ginger Ale FBD4B4Gentle Caress

Open in generator Export PNG, PDF, ASE…

About this palette

Back in Black to Gentle Caress is a 6-color palette: #160F19 (Back in Black), #003B39 (Rich Black), #6B538C (Ninja Princess), #3B8F7F (Highlands), #D2A762 (Ginger Ale), #FBD4B4 (Gentle Caress). It mixes black, turquoise, purple, yellow, orange tones and feels cool overall. The strongest text pairing is #160F19 on #FBD4B4 with a contrast ratio of 13.59:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Back in Black	rgb(22, 15, 25)	hsl(282, 25%, 8%)
Rich Black	rgb(0, 59, 57)	hsl(178, 100%, 12%)
Ninja Princess	rgb(107, 83, 140)	hsl(265, 26%, 44%)
Highlands	rgb(59, 143, 127)	hsl(169, 42%, 40%)
Ginger Ale	rgb(210, 167, 98)	hsl(37, 55%, 60%)
Gentle Caress	rgb(251, 212, 180)	hsl(27, 90%, 85%)

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.

Aa13.59:1 Super#160F19 on #FBD4B4
Aa13.59:1 Super#FBD4B4 on #160F19
Aa9.01:1 Very good#003B39 on #FBD4B4
Aa9.01:1 Very good#FBD4B4 on #003B39
Aa8.46:1 Very good#160F19 on #D2A762
Aa8.46:1 Very good#D2A762 on #160F19
Aa5.61:1 Good#003B39 on #D2A762
Aa5.61:1 Good#D2A762 on #003B39

Color blindness preview

CSS variables

/* Back in Black to Gentle Caress — https://swatchly.xyz/palette/160f19-003b39-6b538c-3b8f7f-d2a762-fbd4b4 */
:root {
  --back-in-black: #160f19;
  --rich-black: #003b39;
  --ninja-princess: #6b538c;
  --highlands: #3b8f7f;
  --ginger-ale: #d2a762;
  --gentle-caress: #fbd4b4;
}

Tailwind CSS v4

/* Back in Black to Gentle Caress — https://swatchly.xyz/palette/160f19-003b39-6b538c-3b8f7f-d2a762-fbd4b4 */
@theme {
  --color-back-in-black: #160f19;
  --color-back-in-black-50: #f8f3fb;
  --color-back-in-black-100: #efe8f2;
  --color-back-in-black-200: #dcd4df;
  --color-back-in-black-300: #c6bdca;
  --color-back-in-black-400: #a79eab;
  --color-back-in-black-500: #897f8d;
  --color-back-in-black-600: #6b636f;
  --color-back-in-black-700: #524a55;
  --color-back-in-black-800: #3c363f;
  --color-back-in-black-900: #2a252c;
  --color-back-in-black-950: #160f19;
  --color-rich-black: #003b39;
  --color-rich-black-50: #dffcfa;
  --color-rich-black-100: #d3f3f0;
  --color-rich-black-200: #bae1de;
  --color-rich-black-300: #9fcbc8;
  --color-rich-black-400: #7baca9;
  --color-rich-black-500: #5e918e;
  --color-rich-black-600: #447673;
  --color-rich-black-700: #305e5c;
  --color-rich-black-800: #214a48;
  --color-rich-black-900: #003b39;
  --color-rich-black-950: #0a2422;
  --color-ninja-princess: #6b538c;
  --color-ninja-princess-50: #f7f3ff;
  --color-ninja-princess-100: #eee3ff;
  --color-ninja-princess-200: #dcc9fa;
  --color-ninja-princess-300: #c5afe7;
  --color-ninja-princess-400: #a48cc8;
  --color-ninja-princess-500: #876faa;
  --color-ninja-princess-600: #6b538c;
  --color-ninja-princess-700: #554171;
  --color-ninja-princess-800: #43315b;
  --color-ninja-princess-900: #342549;
  --color-ninja-princess-950: #21162f;
  --color-highlands: #3b8f7f;
  --color-highlands-50: #d3fff4;
  --color-highlands-100: #c2f5e9;
  --color-highlands-200: #a5e2d4;
  --color-highlands-300: #85ccbc;
  --color-highlands-400: #5cac9b;
  --color-highlands-500: #3b8f7f;
  --color-highlands-600: #1f7566;
  --color-highlands-700: #075e51;
  --color-highlands-800: #004a3f;
  --color-highlands-900: #003a31;
  --color-highlands-950: #00251e;
  --color-ginger-ale: #d2a762;
  --color-ginger-ale-50: #fff9f0;
  --color-ginger-ale-100: #fff0da;
  --color-ginger-ale-200: #fbdcae;
  --color-ginger-ale-300: #eac790;
  --color-ginger-ale-400: #d2a762;
  --color-ginger-ale-500: #b28945;
  --color-ginger-ale-600: #946c24;
  --color-ginger-ale-700: #785307;
  --color-ginger-ale-800: #5e4000;
  --color-ginger-ale-900: #482f00;
  --color-ginger-ale-950: #2c1c00;
  --color-gentle-caress: #fbd4b4;
  --color-gentle-caress-50: #fff7f0;
  --color-gentle-caress-100: #ffebdb;
  --color-gentle-caress-200: #fbd4b4;
  --color-gentle-caress-300: #debea4;
  --color-gentle-caress-400: #c09d80;
  --color-gentle-caress-500: #a48063;
  --color-gentle-caress-600: #876549;
  --color-gentle-caress-700: #6d4f35;
  --color-gentle-caress-800: #563c25;
  --color-gentle-caress-900: #442d1a;
  --color-gentle-caress-950: #2b1b0d;
}