Grasshopper to Black Velvet color palette

6E8454Grasshopper 79415EMagician’s Cloak D2F3D2Snowy Mint B0ABEFWondrous Wisteria 25222FBlack Velvet

Open in generator Export PNG, PDF, ASE…

About this palette

Grasshopper to Black Velvet is a 5-color cool palette: #6E8454 (Grasshopper), #79415E (Magician’s Cloak), #D2F3D2 (Snowy Mint), #B0ABEF (Wondrous Wisteria), #25222F (Black Velvet). It mixes green, red, purple, gray tones and feels cool overall. The strongest text pairing is #D2F3D2 on #25222F with a contrast ratio of 12.97:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Grasshopper	rgb(110, 132, 84)	hsl(88, 22%, 42%)
Magician’s Cloak	rgb(121, 65, 94)	hsl(329, 30%, 36%)
Snowy Mint	rgb(210, 243, 210)	hsl(120, 58%, 89%)
Wondrous Wisteria	rgb(176, 171, 239)	hsl(244, 68%, 80%)
Black Velvet	rgb(37, 34, 47)	hsl(254, 16%, 16%)

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.97:1 Super#D2F3D2 on #25222F
Aa12.97:1 Super#25222F on #D2F3D2
Aa7.35:1 Very good#B0ABEF on #25222F
Aa7.35:1 Very good#25222F on #B0ABEF
Aa6.41:1 Good#79415E on #D2F3D2
Aa6.41:1 Good#D2F3D2 on #79415E
Aa3.78:1 Poor#6E8454 on #25222F
Aa3.78:1 Poor#25222F on #6E8454

Color blindness preview

CSS variables

/* Grasshopper to Black Velvet — https://swatchly.xyz/palette/6e8454-79415e-d2f3d2-b0abef-25222f */
:root {
  --grasshopper: #6e8454;
  --magician-s-cloak: #79415e;
  --snowy-mint: #d2f3d2;
  --wondrous-wisteria: #b0abef;
  --black-velvet: #25222f;
}

Tailwind CSS v4

/* Grasshopper to Black Velvet — https://swatchly.xyz/palette/6e8454-79415e-d2f3d2-b0abef-25222f */
@theme {
  --color-grasshopper: #6e8454;
  --color-grasshopper-50: #ebf9dc;
  --color-grasshopper-100: #deeecc;
  --color-grasshopper-200: #c6d9b2;
  --color-grasshopper-300: #acc295;
  --color-grasshopper-400: #8ba171;
  --color-grasshopper-500: #6e8454;
  --color-grasshopper-600: #576b3e;
  --color-grasshopper-700: #43562d;
  --color-grasshopper-800: #344420;
  --color-grasshopper-900: #283516;
  --color-grasshopper-950: #18210b;
  --color-magician-s-cloak: #79415e;
  --color-magician-s-cloak-50: #fff1f7;
  --color-magician-s-cloak-100: #ffe2ef;
  --color-magician-s-cloak-200: #f9c7de;
  --color-magician-s-cloak-300: #e6aec9;
  --color-magician-s-cloak-400: #c98daa;
  --color-magician-s-cloak-500: #ae718f;
  --color-magician-s-cloak-600: #915875;
  --color-magician-s-cloak-700: #79415e;
  --color-magician-s-cloak-800: #5f3249;
  --color-magician-s-cloak-900: #4b2539;
  --color-magician-s-cloak-950: #311523;
  --color-snowy-mint: #d2f3d2;
  --color-snowy-mint-50: #e6f9e6;
  --color-snowy-mint-100: #d2f3d2;
  --color-snowy-mint-200: #c5ddc5;
  --color-snowy-mint-300: #acc8ac;
  --color-snowy-mint-400: #8caa8c;
  --color-snowy-mint-500: #718f71;
  --color-snowy-mint-600: #577458;
  --color-snowy-mint-700: #435d43;
  --color-snowy-mint-800: #324933;
  --color-snowy-mint-900: #253926;
  --color-snowy-mint-950: #152316;
  --color-wondrous-wisteria: #b0abef;
  --color-wondrous-wisteria-50: #edecff;
  --color-wondrous-wisteria-100: #e0dfff;
  --color-wondrous-wisteria-200: #c9c6fd;
  --color-wondrous-wisteria-300: #b0abef;
  --color-wondrous-wisteria-400: #938ecf;
  --color-wondrous-wisteria-500: #7b75b5;
  --color-wondrous-wisteria-600: #635d99;
  --color-wondrous-wisteria-700: #4f497f;
  --color-wondrous-wisteria-800: #3e3968;
  --color-wondrous-wisteria-900: #312c55;
  --color-wondrous-wisteria-950: #1e1a38;
  --color-black-velvet: #25222f;
  --color-black-velvet-50: #f5f3fd;
  --color-black-velvet-100: #ece9f4;
  --color-black-velvet-200: #d8d5e2;
  --color-black-velvet-300: #c1becd;
  --color-black-velvet-400: #a29faf;
  --color-black-velvet-500: #888595;
  --color-black-velvet-600: #6f6b7b;
  --color-black-velvet-700: #595664;
  --color-black-velvet-800: #474450;
  --color-black-velvet-900: #383640;
  --color-black-velvet-950: #25222f;
}