3AM Breakup to Ninja Princess Color Palette

About this palette

3AM Breakup to Ninja Princess is a 5-color dark, warm, gradient palette: #270700 (3AM Breakup), #220838 (Midnight Monarch), #4E2C0E (Couch), #6D3627 (Kenyan Copper), #7A518C (Ninja Princess). It mixes black, purple, brown tones and feels warm overall. The strongest text pairing is #270700 on #7A518C with a contrast ratio of 3.03:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
3AM Breakup	rgb(39, 7, 0)	hsl(11, 100%, 8%)
Midnight Monarch	rgb(34, 8, 56)	hsl(272, 75%, 13%)
Couch	rgb(78, 44, 14)	hsl(28, 70%, 18%)
Kenyan Copper	rgb(109, 54, 39)	hsl(13, 47%, 29%)
Ninja Princess	rgb(122, 81, 140)	hsl(282, 27%, 43%)

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.

Aa3.03:1 Poor#270700 on #7A518C
Aa3.03:1 Poor#7A518C on #270700

Color blindness preview

CSS variables

/* 3AM Breakup to Ninja Princess — https://swatchly.xyz/palette/270700-220838-4e2c0e-6d3627-7a518c */
:root {
  --c-3am-breakup: #270700;
  --midnight-monarch: #220838;
  --couch: #4e2c0e;
  --kenyan-copper: #6d3627;
  --ninja-princess: #7a518c;
}

Tailwind CSS v4

/* 3AM Breakup to Ninja Princess — https://swatchly.xyz/palette/270700-220838-4e2c0e-6d3627-7a518c */
@theme {
  --color-c-3am-breakup: #270700;
  --color-c-3am-breakup-50: #fff2ed;
  --color-c-3am-breakup-100: #ffe5dc;
  --color-c-3am-breakup-200: #f2cfc2;
  --color-c-3am-breakup-300: #deb7a9;
  --color-c-3am-breakup-400: #c19687;
  --color-c-3am-breakup-500: #a27869;
  --color-c-3am-breakup-600: #835c4e;
  --color-c-3am-breakup-700: #674438;
  --color-c-3am-breakup-800: #4d3127;
  --color-c-3am-breakup-900: #382119;
  --color-c-3am-breakup-950: #270700;
  --color-midnight-monarch: #220838;
  --color-midnight-monarch-50: #f8f2ff;
  --color-midnight-monarch-100: #f0e6ff;
  --color-midnight-monarch-200: #e1cdfb;
  --color-midnight-monarch-300: #ccb5e9;
  --color-midnight-monarch-400: #ad94cd;
  --color-midnight-monarch-500: #9177b0;
  --color-midnight-monarch-600: #745c91;
  --color-midnight-monarch-700: #5b4575;
  --color-midnight-monarch-800: #46335b;
  --color-midnight-monarch-900: #342445;
  --color-midnight-monarch-950: #220838;
  --color-couch: #4e2c0e;
  --color-couch-50: #fff3e9;
  --color-couch-100: #ffe6d3;
  --color-couch-200: #f1d0b9;
  --color-couch-300: #ddb99e;
  --color-couch-400: #c0997b;
  --color-couch-500: #a57e5f;
  --color-couch-600: #8a6447;
  --color-couch-700: #714f34;
  --color-couch-800: #5b3d25;
  --color-couch-900: #4e2c0e;
  --color-couch-950: #2f1c0d;
  --color-kenyan-copper: #6d3627;
  --color-kenyan-copper-50: #fff2ee;
  --color-kenyan-copper-100: #ffe5dd;
  --color-kenyan-copper-200: #fdcabc;
  --color-kenyan-copper-300: #ebb3a3;
  --color-kenyan-copper-400: #d09281;
  --color-kenyan-copper-500: #b57766;
  --color-kenyan-copper-600: #995e4e;
  --color-kenyan-copper-700: #7f4a3b;
  --color-kenyan-copper-800: #6d3627;
  --color-kenyan-copper-900: #532a1f;
  --color-kenyan-copper-950: #371911;
  --color-ninja-princess: #7a518c;
  --color-ninja-princess-50: #fbf1ff;
  --color-ninja-princess-100: #f5e1ff;
  --color-ninja-princess-200: #e8c6f8;
  --color-ninja-princess-300: #d3ace4;
  --color-ninja-princess-400: #b389c6;
  --color-ninja-princess-500: #976ca9;
  --color-ninja-princess-600: #7a518c;
  --color-ninja-princess-700: #623e72;
  --color-ninja-princess-800: #4e2f5b;
  --color-ninja-princess-900: #3d2348;
  --color-ninja-princess-950: #27142f;
}