Leek to Verde Color Palette

About this palette

Leek to Verde is a 5-color cool, earthy palette: #9FD79B (Leek), #828BBD (Galactic Gossamer), #3B4267 (Genie), #A15032 (Truffle Trouble), #83B88E (Verde). It mixes green, purple, blue, brown tones and feels cool overall. The strongest text pairing is #9FD79B on #3B4267 with a contrast ratio of 5.86:1, and 1 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Leek	rgb(159, 215, 155)	hsl(116, 43%, 73%)
Galactic Gossamer	rgb(130, 139, 189)	hsl(231, 31%, 63%)
Genie	rgb(59, 66, 103)	hsl(230, 27%, 32%)
Truffle Trouble	rgb(161, 80, 50)	hsl(16, 53%, 41%)
Verde	rgb(131, 184, 142)	hsl(132, 27%, 62%)

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.86:1 Good#9FD79B on #3B4267
Aa5.86:1 Good#3B4267 on #9FD79B
Aa4.26:1 Poor#3B4267 on #83B88E
Aa4.26:1 Poor#83B88E on #3B4267
Aa3.42:1 Poor#9FD79B on #A15032
Aa3.42:1 Poor#A15032 on #9FD79B

Color blindness preview

CSS variables

/* Leek to Verde — https://swatchly.xyz/palette/9fd79b-828bbd-3b4267-a15032-83b88e */
:root {
  --leek: #9fd79b;
  --galactic-gossamer: #828bbd;
  --genie: #3b4267;
  --truffle-trouble: #a15032;
  --verde: #83b88e;
}

Tailwind CSS v4

/* Leek to Verde — https://swatchly.xyz/palette/9fd79b-828bbd-3b4267-a15032-83b88e */
@theme {
  --color-leek: #9fd79b;
  --color-leek-50: #e9ffe7;
  --color-leek-100: #d8fad5;
  --color-leek-200: #c0e9bd;
  --color-leek-300: #9fd79b;
  --color-leek-400: #81b57e;
  --color-leek-500: #649960;
  --color-leek-600: #497d46;
  --color-leek-700: #346432;
  --color-leek-800: #244e23;
  --color-leek-900: #183c17;
  --color-leek-950: #0c260b;
  --color-galactic-gossamer: #828bbd;
  --color-galactic-gossamer-50: #f4f6ff;
  --color-galactic-gossamer-100: #eaedff;
  --color-galactic-gossamer-200: #d2daff;
  --color-galactic-gossamer-300: #bcc4f0;
  --color-galactic-gossamer-400: #9ca6d6;
  --color-galactic-gossamer-500: #828bbd;
  --color-galactic-gossamer-600: #676f9f;
  --color-galactic-gossamer-700: #505782;
  --color-galactic-gossamer-800: #3d4369;
  --color-galactic-gossamer-900: #2d3252;
  --color-galactic-gossamer-950: #1b1e35;
  --color-genie: #3b4267;
  --color-genie-50: #f2f5ff;
  --color-genie-100: #e5eaff;
  --color-genie-200: #ced6f7;
  --color-genie-300: #b7bfe5;
  --color-genie-400: #97a0c9;
  --color-genie-500: #7c85ae;
  --color-genie-600: #636b92;
  --color-genie-700: #4e5579;
  --color-genie-800: #3b4267;
  --color-genie-900: #2e334e;
  --color-genie-950: #1c1f33;
  --color-truffle-trouble: #a15032;
  --color-truffle-trouble-50: #fff2ed;
  --color-truffle-trouble-100: #ffe4db;
  --color-truffle-trouble-200: #ffc9b6;
  --color-truffle-trouble-300: #f8ab8f;
  --color-truffle-trouble-400: #db886a;
  --color-truffle-trouble-500: #bf6b4c;
  --color-truffle-trouble-600: #a15032;
  --color-truffle-trouble-700: #843c21;
  --color-truffle-trouble-800: #6b2c13;
  --color-truffle-trouble-900: #551f0a;
  --color-truffle-trouble-950: #381104;
  --color-verde: #83b88e;
  --color-verde-50: #e8ffec;
  --color-verde-100: #d9f9df;
  --color-verde-200: #c2e8c9;
  --color-verde-300: #a8d4b1;
  --color-verde-400: #83b88e;
  --color-verde-500: #679a72;
  --color-verde-600: #4b7e57;
  --color-verde-700: #366541;
  --color-verde-800: #264f30;
  --color-verde-900: #193d23;
  --color-verde-950: #0c2513;
}