Midnight Velvet to Beefy Pink Color Palette

About this palette

Midnight Velvet to Beefy Pink is a 4-color cool palette: #351A45 (Midnight Velvet), #416600 (Serrano Pepper), #64B22E (Extra Life), #E8BEF7 (Beefy Pink). It mixes purple, green tones and feels cool overall. The strongest text pairing is #351A45 on #E8BEF7 with a contrast ratio of 9.49:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(53, 26, 69)	hsl(278, 45%, 19%)
Serrano Pepper	rgb(65, 102, 0)	hsl(82, 100%, 20%)
Extra Life	rgb(100, 178, 46)	hsl(95, 59%, 44%)
Beefy Pink	rgb(232, 190, 247)	hsl(284, 78%, 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.

Aa9.49:1 Very good#351A45 on #E8BEF7
Aa9.49:1 Very good#E8BEF7 on #351A45
Aa5.74:1 Good#351A45 on #64B22E
Aa5.74:1 Good#64B22E on #351A45
Aa4.20:1 Poor#416600 on #E8BEF7
Aa4.20:1 Poor#E8BEF7 on #416600

Color blindness preview

CSS variables

/* Midnight Velvet to Beefy Pink — https://swatchly.xyz/palette/351a45-416600-64b22e-e8bef7 */
:root {
  --midnight-velvet: #351a45;
  --serrano-pepper: #416600;
  --extra-life: #64b22e;
  --beefy-pink: #e8bef7;
}

Tailwind CSS v4

/* Midnight Velvet to Beefy Pink — https://swatchly.xyz/palette/351a45-416600-64b22e-e8bef7 */
@theme {
  --color-midnight-velvet: #351a45;
  --color-midnight-velvet-50: #f9f2ff;
  --color-midnight-velvet-100: #f4e4ff;
  --color-midnight-velvet-200: #e4cdf5;
  --color-midnight-velvet-300: #d0b5e2;
  --color-midnight-velvet-400: #b194c6;
  --color-midnight-velvet-500: #987aac;
  --color-midnight-velvet-600: #7f6292;
  --color-midnight-velvet-700: #684e7a;
  --color-midnight-velvet-800: #553d65;
  --color-midnight-velvet-900: #463154;
  --color-midnight-velvet-950: #351a45;
  --color-serrano-pepper: #416600;
  --color-serrano-pepper-50: #e6ffcf;
  --color-serrano-pepper-100: #daf6c0;
  --color-serrano-pepper-200: #c4e5a5;
  --color-serrano-pepper-300: #acd187;
  --color-serrano-pepper-400: #8bb360;
  --color-serrano-pepper-500: #709841;
  --color-serrano-pepper-600: #577d25;
  --color-serrano-pepper-700: #416600;
  --color-serrano-pepper-800: #325000;
  --color-serrano-pepper-900: #253e00;
  --color-serrano-pepper-950: #162700;
  --color-extra-life: #64b22e;
  --color-extra-life-50: #ddffcc;
  --color-extra-life-100: #c5faab;
  --color-extra-life-200: #aae789;
  --color-extra-life-300: #8cd165;
  --color-extra-life-400: #64b22e;
  --color-extra-life-500: #4b9600;
  --color-extra-life-600: #3b7900;
  --color-extra-life-700: #2e6100;
  --color-extra-life-800: #234c00;
  --color-extra-life-900: #1a3c00;
  --color-extra-life-950: #0e2600;
  --color-beefy-pink: #e8bef7;
  --color-beefy-pink-50: #f9e9ff;
  --color-beefy-pink-100: #f5d9ff;
  --color-beefy-pink-200: #e8bef7;
  --color-beefy-pink-300: #d0abdc;
  --color-beefy-pink-400: #b38cc1;
  --color-beefy-pink-500: #9872a6;
  --color-beefy-pink-600: #7e598b;
  --color-beefy-pink-700: #674572;
  --color-beefy-pink-800: #52355d;
  --color-beefy-pink-900: #402749;
  --color-beefy-pink-950: #29172f;
}