Digital Lavender to Jungle King Color Palette

About this palette

Digital Lavender to Jungle King is a 4-color vintage palette: #C0C2E7 (Digital Lavender), #D784AF (Pink Punk), #3D7458 (Nordic Forest), #574E28 (Jungle King). It mixes purple, pink, green, brown tones and feels balanced overall. The strongest text pairing is #C0C2E7 on #574E28 with a contrast ratio of 4.80:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Digital Lavender	rgb(192, 194, 231)	hsl(237, 45%, 83%)
Pink Punk	rgb(215, 132, 175)	hsl(329, 51%, 68%)
Nordic Forest	rgb(61, 116, 88)	hsl(149, 31%, 35%)
Jungle King	rgb(87, 78, 40)	hsl(49, 37%, 25%)

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.

Aa4.80:1 Good#C0C2E7 on #574E28
Aa4.80:1 Good#574E28 on #C0C2E7
Aa3.16:1 Poor#C0C2E7 on #3D7458
Aa3.16:1 Poor#3D7458 on #C0C2E7
Aa3.09:1 Poor#D784AF on #574E28
Aa3.09:1 Poor#574E28 on #D784AF

Color blindness preview

CSS variables

/* Digital Lavender to Jungle King — https://swatchly.xyz/palette/c0c2e7-d784af-3d7458-574e28 */
:root {
  --digital-lavender: #c0c2e7;
  --pink-punk: #d784af;
  --nordic-forest: #3d7458;
  --jungle-king: #574e28;
}

Tailwind CSS v4

/* Digital Lavender to Jungle King — https://swatchly.xyz/palette/c0c2e7-d784af-3d7458-574e28 */
@theme {
  --color-digital-lavender: #c0c2e7;
  --color-digital-lavender-50: #f6f7ff;
  --color-digital-lavender-100: #ebedff;
  --color-digital-lavender-200: #d7d9f4;
  --color-digital-lavender-300: #c0c2e7;
  --color-digital-lavender-400: #a0a2c4;
  --color-digital-lavender-500: #8486a8;
  --color-digital-lavender-600: #696a8b;
  --color-digital-lavender-700: #525371;
  --color-digital-lavender-800: #3f405a;
  --color-digital-lavender-900: #303046;
  --color-digital-lavender-950: #1d1d2d;
  --color-pink-punk: #d784af;
  --color-pink-punk-50: #fff1f7;
  --color-pink-punk-100: #ffe3f0;
  --color-pink-punk-200: #ffc4e1;
  --color-pink-punk-300: #f1a8cd;
  --color-pink-punk-400: #d784af;
  --color-pink-punk-500: #b96993;
  --color-pink-punk-600: #9b4f78;
  --color-pink-punk-700: #7f3a60;
  --color-pink-punk-800: #662a4c;
  --color-pink-punk-900: #511e3a;
  --color-pink-punk-950: #341025;
  --color-nordic-forest: #3d7458;
  --color-nordic-forest-50: #dffeec;
  --color-nordic-forest-100: #d1f4e0;
  --color-nordic-forest-200: #b7e2c9;
  --color-nordic-forest-300: #9acbb0;
  --color-nordic-forest-400: #76ac8f;
  --color-nordic-forest-500: #589073;
  --color-nordic-forest-600: #3d7458;
  --color-nordic-forest-700: #2c5d44;
  --color-nordic-forest-800: #1e4934;
  --color-nordic-forest-900: #143927;
  --color-nordic-forest-950: #092417;
  --color-jungle-king: #574e28;
  --color-jungle-king-50: #fbf6de;
  --color-jungle-king-100: #f2ecd1;
  --color-jungle-king-200: #ded7b7;
  --color-jungle-king-300: #c7bf9b;
  --color-jungle-king-400: #a79e77;
  --color-jungle-king-500: #8b815a;
  --color-jungle-king-600: #6f6640;
  --color-jungle-king-700: #574e28;
  --color-jungle-king-800: #433d1f;
  --color-jungle-king-900: #342e16;
  --color-jungle-king-950: #201c0b;
}