Start generating

Go to Hell Black to Vanilla Blush color palette

3A281AGo to Hell Black2B574CHunter857F95Mecha MetalB3A8CDLucius LilacB8DAD0Catch the WaveFFEBE1Vanilla Blush
Open in generator Export PNG, PDF, ASE…

About this palette

Go to Hell Black to Vanilla Blush is a 6-color muted palette: #3A281A (Go to Hell Black), #2B574C (Hunter), #857F95 (Mecha Metal), #B3A8CD (Lucius Lilac), #B8DAD0 (Catch the Wave), #FFEBE1 (Vanilla Blush). It mixes brown, turquoise, gray, purple, white tones and feels cool overall. The strongest text pairing is #3A281A on #FFEBE1 with a contrast ratio of 12.16:1, and 5 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Go to Hell Blackrgb(58, 40, 26)hsl(26, 38%, 16%)
Hunterrgb(43, 87, 76)hsl(165, 34%, 25%)
Mecha Metalrgb(133, 127, 149)hsl(256, 9%, 54%)
Lucius Lilacrgb(179, 168, 205)hsl(258, 27%, 73%)
Catch the Wavergb(184, 218, 208)hsl(162, 31%, 79%)
Vanilla Blushrgb(255, 235, 225)hsl(20, 100%, 94%)

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.

  • Aa12.16:1 Super#3A281A on #FFEBE1
  • Aa12.16:1 Super#FFEBE1 on #3A281A
  • Aa9.33:1 Very good#3A281A on #B8DAD0
  • Aa9.33:1 Very good#B8DAD0 on #3A281A
  • Aa7.09:1 Very good#2B574C on #FFEBE1
  • Aa7.09:1 Very good#FFEBE1 on #2B574C
  • Aa6.27:1 Good#3A281A on #B3A8CD
  • Aa6.27:1 Good#B3A8CD on #3A281A

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Go to Hell Black to Vanilla Blush — https://swatchly.xyz/palette/3a281a-2b574c-857f95-b3a8cd-b8dad0-ffebe1 */
:root {
  --go-to-hell-black: #3a281a;
  --hunter: #2b574c;
  --mecha-metal: #857f95;
  --lucius-lilac: #b3a8cd;
  --catch-the-wave: #b8dad0;
  --vanilla-blush: #ffebe1;
}

Tailwind CSS v4

/* Go to Hell Black to Vanilla Blush — https://swatchly.xyz/palette/3a281a-2b574c-857f95-b3a8cd-b8dad0-ffebe1 */
@theme {
  --color-go-to-hell-black: #3a281a;
  --color-go-to-hell-black-50: #fff3e9;
  --color-go-to-hell-black-100: #f7e8dd;
  --color-go-to-hell-black-200: #e6d4c7;
  --color-go-to-hell-black-300: #d1bdae;
  --color-go-to-hell-black-400: #b19b8b;
  --color-go-to-hell-black-500: #957f6f;
  --color-go-to-hell-black-600: #786454;
  --color-go-to-hell-black-700: #5f4c3f;
  --color-go-to-hell-black-800: #49392e;
  --color-go-to-hell-black-900: #3a281a;
  --color-go-to-hell-black-950: #211812;
  --color-hunter: #2b574c;
  --color-hunter-50: #e2fcf4;
  --color-hunter-100: #d6f3ea;
  --color-hunter-200: #bcdfd5;
  --color-hunter-300: #a0c8bc;
  --color-hunter-400: #7ca89b;
  --color-hunter-500: #5e8b7f;
  --color-hunter-600: #446f63;
  --color-hunter-700: #2b574c;
  --color-hunter-800: #22433b;
  --color-hunter-900: #18342d;
  --color-hunter-950: #0c201b;
  --color-mecha-metal: #857f95;
  --color-mecha-metal-50: #f6f2ff;
  --color-mecha-metal-100: #ebe7f7;
  --color-mecha-metal-200: #d7d3e5;
  --color-mecha-metal-300: #c0bbcf;
  --color-mecha-metal-400: #a19bb1;
  --color-mecha-metal-500: #857f95;
  --color-mecha-metal-600: #6b657a;
  --color-mecha-metal-700: #555063;
  --color-mecha-metal-800: #423e4e;
  --color-mecha-metal-900: #332f3d;
  --color-mecha-metal-950: #201d27;
  --color-lucius-lilac: #b3a8cd;
  --color-lucius-lilac-50: #faf9ff;
  --color-lucius-lilac-100: #f4f0ff;
  --color-lucius-lilac-200: #e4dcf7;
  --color-lucius-lilac-300: #d0c7e5;
  --color-lucius-lilac-400: #b3a8cd;
  --color-lucius-lilac-500: #958aae;
  --color-lucius-lilac-600: #786e90;
  --color-lucius-lilac-700: #5f5574;
  --color-lucius-lilac-800: #49415c;
  --color-lucius-lilac-900: #373047;
  --color-lucius-lilac-950: #211c2c;
  --color-catch-the-wave: #b8dad0;
  --color-catch-the-wave-50: #e2f6f0;
  --color-catch-the-wave-100: #d6ece5;
  --color-catch-the-wave-200: #b8dad0;
  --color-catch-the-wave-300: #a6c3bb;
  --color-catch-the-wave-400: #86a69c;
  --color-catch-the-wave-500: #6b8b82;
  --color-catch-the-wave-600: #537169;
  --color-catch-the-wave-700: #3f5b53;
  --color-catch-the-wave-800: #304842;
  --color-catch-the-wave-900: #233832;
  --color-catch-the-wave-950: #14231f;
  --color-vanilla-blush: #ffebe1;
  --color-vanilla-blush-50: #fff7f3;
  --color-vanilla-blush-100: #ffebe1;
  --color-vanilla-blush-200: #e6d8d1;
  --color-vanilla-blush-300: #d0c0b8;
  --color-vanilla-blush-400: #b19f97;
  --color-vanilla-blush-500: #95837a;
  --color-vanilla-blush-600: #796860;
  --color-vanilla-blush-700: #61524a;
  --color-vanilla-blush-800: #4c3f38;
  --color-vanilla-blush-900: #3b302a;
  --color-vanilla-blush-950: #251d19;
}

Similar palettes