Midnight Velvet to Alligator Gladiator color palette

282342Midnight Velvet C6C1FBInnocent Snowdrop 856020Hot Curry 82AF80Verde 4E4314Alligator Gladiator

About this palette

Midnight Velvet to Alligator Gladiator is a 5-color cool, earthy, vintage palette: #282342 (Midnight Velvet), #C6C1FB (Innocent Snowdrop), #856020 (Hot Curry), #82AF80 (Verde), #4E4314 (Alligator Gladiator). It mixes purple, brown, green tones and feels cool overall. The strongest text pairing is #282342 on #C6C1FB with a contrast ratio of 8.81:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Midnight Velvet	rgb(40, 35, 66)	hsl(250, 31%, 20%)
Innocent Snowdrop	rgb(198, 193, 251)	hsl(245, 88%, 87%)
Hot Curry	rgb(133, 96, 32)	hsl(38, 61%, 32%)
Verde	rgb(130, 175, 128)	hsl(117, 23%, 59%)
Alligator Gladiator	rgb(78, 67, 20)	hsl(49, 59%, 19%)

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.81:1 Very good#282342 on #C6C1FB
Aa8.81:1 Very good#C6C1FB on #282342
Aa5.96:1 Good#282342 on #82AF80
Aa5.96:1 Good#82AF80 on #282342
Aa5.81:1 Good#C6C1FB on #4E4314
Aa5.81:1 Good#4E4314 on #C6C1FB
Aa3.93:1 Poor#82AF80 on #4E4314
Aa3.93:1 Poor#4E4314 on #82AF80

Color blindness preview

CSS variables

/* Midnight Velvet to Alligator Gladiator — https://swatchly.xyz/palette/282342-c6c1fb-856020-82af80-4e4314 */
:root {
  --midnight-velvet: #282342;
  --innocent-snowdrop: #c6c1fb;
  --hot-curry: #856020;
  --verde: #82af80;
  --alligator-gladiator: #4e4314;
}

Tailwind CSS v4

/* Midnight Velvet to Alligator Gladiator — https://swatchly.xyz/palette/282342-c6c1fb-856020-82af80-4e4314 */
@theme {
  --color-midnight-velvet: #282342;
  --color-midnight-velvet-50: #f5f4ff;
  --color-midnight-velvet-100: #eae8ff;
  --color-midnight-velvet-200: #d6d3f2;
  --color-midnight-velvet-300: #c0bcdf;
  --color-midnight-velvet-400: #a09cc2;
  --color-midnight-velvet-500: #8783a8;
  --color-midnight-velvet-600: #6e6a8e;
  --color-midnight-velvet-700: #5a5677;
  --color-midnight-velvet-800: #484562;
  --color-midnight-velvet-900: #3a3751;
  --color-midnight-velvet-950: #282342;
  --color-innocent-snowdrop: #c6c1fb;
  --color-innocent-snowdrop-50: #f9f8ff;
  --color-innocent-snowdrop-100: #f0efff;
  --color-innocent-snowdrop-200: #dcd9ff;
  --color-innocent-snowdrop-300: #c6c1fb;
  --color-innocent-snowdrop-400: #a5a1d6;
  --color-innocent-snowdrop-500: #8983b9;
  --color-innocent-snowdrop-600: #6d689b;
  --color-innocent-snowdrop-700: #56507f;
  --color-innocent-snowdrop-800: #423d66;
  --color-innocent-snowdrop-900: #322d4f;
  --color-innocent-snowdrop-950: #1e1b34;
  --color-hot-curry: #856020;
  --color-hot-curry-50: #fff3e3;
  --color-hot-curry-100: #ffe7c3;
  --color-hot-curry-200: #f0d1a3;
  --color-hot-curry-300: #dcb984;
  --color-hot-curry-400: #be975d;
  --color-hot-curry-500: #a17b3e;
  --color-hot-curry-600: #856020;
  --color-hot-curry-700: #6c4b0f;
  --color-hot-curry-800: #563a02;
  --color-hot-curry-900: #432c00;
  --color-hot-curry-950: #2b1a00;
  --color-verde: #82af80;
  --color-verde-50: #e4fee2;
  --color-verde-100: #d7f5d6;
  --color-verde-200: #c0e2be;
  --color-verde-300: #a6cda4;
  --color-verde-400: #82af80;
  --color-verde-500: #679366;
  --color-verde-600: #4e784c;
  --color-verde-700: #3a6039;
  --color-verde-800: #2a4c29;
  --color-verde-900: #1e3b1d;
  --color-verde-950: #102510;
  --color-alligator-gladiator: #4e4314;
  --color-alligator-gladiator-50: #fcf6da;
  --color-alligator-gladiator-100: #f3eccd;
  --color-alligator-gladiator-200: #e1d8b4;
  --color-alligator-gladiator-300: #ccc298;
  --color-alligator-gladiator-400: #aea275;
  --color-alligator-gladiator-500: #938758;
  --color-alligator-gladiator-600: #786d3f;
  --color-alligator-gladiator-700: #60562c;
  --color-alligator-gladiator-800: #4e4314;
  --color-alligator-gladiator-900: #3b3314;
  --color-alligator-gladiator-950: #252009;
}