Velvet to Snow White Color Palette

About this palette

Velvet to Snow White is a 5-color palette: #7A1B5C (Velvet), #007B53 (Opal Green), #B76D9F (Je t’aime), #8AD9A5 (Jovial Jade), #E7FFF0 (Snow White). It mixes red, green, pink, white tones and feels balanced overall. The strongest text pairing is #7A1B5C on #E7FFF0 with a contrast ratio of 9.33:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Velvet	rgb(122, 27, 92)	hsl(319, 64%, 29%)
Opal Green	rgb(0, 123, 83)	hsl(160, 100%, 24%)
Je t’aime	rgb(183, 109, 159)	hsl(319, 34%, 57%)
Jovial Jade	rgb(138, 217, 165)	hsl(141, 51%, 70%)
Snow White	rgb(231, 255, 240)	hsl(142, 100%, 95%)

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.33:1 Very good#7A1B5C on #E7FFF0
Aa9.33:1 Very good#E7FFF0 on #7A1B5C
Aa5.87:1 Good#7A1B5C on #8AD9A5
Aa5.87:1 Good#8AD9A5 on #7A1B5C
Aa5.04:1 Good#007B53 on #E7FFF0
Aa5.04:1 Good#E7FFF0 on #007B53
Aa3.50:1 Poor#B76D9F on #E7FFF0
Aa3.50:1 Poor#E7FFF0 on #B76D9F

Color blindness preview

CSS variables

/* Velvet to Snow White — https://swatchly.xyz/palette/7a1b5c-007b53-b76d9f-8ad9a5-e7fff0 */
:root {
  --velvet: #7a1b5c;
  --opal-green: #007b53;
  --je-t-aime: #b76d9f;
  --jovial-jade: #8ad9a5;
  --snow-white: #e7fff0;
}

Tailwind CSS v4

/* Velvet to Snow White — https://swatchly.xyz/palette/7a1b5c-007b53-b76d9f-8ad9a5-e7fff0 */
@theme {
  --color-velvet: #7a1b5c;
  --color-velvet-50: #fff0f8;
  --color-velvet-100: #ffe2f2;
  --color-velvet-200: #ffc3e5;
  --color-velvet-300: #faa1d6;
  --color-velvet-400: #e07eba;
  --color-velvet-500: #c562a0;
  --color-velvet-600: #a84885;
  --color-velvet-700: #8d346e;
  --color-velvet-800: #7a1b5c;
  --color-velvet-900: #5d1846;
  --color-velvet-950: #3e0b2e;
  --color-opal-green: #007b53;
  --color-opal-green-50: #dcffec;
  --color-opal-green-100: #c1fadc;
  --color-opal-green-200: #a3e8c5;
  --color-opal-green-300: #82d3ab;
  --color-opal-green-400: #57b489;
  --color-opal-green-500: #33976d;
  --color-opal-green-600: #007b53;
  --color-opal-green-700: #006241;
  --color-opal-green-800: #004d32;
  --color-opal-green-900: #003b26;
  --color-opal-green-950: #002516;
  --color-je-t-aime: #b76d9f;
  --color-je-t-aime-50: #fff1fa;
  --color-je-t-aime-100: #ffe3f4;
  --color-je-t-aime-200: #ffc5ea;
  --color-je-t-aime-300: #eeabd7;
  --color-je-t-aime-400: #d289ba;
  --color-je-t-aime-500: #b76d9f;
  --color-je-t-aime-600: #995283;
  --color-je-t-aime-700: #7d3d6a;
  --color-je-t-aime-800: #642c54;
  --color-je-t-aime-900: #4f2041;
  --color-je-t-aime-950: #331129;
  --color-jovial-jade: #8ad9a5;
  --color-jovial-jade-50: #e4ffec;
  --color-jovial-jade-100: #ccfbda;
  --color-jovial-jade-200: #b2eac4;
  --color-jovial-jade-300: #8ad9a5;
  --color-jovial-jade-400: #6db787;
  --color-jovial-jade-500: #4d9b6b;
  --color-jovial-jade-600: #317f51;
  --color-jovial-jade-700: #1a663c;
  --color-jovial-jade-800: #09502c;
  --color-jovial-jade-900: #003e1f;
  --color-jovial-jade-950: #002712;
  --color-snow-white: #e7fff0;
  --color-snow-white-50: #e7fff0;
  --color-snow-white-100: #e3f2e9;
  --color-snow-white-200: #cdded4;
  --color-snow-white-300: #b4c8bc;
  --color-snow-white-400: #93a99b;
  --color-snow-white-500: #778d7f;
  --color-snow-white-600: #5d7265;
  --color-snow-white-700: #485a4f;
  --color-snow-white-800: #37473d;
  --color-snow-white-900: #29372e;
  --color-snow-white-950: #18221c;
}