Evil Cigar to Baby Pink color palette

About this palette

Evil Cigar to Baby Pink is a 5-color vibrant, warm, gradient palette: #4F1F00 (Evil Cigar), #8D003B (Macabre), #BE4BB1 (Love Priestess), #F072CE (Nervous Neon Pink), #FFB6C8 (Baby Pink). It mixes brown, red, pink tones and feels warm overall. The strongest text pairing is #4F1F00 on #FFB6C8 with a contrast ratio of 8.36:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Evil Cigarrgb(79, 31, 0)hsl(24, 100%, 15%)
Macabrergb(141, 0, 59)hsl(335, 100%, 28%)
Love Priestessrgb(190, 75, 177)hsl(307, 47%, 52%)
Nervous Neon Pinkrgb(240, 114, 206)hsl(316, 81%, 69%)
Baby Pinkrgb(255, 182, 200)hsl(345, 100%, 86%)

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.

  • Aa8.36:1 Very good#4F1F00 on #FFB6C8
  • Aa8.36:1 Very good#FFB6C8 on #4F1F00
  • Aa5.82:1 Good#8D003B on #FFB6C8
  • Aa5.82:1 Good#FFB6C8 on #8D003B
  • Aa5.24:1 Good#4F1F00 on #F072CE
  • Aa5.24:1 Good#F072CE on #4F1F00
  • Aa3.64:1 Poor#8D003B on #F072CE
  • Aa3.64:1 Poor#F072CE on #8D003B

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Evil Cigar to Baby Pink — https://swatchly.xyz/palette/4f1f00-8d003b-be4bb1-f072ce-ffb6c8 */
:root {
  --evil-cigar: #4f1f00;
  --macabre: #8d003b;
  --love-priestess: #be4bb1;
  --nervous-neon-pink: #f072ce;
  --baby-pink: #ffb6c8;
}

Tailwind CSS v4

/* Evil Cigar to Baby Pink — https://swatchly.xyz/palette/4f1f00-8d003b-be4bb1-f072ce-ffb6c8 */
@theme {
  --color-evil-cigar: #4f1f00;
  --color-evil-cigar-50: #fff2ec;
  --color-evil-cigar-100: #ffe5d8;
  --color-evil-cigar-200: #faccb5;
  --color-evil-cigar-300: #e8b499;
  --color-evil-cigar-400: #ca9275;
  --color-evil-cigar-500: #ae7558;
  --color-evil-cigar-600: #905b3f;
  --color-evil-cigar-700: #74452b;
  --color-evil-cigar-800: #5c331d;
  --color-evil-cigar-900: #4f1f00;
  --color-evil-cigar-950: #2d1508;
  --color-macabre: #8d003b;
  --color-macabre-50: #fff1f3;
  --color-macabre-100: #ffe3e7;
  --color-macabre-200: #ffc6d0;
  --color-macabre-300: #ffa5b6;
  --color-macabre-400: #f57693;
  --color-macabre-500: #da5879;
  --color-macabre-600: #bc3d61;
  --color-macabre-700: #a0284d;
  --color-macabre-800: #8d003b;
  --color-macabre-900: #6c0a2e;
  --color-macabre-950: #49011b;
  --color-love-priestess: #be4bb1;
  --color-love-priestess-50: #ffeefc;
  --color-love-priestess-100: #ffddf9;
  --color-love-priestess-200: #ffbaf4;
  --color-love-priestess-300: #fa92eb;
  --color-love-priestess-400: #dc6bce;
  --color-love-priestess-500: #be4bb1;
  --color-love-priestess-600: #a03094;
  --color-love-priestess-700: #841c7a;
  --color-love-priestess-800: #6b0c63;
  --color-love-priestess-900: #55034f;
  --color-love-priestess-950: #380034;
  --color-nervous-neon-pink: #f072ce;
  --color-nervous-neon-pink-50: #fff3fb;
  --color-nervous-neon-pink-100: #ffe6f6;
  --color-nervous-neon-pink-200: #ffc8ed;
  --color-nervous-neon-pink-300: #ffa3e3;
  --color-nervous-neon-pink-400: #f072ce;
  --color-nervous-neon-pink-500: #cf55b0;
  --color-nervous-neon-pink-600: #af3792;
  --color-nervous-neon-pink-700: #911f77;
  --color-nervous-neon-pink-800: #750c5f;
  --color-nervous-neon-pink-900: #5c014b;
  --color-nervous-neon-pink-950: #3c002f;
  --color-baby-pink: #ffb6c8;
  --color-baby-pink-50: #ffe7ec;
  --color-baby-pink-100: #ffd7e0;
  --color-baby-pink-200: #ffb6c8;
  --color-baby-pink-300: #e4a4b4;
  --color-baby-pink-400: #c88596;
  --color-baby-pink-500: #ad6b7d;
  --color-baby-pink-600: #915364;
  --color-baby-pink-700: #784050;
  --color-baby-pink-800: #62303f;
  --color-baby-pink-900: #4d2330;
  --color-baby-pink-950: #32141d;
}

Similar palettes