Violet Velvet to Highlands Color Palette

About this palette

Violet Velvet to Highlands is a 4-color palette: #AEA1E9 (Violet Velvet), #4B4900 (Alligator Gladiator), #FFE4EA (Sweetly), #4A8E7A (Highlands). It mixes purple, brown, white, turquoise tones and feels cool overall. The strongest text pairing is #4B4900 on #FFE4EA with a contrast ratio of 7.79:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Violet Velvet	rgb(174, 161, 233)	hsl(251, 62%, 77%)
Alligator Gladiator	rgb(75, 73, 0)	hsl(58, 100%, 15%)
Sweetly	rgb(255, 228, 234)	hsl(347, 100%, 95%)
Highlands	rgb(74, 142, 122)	hsl(162, 31%, 42%)

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.

Aa7.79:1 Very good#4B4900 on #FFE4EA
Aa7.79:1 Very good#FFE4EA on #4B4900
Aa4.03:1 Poor#AEA1E9 on #4B4900
Aa4.03:1 Poor#4B4900 on #AEA1E9
Aa3.22:1 Poor#FFE4EA on #4A8E7A
Aa3.22:1 Poor#4A8E7A on #FFE4EA

Color blindness preview

CSS variables

/* Violet Velvet to Highlands — https://swatchly.xyz/palette/aea1e9-4b4900-ffe4ea-4a8e7a */
:root {
  --violet-velvet: #aea1e9;
  --alligator-gladiator: #4b4900;
  --sweetly: #ffe4ea;
  --highlands: #4a8e7a;
}

Tailwind CSS v4

/* Violet Velvet to Highlands — https://swatchly.xyz/palette/aea1e9-4b4900-ffe4ea-4a8e7a */
@theme {
  --color-violet-velvet: #aea1e9;
  --color-violet-velvet-50: #f9f8ff;
  --color-violet-velvet-100: #f1efff;
  --color-violet-velvet-200: #dfdaff;
  --color-violet-velvet-300: #cbc1fd;
  --color-violet-velvet-400: #aea1e9;
  --color-violet-velvet-500: #9184c9;
  --color-violet-velvet-600: #7467aa;
  --color-violet-velvet-700: #5c4f8c;
  --color-violet-velvet-800: #473b71;
  --color-violet-velvet-900: #362c58;
  --color-violet-velvet-950: #201939;
  --color-alligator-gladiator: #4b4900;
  --color-alligator-gladiator-50: #f8f8d4;
  --color-alligator-gladiator-100: #eeeec6;
  --color-alligator-gladiator-200: #dbdbab;
  --color-alligator-gladiator-300: #c6c68f;
  --color-alligator-gladiator-400: #a8a76a;
  --color-alligator-gladiator-500: #8d8c4d;
  --color-alligator-gladiator-600: #737234;
  --color-alligator-gladiator-700: #5d5c21;
  --color-alligator-gladiator-800: #4b4900;
  --color-alligator-gladiator-900: #393808;
  --color-alligator-gladiator-950: #242302;
  --color-sweetly: #ffe4ea;
  --color-sweetly-50: #fff2f5;
  --color-sweetly-100: #ffe4ea;
  --color-sweetly-200: #e6d2d7;
  --color-sweetly-300: #d1bbc0;
  --color-sweetly-400: #b39ba0;
  --color-sweetly-500: #977f85;
  --color-sweetly-600: #7c656a;
  --color-sweetly-700: #634f54;
  --color-sweetly-800: #4f3d41;
  --color-sweetly-900: #3d2e32;
  --color-sweetly-950: #271c1e;
  --color-highlands: #4a8e7a;
  --color-highlands-50: #d8fef1;
  --color-highlands-100: #c9f4e5;
  --color-highlands-200: #ade1cf;
  --color-highlands-300: #8fcab7;
  --color-highlands-400: #69ab96;
  --color-highlands-500: #4a8e7a;
  --color-highlands-600: #317461;
  --color-highlands-700: #1f5d4d;
  --color-highlands-800: #114a3c;
  --color-highlands-900: #083a2e;
  --color-highlands-950: #02251c;
}