Pastel Violet to Forestry Color Palette

About this palette

Pastel Violet to Forestry is a 5-color muted, cool palette: #CC97CE (Pastel Violet), #CEE3C3 (Endive), #0F1C0E (Nightmare), #867391 (Vintage), #344224 (Forestry). It mixes pink, green, black, purple tones and feels cool overall. The strongest text pairing is #CEE3C3 on #0F1C0E with a contrast ratio of 12.91:1, and 4 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Pastel Violet	rgb(204, 151, 206)	hsl(298, 36%, 70%)
Endive	rgb(206, 227, 195)	hsl(99, 36%, 83%)
Nightmare	rgb(15, 28, 14)	hsl(116, 33%, 8%)
Vintage	rgb(134, 115, 145)	hsl(278, 12%, 51%)
Forestry	rgb(52, 66, 36)	hsl(88, 29%, 20%)

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.

Aa12.91:1 Super#CEE3C3 on #0F1C0E
Aa12.91:1 Super#0F1C0E on #CEE3C3
Aa7.89:1 Very good#CEE3C3 on #344224
Aa7.89:1 Very good#344224 on #CEE3C3
Aa7.45:1 Very good#CC97CE on #0F1C0E
Aa7.45:1 Very good#0F1C0E on #CC97CE
Aa4.55:1 Good#CC97CE on #344224
Aa4.55:1 Good#344224 on #CC97CE

Color blindness preview

CSS variables

/* Pastel Violet to Forestry — https://swatchly.xyz/palette/cc97ce-cee3c3-0f1c0e-867391-344224 */
:root {
  --pastel-violet: #cc97ce;
  --endive: #cee3c3;
  --nightmare: #0f1c0e;
  --vintage: #867391;
  --forestry: #344224;
}

Tailwind CSS v4

/* Pastel Violet to Forestry — https://swatchly.xyz/palette/cc97ce-cee3c3-0f1c0e-867391-344224 */
@theme {
  --color-pastel-violet: #cc97ce;
  --color-pastel-violet-50: #fff5ff;
  --color-pastel-violet-100: #ffe9ff;
  --color-pastel-violet-200: #f7d0f8;
  --color-pastel-violet-300: #e5b9e7;
  --color-pastel-violet-400: #cc97ce;
  --color-pastel-violet-500: #ad7aaf;
  --color-pastel-violet-600: #8f5e91;
  --color-pastel-violet-700: #744776;
  --color-pastel-violet-800: #5c345e;
  --color-pastel-violet-900: #472648;
  --color-pastel-violet-950: #2c152d;
  --color-endive: #cee3c3;
  --color-endive-50: #f1fceb;
  --color-endive-100: #e6f3e0;
  --color-endive-200: #cee3c3;
  --color-endive-300: #b9cab0;
  --color-endive-400: #98ab8e;
  --color-endive-500: #7c8f71;
  --color-endive-600: #617357;
  --color-endive-700: #4b5c42;
  --color-endive-800: #394731;
  --color-endive-900: #2b3724;
  --color-endive-950: #1a2215;
  --color-nightmare: #0f1c0e;
  --color-nightmare-50: #eff8ed;
  --color-nightmare-100: #e4efe3;
  --color-nightmare-200: #cfdccd;
  --color-nightmare-300: #b7c6b5;
  --color-nightmare-400: #97a795;
  --color-nightmare-500: #7a8a78;
  --color-nightmare-600: #5f6e5d;
  --color-nightmare-700: #485547;
  --color-nightmare-800: #354134;
  --color-nightmare-900: #262f25;
  --color-nightmare-950: #0f1c0e;
  --color-vintage: #867391;
  --color-vintage-50: #f9efff;
  --color-vintage-100: #efe1f7;
  --color-vintage-200: #dbcbe4;
  --color-vintage-300: #c3b1ce;
  --color-vintage-400: #a390ae;
  --color-vintage-500: #867391;
  --color-vintage-600: #6d5b77;
  --color-vintage-700: #574860;
  --color-vintage-800: #45374d;
  --color-vintage-900: #362a3d;
  --color-vintage-950: #221a27;
  --color-forestry: #344224;
  --color-forestry-50: #eff9e5;
  --color-forestry-100: #e4f0d9;
  --color-forestry-200: #d0ddc2;
  --color-forestry-300: #b7c6a8;
  --color-forestry-400: #95a685;
  --color-forestry-500: #798968;
  --color-forestry-600: #5e6e4e;
  --color-forestry-700: #48563a;
  --color-forestry-800: #344224;
  --color-forestry-900: #28321e;
  --color-forestry-950: #181e10;
}