Blackout to Grape Kiss Color Palette

About this palette

Blackout to Grape Kiss is a 4-color dark, warm, gradient palette: #110500 (Blackout), #55091A (Sacramental Red), #4E3022 (Espresso), #8E486A (Grape Kiss). It mixes black, brown, red tones and feels warm overall. The strongest text pairing is #110500 on #8E486A with a contrast ratio of 3.14:1, and 0 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Blackout	rgb(17, 5, 0)	hsl(18, 100%, 3%)
Sacramental Red	rgb(85, 9, 26)	hsl(347, 81%, 18%)
Espresso	rgb(78, 48, 34)	hsl(19, 39%, 22%)
Grape Kiss	rgb(142, 72, 106)	hsl(331, 33%, 42%)

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.14:1 Poor#110500 on #8E486A
Aa3.14:1 Poor#8E486A on #110500

Color blindness preview

CSS variables

/* Blackout to Grape Kiss — https://swatchly.xyz/palette/110500-55091a-4e3022-8e486a */
:root {
  --blackout: #110500;
  --sacramental-red: #55091a;
  --espresso: #4e3022;
  --grape-kiss: #8e486a;
}

Tailwind CSS v4

/* Blackout to Grape Kiss — https://swatchly.xyz/palette/110500-55091a-4e3022-8e486a */
@theme {
  --color-blackout: #110500;
  --color-blackout-50: #fef3ea;
  --color-blackout-100: #f6e8df;
  --color-blackout-200: #e4d4c9;
  --color-blackout-300: #cfbdb0;
  --color-blackout-400: #b09d8f;
  --color-blackout-500: #907d6e;
  --color-blackout-600: #6f5e51;
  --color-blackout-700: #524438;
  --color-blackout-800: #392e25;
  --color-blackout-900: #241b15;
  --color-blackout-950: #110500;
  --color-sacramental-red: #55091a;
  --color-sacramental-red-50: #fff1f2;
  --color-sacramental-red-100: #ffe3e4;
  --color-sacramental-red-200: #ffc7ca;
  --color-sacramental-red-300: #f6a9ae;
  --color-sacramental-red-400: #d8858b;
  --color-sacramental-red-500: #ba676e;
  --color-sacramental-red-600: #9a4d54;
  --color-sacramental-red-700: #7d373f;
  --color-sacramental-red-800: #62272e;
  --color-sacramental-red-900: #55091a;
  --color-sacramental-red-950: #2f0d12;
  --color-espresso: #4e3022;
  --color-espresso-50: #fff2ec;
  --color-espresso-100: #fee5da;
  --color-espresso-200: #edd1c4;
  --color-espresso-300: #d9b9aa;
  --color-espresso-400: #bd9a8a;
  --color-espresso-500: #a37f6f;
  --color-espresso-600: #886657;
  --color-espresso-700: #705143;
  --color-espresso-800: #5b4034;
  --color-espresso-900: #4e3022;
  --color-espresso-950: #301f17;
  --color-grape-kiss: #8e486a;
  --color-grape-kiss-50: #fff1f6;
  --color-grape-kiss-100: #ffe0ed;
  --color-grape-kiss-200: #fdbfda;
  --color-grape-kiss-300: #e9a4c3;
  --color-grape-kiss-400: #cb81a3;
  --color-grape-kiss-500: #ad6386;
  --color-grape-kiss-600: #8e486a;
  --color-grape-kiss-700: #733754;
  --color-grape-kiss-800: #5c2842;
  --color-grape-kiss-900: #491d33;
  --color-grape-kiss-950: #301020;
}