Venus Violet to Diva Color Palette

About this palette

Venus Violet to Diva is a 5-color cool palette: #7C76D2 (Venus Violet), #B4FAE4 (Blister Pearl), #773900 (Hazelnut Chocolate), #002D1D (Pitch-Black Forests), #BAAAFF (Diva). It mixes purple, turquoise, brown, green tones and feels cool overall. The strongest text pairing is #B4FAE4 on #002D1D with a contrast ratio of 12.73:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Venus Violet	rgb(124, 118, 210)	hsl(244, 51%, 64%)
Blister Pearl	rgb(180, 250, 228)	hsl(161, 87%, 84%)
Hazelnut Chocolate	rgb(119, 57, 0)	hsl(29, 100%, 23%)
Pitch-Black Forests	rgb(0, 45, 29)	hsl(159, 100%, 9%)
Diva	rgb(186, 170, 255)	hsl(251, 100%, 83%)

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.73:1 Super#B4FAE4 on #002D1D
Aa12.73:1 Super#002D1D on #B4FAE4
Aa7.48:1 Very good#B4FAE4 on #773900
Aa7.48:1 Very good#773900 on #B4FAE4
Aa7.38:1 Very good#002D1D on #BAAAFF
Aa7.38:1 Very good#BAAAFF on #002D1D
Aa4.34:1 Poor#773900 on #BAAAFF
Aa4.34:1 Poor#BAAAFF on #773900

Color blindness preview

CSS variables

/* Venus Violet to Diva — https://swatchly.xyz/palette/7c76d2-b4fae4-773900-002d1d-baaaff */
:root {
  --venus-violet: #7c76d2;
  --blister-pearl: #b4fae4;
  --hazelnut-chocolate: #773900;
  --pitch-black-forests: #002d1d;
  --diva: #baaaff;
}

Tailwind CSS v4

/* Venus Violet to Diva — https://swatchly.xyz/palette/7c76d2-b4fae4-773900-002d1d-baaaff */
@theme {
  --color-venus-violet: #7c76d2;
  --color-venus-violet-50: #f3f4ff;
  --color-venus-violet-100: #e7e8ff;
  --color-venus-violet-200: #d1d1ff;
  --color-venus-violet-300: #b8b6ff;
  --color-venus-violet-400: #9793ee;
  --color-venus-violet-500: #7c76d2;
  --color-venus-violet-600: #635cb3;
  --color-venus-violet-700: #4e4696;
  --color-venus-violet-800: #3d357a;
  --color-venus-violet-900: #2e2762;
  --color-venus-violet-950: #1c1742;
  --color-blister-pearl: #b4fae4;
  --color-blister-pearl-50: #d7fdf0;
  --color-blister-pearl-100: #b4fae4;
  --color-blister-pearl-200: #b0e2d2;
  --color-blister-pearl-300: #94cebb;
  --color-blister-pearl-400: #6fb09c;
  --color-blister-pearl-500: #519581;
  --color-blister-pearl-600: #377a67;
  --color-blister-pearl-700: #226252;
  --color-blister-pearl-800: #134d3f;
  --color-blister-pearl-900: #093c30;
  --color-blister-pearl-950: #03261d;
  --color-hazelnut-chocolate: #773900;
  --color-hazelnut-chocolate-50: #fff2eb;
  --color-hazelnut-chocolate-100: #ffe6d6;
  --color-hazelnut-chocolate-200: #ffc9a6;
  --color-hazelnut-chocolate-300: #ecae85;
  --color-hazelnut-chocolate-400: #ce8b5e;
  --color-hazelnut-chocolate-500: #b06d3f;
  --color-hazelnut-chocolate-600: #905225;
  --color-hazelnut-chocolate-700: #773900;
  --color-hazelnut-chocolate-800: #5c2d06;
  --color-hazelnut-chocolate-900: #492101;
  --color-hazelnut-chocolate-950: #2f1300;
  --color-pitch-black-forests: #002d1d;
  --color-pitch-black-forests-50: #e3fcef;
  --color-pitch-black-forests-100: #d7f3e5;
  --color-pitch-black-forests-200: #c0e1d0;
  --color-pitch-black-forests-300: #a5cbb8;
  --color-pitch-black-forests-400: #83ad98;
  --color-pitch-black-forests-500: #68927e;
  --color-pitch-black-forests-600: #4f7865;
  --color-pitch-black-forests-700: #3c6250;
  --color-pitch-black-forests-800: #2c4f3f;
  --color-pitch-black-forests-900: #213f31;
  --color-pitch-black-forests-950: #002d1d;
  --color-diva: #baaaff;
  --color-diva-50: #f1eeff;
  --color-diva-100: #e5e1ff;
  --color-diva-200: #d1c8ff;
  --color-diva-300: #baaaff;
  --color-diva-400: #9c8ddd;
  --color-diva-500: #8372c2;
  --color-diva-600: #6a59a5;
  --color-diva-700: #55458a;
  --color-diva-800: #433571;
  --color-diva-900: #35285c;
  --color-diva-950: #21173d;
}