Deep Pond to Venus Violet Color Palette

About this palette

Deep Pond to Venus Violet is a 5-color cool palette: #003E1D (Deep Pond), #969BD3 (Azureno), #85E3A7 (Jovial Jade), #8C4027 (Fire), #6868CB (Venus Violet). It mixes green, purple, red tones and feels cool overall. The strongest text pairing is #003E1D on #85E3A7 with a contrast ratio of 7.93:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Deep Pond	rgb(0, 62, 29)	hsl(148, 100%, 12%)
Azureno	rgb(150, 155, 211)	hsl(235, 41%, 71%)
Jovial Jade	rgb(133, 227, 167)	hsl(142, 63%, 71%)
Fire	rgb(140, 64, 39)	hsl(15, 56%, 35%)
Venus Violet	rgb(104, 104, 203)	hsl(240, 49%, 60%)

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.

Aa7.93:1 Very good#003E1D on #85E3A7
Aa7.93:1 Very good#85E3A7 on #003E1D
Aa4.71:1 Good#85E3A7 on #8C4027
Aa4.71:1 Good#8C4027 on #85E3A7
Aa4.64:1 Good#003E1D on #969BD3
Aa4.64:1 Good#969BD3 on #003E1D
Aa3.06:1 Poor#85E3A7 on #6868CB
Aa3.06:1 Poor#6868CB on #85E3A7

Color blindness preview

CSS variables

/* Deep Pond to Venus Violet — https://swatchly.xyz/palette/003e1d-969bd3-85e3a7-8c4027-6868cb */
:root {
  --deep-pond: #003e1d;
  --azureno: #969bd3;
  --jovial-jade: #85e3a7;
  --fire: #8c4027;
  --venus-violet: #6868cb;
}

Tailwind CSS v4

/* Deep Pond to Venus Violet — https://swatchly.xyz/palette/003e1d-969bd3-85e3a7-8c4027-6868cb */
@theme {
  --color-deep-pond: #003e1d;
  --color-deep-pond-50: #dfffe7;
  --color-deep-pond-100: #d3f6db;
  --color-deep-pond-200: #bae4c5;
  --color-deep-pond-300: #9fcfac;
  --color-deep-pond-400: #7bb08a;
  --color-deep-pond-500: #5e956e;
  --color-deep-pond-600: #447955;
  --color-deep-pond-700: #306140;
  --color-deep-pond-800: #214d30;
  --color-deep-pond-900: #003e1d;
  --color-deep-pond-950: #0a2514;
  --color-azureno: #969bd3;
  --color-azureno-50: #f2f4ff;
  --color-azureno-100: #e6e9ff;
  --color-azureno-200: #ced3ff;
  --color-azureno-300: #b6bced;
  --color-azureno-400: #969bd3;
  --color-azureno-500: #7b80b6;
  --color-azureno-600: #626699;
  --color-azureno-700: #4d507e;
  --color-azureno-800: #3b3d66;
  --color-azureno-900: #2d2f51;
  --color-azureno-950: #1b1c35;
  --color-jovial-jade: #85e3a7;
  --color-jovial-jade-50: #f0fff4;
  --color-jovial-jade-100: #d3ffe0;
  --color-jovial-jade-200: #b3f2c7;
  --color-jovial-jade-300: #85e3a7;
  --color-jovial-jade-400: #69bf89;
  --color-jovial-jade-500: #44a26a;
  --color-jovial-jade-600: #20854f;
  --color-jovial-jade-700: #006a3a;
  --color-jovial-jade-800: #00522c;
  --color-jovial-jade-900: #003e20;
  --color-jovial-jade-950: #002712;
  --color-fire: #8c4027;
  --color-fire-50: #fff2ee;
  --color-fire-100: #ffe5dc;
  --color-fire-200: #ffcbba;
  --color-fire-300: #f8ae96;
  --color-fire-400: #dd8c73;
  --color-fire-500: #c27056;
  --color-fire-600: #a4573e;
  --color-fire-700: #8c4027;
  --color-fire-800: #6f311c;
  --color-fire-900: #582311;
  --color-fire-950: #3a1407;
  --color-venus-violet: #6868cb;
  --color-venus-violet-50: #f3f4ff;
  --color-venus-violet-100: #e9ecff;
  --color-venus-violet-200: #d4d8ff;
  --color-venus-violet-300: #bcc1ff;
  --color-venus-violet-400: #999dff;
  --color-venus-violet-500: #8082e7;
  --color-venus-violet-600: #6868cb;
  --color-venus-violet-700: #514fab;
  --color-venus-violet-800: #3e3b8c;
  --color-venus-violet-900: #2f2b71;
  --color-venus-violet-950: #1c194b;
}