Pink Orchid to Celadon Color Palette

About this palette

Pink Orchid to Celadon is a 5-color cool palette: #D470E2 (Pink Orchid), #002E16 (Haunted Forest), #6D0067 (Velvet), #8F4C83 (Grape Candy), #AAE4B9 (Celadon). It mixes pink, green, purple tones and feels cool overall. The strongest text pairing is #002E16 on #AAE4B9 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
Pink Orchid	rgb(212, 112, 226)	hsl(293, 66%, 66%)
Haunted Forest	rgb(0, 46, 22)	hsl(149, 100%, 9%)
Velvet	rgb(109, 0, 103)	hsl(303, 100%, 21%)
Grape Candy	rgb(143, 76, 131)	hsl(311, 31%, 43%)
Celadon	rgb(170, 228, 185)	hsl(136, 52%, 78%)

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#002E16 on #AAE4B9
Aa10.34:1 Very good#AAE4B9 on #002E16
Aa7.86:1 Very good#6D0067 on #AAE4B9
Aa7.86:1 Very good#AAE4B9 on #6D0067
Aa5.15:1 Good#D470E2 on #002E16
Aa5.15:1 Good#002E16 on #D470E2
Aa4.11:1 Poor#8F4C83 on #AAE4B9
Aa4.11:1 Poor#AAE4B9 on #8F4C83

Color blindness preview

CSS variables

/* Pink Orchid to Celadon — https://swatchly.xyz/palette/d470e2-002e16-6d0067-8f4c83-aae4b9 */
:root {
  --pink-orchid: #d470e2;
  --haunted-forest: #002e16;
  --velvet: #6d0067;
  --grape-candy: #8f4c83;
  --celadon: #aae4b9;
}

Tailwind CSS v4

/* Pink Orchid to Celadon — https://swatchly.xyz/palette/d470e2-002e16-6d0067-8f4c83-aae4b9 */
@theme {
  --color-pink-orchid: #d470e2;
  --color-pink-orchid-50: #fdeeff;
  --color-pink-orchid-100: #fbdeff;
  --color-pink-orchid-200: #f8beff;
  --color-pink-orchid-300: #ef98fb;
  --color-pink-orchid-400: #d470e2;
  --color-pink-orchid-500: #b754c5;
  --color-pink-orchid-600: #9939a7;
  --color-pink-orchid-700: #7e248a;
  --color-pink-orchid-800: #661471;
  --color-pink-orchid-900: #51095a;
  --color-pink-orchid-950: #35033c;
  --color-haunted-forest: #002e16;
  --color-haunted-forest-50: #e3fdeb;
  --color-haunted-forest-100: #d7f4df;
  --color-haunted-forest-200: #bfe2ca;
  --color-haunted-forest-300: #a5ccb1;
  --color-haunted-forest-400: #83ae90;
  --color-haunted-forest-500: #679376;
  --color-haunted-forest-600: #4f7a5d;
  --color-haunted-forest-700: #3b6349;
  --color-haunted-forest-800: #2c5039;
  --color-haunted-forest-900: #21402c;
  --color-haunted-forest-950: #002e16;
  --color-velvet: #6d0067;
  --color-velvet-50: #fff0fc;
  --color-velvet-100: #ffe0fa;
  --color-velvet-200: #ffbff6;
  --color-velvet-300: #f69deb;
  --color-velvet-400: #d977ce;
  --color-velvet-500: #bc59b2;
  --color-velvet-600: #9d3e95;
  --color-velvet-700: #802979;
  --color-velvet-800: #6d0067;
  --color-velvet-900: #510f4c;
  --color-velvet-950: #350531;
  --color-grape-candy: #8f4c83;
  --color-grape-candy-50: #fff0fb;
  --color-grape-candy-100: #ffdff8;
  --color-grape-candy-200: #fac1ee;
  --color-grape-candy-300: #e7a7d9;
  --color-grape-candy-400: #c984bb;
  --color-grape-candy-500: #ac679f;
  --color-grape-candy-600: #8f4c83;
  --color-grape-candy-700: #74396a;
  --color-grape-candy-800: #5d2a54;
  --color-grape-candy-900: #4a1e42;
  --color-grape-candy-950: #30102b;
  --color-celadon: #aae4b9;
  --color-celadon-50: #dcfce3;
  --color-celadon-100: #cef3d7;
  --color-celadon-200: #aae4b9;
  --color-celadon-300: #9bcca7;
  --color-celadon-400: #78ae87;
  --color-celadon-500: #5c936c;
  --color-celadon-600: #437853;
  --color-celadon-700: #30613f;
  --color-celadon-800: #214d2f;
  --color-celadon-900: #163c23;
  --color-celadon-950: #0a2614;
}