Shadow Purple to Water Leaf color palette

4D364DShadow Purple 065E49Evergreen 96689DCrown Jewels A59E68Willow Leaf CCCC9FCourt-Bouillon B0EADAWater Leaf

Open in generator Export PNG, PDF, ASE…

About this palette

Shadow Purple to Water Leaf is a 6-color cool palette: #4D364D (Shadow Purple), #065E49 (Evergreen), #96689D (Crown Jewels), #A59E68 (Willow Leaf), #CCCC9F (Court-Bouillon), #B0EADA (Water Leaf). It mixes purple, turquoise, pink, yellow tones and feels cool overall. The strongest text pairing is #4D364D on #B0EADA with a contrast ratio of 8.01:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Shadow Purple	rgb(77, 54, 77)	hsl(300, 18%, 26%)
Evergreen	rgb(6, 94, 73)	hsl(166, 88%, 20%)
Crown Jewels	rgb(150, 104, 157)	hsl(292, 21%, 51%)
Willow Leaf	rgb(165, 158, 104)	hsl(53, 25%, 53%)
Court-Bouillon	rgb(204, 204, 159)	hsl(60, 31%, 71%)
Water Leaf	rgb(176, 234, 218)	hsl(163, 58%, 80%)

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.

Aa8.01:1 Very good#4D364D on #B0EADA
Aa8.01:1 Very good#B0EADA on #4D364D
Aa6.51:1 Good#4D364D on #CCCC9F
Aa6.51:1 Good#CCCC9F on #4D364D
Aa5.78:1 Good#065E49 on #B0EADA
Aa5.78:1 Good#B0EADA on #065E49
Aa4.70:1 Good#065E49 on #CCCC9F
Aa4.70:1 Good#CCCC9F on #065E49

Color blindness preview

CSS variables

/* Shadow Purple to Water Leaf — https://swatchly.xyz/palette/4d364d-065e49-96689d-a59e68-cccc9f-b0eada */
:root {
  --shadow-purple: #4d364d;
  --evergreen: #065e49;
  --crown-jewels: #96689d;
  --willow-leaf: #a59e68;
  --court-bouillon: #cccc9f;
  --water-leaf: #b0eada;
}

Tailwind CSS v4

/* Shadow Purple to Water Leaf — https://swatchly.xyz/palette/4d364d-065e49-96689d-a59e68-cccc9f-b0eada */
@theme {
  --color-shadow-purple: #4d364d;
  --color-shadow-purple-50: #ffefff;
  --color-shadow-purple-100: #f7e5f6;
  --color-shadow-purple-200: #e5d0e4;
  --color-shadow-purple-300: #cfb7cf;
  --color-shadow-purple-400: #b196b0;
  --color-shadow-purple-500: #957a94;
  --color-shadow-purple-600: #796078;
  --color-shadow-purple-700: #604a60;
  --color-shadow-purple-800: #4d364d;
  --color-shadow-purple-900: #3a2a3a;
  --color-shadow-purple-950: #241924;
  --color-evergreen: #065e49;
  --color-evergreen-50: #dafff1;
  --color-evergreen-100: #caf7e6;
  --color-evergreen-200: #aee4d0;
  --color-evergreen-300: #90ceb8;
  --color-evergreen-400: #68af97;
  --color-evergreen-500: #49927b;
  --color-evergreen-600: #2d7660;
  --color-evergreen-700: #065e49;
  --color-evergreen-800: #094939;
  --color-evergreen-900: #02392b;
  --color-evergreen-950: #00241a;
  --color-crown-jewels: #96689d;
  --color-crown-jewels-50: #fdedff;
  --color-crown-jewels-100: #fadbff;
  --color-crown-jewels-200: #e9c2ef;
  --color-crown-jewels-300: #d3a8da;
  --color-crown-jewels-400: #b485bb;
  --color-crown-jewels-500: #96689d;
  --color-crown-jewels-600: #7c5182;
  --color-crown-jewels-700: #643e6a;
  --color-crown-jewels-800: #502f56;
  --color-crown-jewels-900: #402344;
  --color-crown-jewels-950: #29142c;
  --color-willow-leaf: #a59e68;
  --color-willow-leaf-50: #f8f5d5;
  --color-willow-leaf-100: #eeeac6;
  --color-willow-leaf-200: #dbd6ab;
  --color-willow-leaf-300: #c4be8e;
  --color-willow-leaf-400: #a59e68;
  --color-willow-leaf-500: #8b844e;
  --color-willow-leaf-600: #716a37;
  --color-willow-leaf-700: #5a5425;
  --color-willow-leaf-800: #474218;
  --color-willow-leaf-900: #38330e;
  --color-willow-leaf-950: #232006;
  --color-court-bouillon: #cccc9f;
  --color-court-bouillon-50: #fbfbe3;
  --color-court-bouillon-100: #f2f3d8;
  --color-court-bouillon-200: #e0e1c1;
  --color-court-bouillon-300: #cccc9f;
  --color-court-bouillon-400: #abab82;
  --color-court-bouillon-500: #8e8e63;
  --color-court-bouillon-600: #737249;
  --color-court-bouillon-700: #5a5a34;
  --color-court-bouillon-800: #464524;
  --color-court-bouillon-900: #353418;
  --color-court-bouillon-950: #21200c;
  --color-water-leaf: #b0eada;
  --color-water-leaf-50: #e4fff7;
  --color-water-leaf-100: #d6f8ee;
  --color-water-leaf-200: #b0eada;
  --color-water-leaf-300: #a1d0c3;
  --color-water-leaf-400: #7cb1a3;
  --color-water-leaf-500: #5d9587;
  --color-water-leaf-600: #43796c;
  --color-water-leaf-700: #2e6155;
  --color-water-leaf-800: #1f4c41;
  --color-water-leaf-900: #143b32;
  --color-water-leaf-950: #09251f;
}