Prickly Purple to Green Glint Color Palette

About this palette

Prickly Purple to Green Glint is a 5-color cool, earthy, vintage palette: #A65CC3 (Prickly Purple), #C99B6A (Cardboard), #005593 (Blue Chip), #482D00 (Chocolate Castle), #DFEDC7 (Green Glint). It mixes purple, orange, blue, brown, green tones and feels cool overall. The strongest text pairing is #482D00 on #DFEDC7 with a contrast ratio of 10.34:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Prickly Purple	rgb(166, 92, 195)	hsl(283, 46%, 56%)
Cardboard	rgb(201, 155, 106)	hsl(31, 47%, 60%)
Blue Chip	rgb(0, 85, 147)	hsl(205, 100%, 29%)
Chocolate Castle	rgb(72, 45, 0)	hsl(38, 100%, 14%)
Green Glint	rgb(223, 237, 199)	hsl(82, 51%, 85%)

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.

Aa10.34:1 Very good#482D00 on #DFEDC7
Aa10.34:1 Very good#DFEDC7 on #482D00
Aa6.28:1 Good#005593 on #DFEDC7
Aa6.28:1 Good#DFEDC7 on #005593
Aa5.08:1 Good#C99B6A on #482D00
Aa5.08:1 Good#482D00 on #C99B6A
Aa3.46:1 Poor#A65CC3 on #DFEDC7
Aa3.46:1 Poor#DFEDC7 on #A65CC3

Color blindness preview

CSS variables

/* Prickly Purple to Green Glint — https://swatchly.xyz/palette/a65cc3-c99b6a-005593-482d00-dfedc7 */
:root {
  --prickly-purple: #a65cc3;
  --cardboard: #c99b6a;
  --blue-chip: #005593;
  --chocolate-castle: #482d00;
  --green-glint: #dfedc7;
}

Tailwind CSS v4

/* Prickly Purple to Green Glint — https://swatchly.xyz/palette/a65cc3-c99b6a-005593-482d00-dfedc7 */
@theme {
  --color-prickly-purple: #a65cc3;
  --color-prickly-purple-50: #faf0ff;
  --color-prickly-purple-100: #f6e0ff;
  --color-prickly-purple-200: #edc2ff;
  --color-prickly-purple-300: #e19ffc;
  --color-prickly-purple-400: #c37ae0;
  --color-prickly-purple-500: #a65cc3;
  --color-prickly-purple-600: #8a43a5;
  --color-prickly-purple-700: #712f89;
  --color-prickly-purple-800: #5b2070;
  --color-prickly-purple-900: #48155a;
  --color-prickly-purple-950: #2f0a3c;
  --color-cardboard: #c99b6a;
  --color-cardboard-50: #fff4ea;
  --color-cardboard-100: #ffe9d3;
  --color-cardboard-200: #f6d3af;
  --color-cardboard-300: #e4bc92;
  --color-cardboard-400: #c99b6a;
  --color-cardboard-500: #ab7f4f;
  --color-cardboard-600: #8e6434;
  --color-cardboard-700: #744e21;
  --color-cardboard-800: #5c3b12;
  --color-cardboard-900: #482c08;
  --color-cardboard-950: #2e1a03;
  --color-blue-chip: #005593;
  --color-blue-chip-50: #eef6ff;
  --color-blue-chip-100: #dcedff;
  --color-blue-chip-200: #b8dbff;
  --color-blue-chip-300: #8cc5ff;
  --color-blue-chip-400: #62a5e7;
  --color-blue-chip-500: #4389cb;
  --color-blue-chip-600: #276dac;
  --color-blue-chip-700: #005593;
  --color-blue-chip-800: #024273;
  --color-blue-chip-900: #00335b;
  --color-blue-chip-950: #001f3c;
  --color-chocolate-castle: #482d00;
  --color-chocolate-castle-50: #fff3e4;
  --color-chocolate-castle-100: #fde8cd;
  --color-chocolate-castle-200: #ecd3b3;
  --color-chocolate-castle-300: #d8bc98;
  --color-chocolate-castle-400: #bb9c74;
  --color-chocolate-castle-500: #a08057;
  --color-chocolate-castle-600: #84663f;
  --color-chocolate-castle-700: #6b502c;
  --color-chocolate-castle-800: #553e1d;
  --color-chocolate-castle-900: #482d00;
  --color-chocolate-castle-950: #2b1d08;
  --color-green-glint: #dfedc7;
  --color-green-glint-50: #edf5df;
  --color-green-glint-100: #dfedc7;
  --color-green-glint-200: #ced9bc;
  --color-green-glint-300: #b8c3a4;
  --color-green-glint-400: #99a583;
  --color-green-glint-500: #7e8a68;
  --color-green-glint-600: #65704f;
  --color-green-glint-700: #505a3c;
  --color-green-glint-800: #3d462c;
  --color-green-glint-900: #2f3620;
  --color-green-glint-950: #1c2212;
}