Black Cherry to Blackout Color Palette

About this palette

Black Cherry to Blackout is a 5-color dark, warm palette: #2A1626 (Black Cherry), #9E3C6B (Royal Flush), #553C08 (Pineapple), #402C00 (Secret Passage), #0D0800 (Blackout). It mixes purple, red, brown, black tones and feels warm overall. The strongest text pairing is #9E3C6B on #0D0800 with a contrast ratio of 3.15:1, and 0 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Cherry	rgb(42, 22, 38)	hsl(312, 31%, 13%)
Royal Flush	rgb(158, 60, 107)	hsl(331, 45%, 43%)
Pineapple	rgb(85, 60, 8)	hsl(41, 83%, 18%)
Secret Passage	rgb(64, 44, 0)	hsl(41, 100%, 13%)
Blackout	rgb(13, 8, 0)	hsl(37, 100%, 3%)

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.15:1 Poor#9E3C6B on #0D0800
Aa3.15:1 Poor#0D0800 on #9E3C6B

Color blindness preview

CSS variables

/* Black Cherry to Blackout — https://swatchly.xyz/palette/2a1626-9e3c6b-553c08-402c00-0d0800 */
:root {
  --black-cherry: #2a1626;
  --royal-flush: #9e3c6b;
  --pineapple: #553c08;
  --secret-passage: #402c00;
  --blackout: #0d0800;
}

Tailwind CSS v4

/* Black Cherry to Blackout — https://swatchly.xyz/palette/2a1626-9e3c6b-553c08-402c00-0d0800 */
@theme {
  --color-black-cherry: #2a1626;
  --color-black-cherry-50: #fff0fb;
  --color-black-cherry-100: #f7e5f2;
  --color-black-cherry-200: #e5d0e0;
  --color-black-cherry-300: #d0b9ca;
  --color-black-cherry-400: #b298ac;
  --color-black-cherry-500: #967d90;
  --color-black-cherry-600: #7b6375;
  --color-black-cherry-700: #624d5d;
  --color-black-cherry-800: #4d3b49;
  --color-black-cherry-900: #3c2c38;
  --color-black-cherry-950: #2a1626;
  --color-royal-flush: #9e3c6b;
  --color-royal-flush-50: #fff1f6;
  --color-royal-flush-100: #ffe0ec;
  --color-royal-flush-200: #ffc0d9;
  --color-royal-flush-300: #fa9cc3;
  --color-royal-flush-400: #dc76a3;
  --color-royal-flush-500: #bd5887;
  --color-royal-flush-600: #9e3c6b;
  --color-royal-flush-700: #812b55;
  --color-royal-flush-800: #681d43;
  --color-royal-flush-900: #531334;
  --color-royal-flush-950: #370920;
  --color-pineapple: #553c08;
  --color-pineapple-50: #fff4e1;
  --color-pineapple-100: #fbe9ca;
  --color-pineapple-200: #ead4b0;
  --color-pineapple-300: #d6bd93;
  --color-pineapple-400: #b89d6f;
  --color-pineapple-500: #9c8152;
  --color-pineapple-600: #816639;
  --color-pineapple-700: #685025;
  --color-pineapple-800: #553c08;
  --color-pineapple-900: #402e0e;
  --color-pineapple-950: #291c05;
  --color-secret-passage: #402c00;
  --color-secret-passage-50: #fff4e0;
  --color-secret-passage-100: #f9e9ce;
  --color-secret-passage-200: #e7d5b5;
  --color-secret-passage-300: #d3be9a;
  --color-secret-passage-400: #b49e75;
  --color-secret-passage-500: #998258;
  --color-secret-passage-600: #7c673f;
  --color-secret-passage-700: #64502c;
  --color-secret-passage-800: #4e3d1d;
  --color-secret-passage-900: #402c00;
  --color-secret-passage-950: #251b08;
  --color-blackout: #0d0800;
  --color-blackout-50: #f9f5ea;
  --color-blackout-100: #efebde;
  --color-blackout-200: #ddd7c8;
  --color-blackout-300: #c7c1b0;
  --color-blackout-400: #a8a18f;
  --color-blackout-500: #87816e;
  --color-blackout-600: #686251;
  --color-blackout-700: #4c4739;
  --color-blackout-800: #353025;
  --color-blackout-900: #211e16;
  --color-blackout-950: #0d0800;
}