Blackout to Red Elegance Color Palette

About this palette

Blackout to Red Elegance is a 5-color dark, warm, earthy, gradient palette: #120900 (Blackout), #390300 (3AM Breakup), #4E1D00 (Evil Cigar), #623500 (Brown), #8D4C51 (Red Elegance). It mixes black, brown, red tones and feels warm overall. The strongest text pairing is #120900 on #8D4C51 with a contrast ratio of 3.09:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(18, 9, 0)	hsl(30, 100%, 4%)
3AM Breakup	rgb(57, 3, 0)	hsl(3, 100%, 11%)
Evil Cigar	rgb(78, 29, 0)	hsl(22, 100%, 15%)
Brown	rgb(98, 53, 0)	hsl(32, 100%, 19%)
Red Elegance	rgb(141, 76, 81)	hsl(355, 30%, 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.09:1 Poor#120900 on #8D4C51
Aa3.09:1 Poor#8D4C51 on #120900

Color blindness preview

CSS variables

/* Blackout to Red Elegance — https://swatchly.xyz/palette/120900-390300-4e1d00-623500-8d4c51 */
:root {
  --blackout: #120900;
  --c-3am-breakup: #390300;
  --evil-cigar: #4e1d00;
  --brown: #623500;
  --red-elegance: #8d4c51;
}

Tailwind CSS v4

/* Blackout to Red Elegance — https://swatchly.xyz/palette/120900-390300-4e1d00-623500-8d4c51 */
@theme {
  --color-blackout: #120900;
  --color-blackout-50: #fcf4e9;
  --color-blackout-100: #f2eadd;
  --color-blackout-200: #e0d6c7;
  --color-blackout-300: #cbbfae;
  --color-blackout-400: #aca08d;
  --color-blackout-500: #8c806d;
  --color-blackout-600: #6d6150;
  --color-blackout-700: #514739;
  --color-blackout-800: #393126;
  --color-blackout-900: #251f17;
  --color-blackout-950: #120900;
  --color-c-3am-breakup: #390300;
  --color-c-3am-breakup-50: #fff2ef;
  --color-c-3am-breakup-100: #ffe4df;
  --color-c-3am-breakup-200: #fec9be;
  --color-c-3am-breakup-300: #ecb0a4;
  --color-c-3am-breakup-400: #cf8f82;
  --color-c-3am-breakup-500: #b27265;
  --color-c-3am-breakup-600: #94574c;
  --color-c-3am-breakup-700: #784137;
  --color-c-3am-breakup-800: #5e3027;
  --color-c-3am-breakup-900: #48221b;
  --color-c-3am-breakup-950: #390300;
  --color-evil-cigar: #4e1d00;
  --color-evil-cigar-50: #fff2ec;
  --color-evil-cigar-100: #ffe5d9;
  --color-evil-cigar-200: #fbccb5;
  --color-evil-cigar-300: #e9b39a;
  --color-evil-cigar-400: #cb9175;
  --color-evil-cigar-500: #ae7458;
  --color-evil-cigar-600: #905a3f;
  --color-evil-cigar-700: #74442b;
  --color-evil-cigar-800: #5b321d;
  --color-evil-cigar-900: #4e1d00;
  --color-evil-cigar-950: #2c1408;
  --color-brown: #623500;
  --color-brown-50: #fff3e9;
  --color-brown-100: #ffe6d2;
  --color-brown-200: #f8cfad;
  --color-brown-300: #e5b690;
  --color-brown-400: #c8966a;
  --color-brown-500: #ac7a4d;
  --color-brown-600: #8f5f34;
  --color-brown-700: #754a21;
  --color-brown-800: #623500;
  --color-brown-900: #492a0a;
  --color-brown-950: #2f1903;
  --color-red-elegance: #8d4c51;
  --color-red-elegance-50: #fff1f2;
  --color-red-elegance-100: #ffe1e2;
  --color-red-elegance-200: #fdc3c5;
  --color-red-elegance-300: #e9a8ab;
  --color-red-elegance-400: #ca8589;
  --color-red-elegance-500: #ac686c;
  --color-red-elegance-600: #8d4c51;
  --color-red-elegance-700: #723a3f;
  --color-red-elegance-800: #5c2c30;
  --color-red-elegance-900: #492024;
  --color-red-elegance-950: #2f1215;
}