Midnight Velvet to Avocado Color Palette

About this palette

Midnight Velvet to Avocado is a 4-color cool palette: #26223F (Midnight Velvet), #98B467 (Around the Gills), #FFE3F3 (Bunny Tail), #497F06 (Avocado). It mixes purple, green, white tones and feels cool overall. The strongest text pairing is #26223F on #FFE3F3 with a contrast ratio of 12.68:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(38, 34, 63)	hsl(248, 30%, 19%)
Around the Gills	rgb(152, 180, 103)	hsl(82, 34%, 55%)
Bunny Tail	rgb(255, 227, 243)	hsl(326, 100%, 95%)
Avocado	rgb(73, 127, 6)	hsl(87, 91%, 26%)

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.68:1 Super#26223F on #FFE3F3
Aa12.68:1 Super#FFE3F3 on #26223F
Aa6.55:1 Good#26223F on #98B467
Aa6.55:1 Good#98B467 on #26223F
Aa4.06:1 Poor#FFE3F3 on #497F06
Aa4.06:1 Poor#497F06 on #FFE3F3
Aa3.12:1 Poor#26223F on #497F06
Aa3.12:1 Poor#497F06 on #26223F

Color blindness preview

CSS variables

/* Midnight Velvet to Avocado — https://swatchly.xyz/palette/26223f-98b467-ffe3f3-497f06 */
:root {
  --midnight-velvet: #26223f;
  --around-the-gills: #98b467;
  --bunny-tail: #ffe3f3;
  --avocado: #497f06;
}

Tailwind CSS v4

/* Midnight Velvet to Avocado — https://swatchly.xyz/palette/26223f-98b467-ffe3f3-497f06 */
@theme {
  --color-midnight-velvet: #26223f;
  --color-midnight-velvet-50: #f4f4ff;
  --color-midnight-velvet-100: #eae8ff;
  --color-midnight-velvet-200: #d6d4f1;
  --color-midnight-velvet-300: #bfbddd;
  --color-midnight-velvet-400: #a09dc0;
  --color-midnight-velvet-500: #8683a6;
  --color-midnight-velvet-600: #6d6a8c;
  --color-midnight-velvet-700: #585574;
  --color-midnight-velvet-800: #474460;
  --color-midnight-velvet-900: #39364e;
  --color-midnight-velvet-950: #26223f;
  --color-around-the-gills: #98b467;
  --color-around-the-gills-50: #eeffd5;
  --color-around-the-gills-100: #e4f7c8;
  --color-around-the-gills-200: #d0e6ae;
  --color-around-the-gills-300: #b9d191;
  --color-around-the-gills-400: #98b467;
  --color-around-the-gills-500: #7c974b;
  --color-around-the-gills-600: #617a2f;
  --color-around-the-gills-700: #4b6119;
  --color-around-the-gills-800: #394c09;
  --color-around-the-gills-900: #2a3a01;
  --color-around-the-gills-950: #182400;
  --color-bunny-tail: #ffe3f3;
  --color-bunny-tail-50: #fff2f9;
  --color-bunny-tail-100: #ffe3f3;
  --color-bunny-tail-200: #e6d2dd;
  --color-bunny-tail-300: #d1bac7;
  --color-bunny-tail-400: #b39aa8;
  --color-bunny-tail-500: #977e8d;
  --color-bunny-tail-600: #7b6472;
  --color-bunny-tail-700: #634e5a;
  --color-bunny-tail-800: #4e3c47;
  --color-bunny-tail-900: #3d2d37;
  --color-bunny-tail-950: #271b22;
  --color-avocado: #497f06;
  --color-avocado-50: #e5ffd4;
  --color-avocado-100: #d4faba;
  --color-avocado-200: #bce89d;
  --color-avocado-300: #a2d47d;
  --color-avocado-400: #7fb653;
  --color-avocado-500: #639a30;
  --color-avocado-600: #497f06;
  --color-avocado-700: #386500;
  --color-avocado-800: #2b4f00;
  --color-avocado-900: #203d00;
  --color-avocado-950: #122600;
}