Scampi to Violet Heaven Color Palette

About this palette

Scampi to Violet Heaven is a 4-color cool palette: #7B669F (Scampi), #81A563 (Garden of Eden), #344821 (Forestry), #C8B3FF (Violet Heaven). It mixes purple, green tones and feels cool overall. The strongest text pairing is #344821 on #C8B3FF with a contrast ratio of 5.42:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Scampi	rgb(123, 102, 159)	hsl(262, 23%, 51%)
Garden of Eden	rgb(129, 165, 99)	hsl(93, 27%, 52%)
Forestry	rgb(52, 72, 33)	hsl(91, 37%, 21%)
Violet Heaven	rgb(200, 179, 255)	hsl(257, 100%, 85%)

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.

Aa5.42:1 Good#344821 on #C8B3FF
Aa5.42:1 Good#C8B3FF on #344821
Aa3.58:1 Poor#81A563 on #344821
Aa3.58:1 Poor#344821 on #81A563

Color blindness preview

CSS variables

/* Scampi to Violet Heaven — https://swatchly.xyz/palette/7b669f-81a563-344821-c8b3ff */
:root {
  --scampi: #7b669f;
  --garden-of-eden: #81a563;
  --forestry: #344821;
  --violet-heaven: #c8b3ff;
}

Tailwind CSS v4

/* Scampi to Violet Heaven — https://swatchly.xyz/palette/7b669f-81a563-344821-c8b3ff */
@theme {
  --color-scampi: #7b669f;
  --color-scampi-50: #f7f3ff;
  --color-scampi-100: #efe8ff;
  --color-scampi-200: #e0d1ff;
  --color-scampi-300: #ccbaef;
  --color-scampi-400: #af9ad4;
  --color-scampi-500: #957fba;
  --color-scampi-600: #7b669f;
  --color-scampi-700: #624f83;
  --color-scampi-800: #4d3c69;
  --color-scampi-900: #3c2d53;
  --color-scampi-950: #251b36;
  --color-garden-of-eden: #81a563;
  --color-garden-of-eden-50: #e4fad3;
  --color-garden-of-eden-100: #d6f0c3;
  --color-garden-of-eden-200: #bedca7;
  --color-garden-of-eden-300: #a4c589;
  --color-garden-of-eden-400: #81a563;
  --color-garden-of-eden-500: #688b4a;
  --color-garden-of-eden-600: #517133;
  --color-garden-of-eden-700: #3e5b22;
  --color-garden-of-eden-800: #2f4815;
  --color-garden-of-eden-900: #23390d;
  --color-garden-of-eden-950: #152505;
  --color-forestry: #344821;
  --color-forestry-50: #edfbe2;
  --color-forestry-100: #e2f1d5;
  --color-forestry-200: #ccdfbd;
  --color-forestry-300: #b4c9a3;
  --color-forestry-400: #93aa80;
  --color-forestry-500: #778e64;
  --color-forestry-600: #5d734b;
  --color-forestry-700: #485b37;
  --color-forestry-800: #344821;
  --color-forestry-900: #29371c;
  --color-forestry-950: #18220f;
  --color-violet-heaven: #c8b3ff;
  --color-violet-heaven-50: #f6f3ff;
  --color-violet-heaven-100: #ede8ff;
  --color-violet-heaven-200: #dcd0ff;
  --color-violet-heaven-300: #c8b3ff;
  --color-violet-heaven-400: #a894db;
  --color-violet-heaven-500: #8d78bf;
  --color-violet-heaven-600: #725ea2;
  --color-violet-heaven-700: #5b4886;
  --color-violet-heaven-800: #48376c;
  --color-violet-heaven-900: #372956;
  --color-violet-heaven-950: #231839;
}